I'm having an annoying issue where uglify (called through grunt-usemin) cannot parse the url for a package named flow.js. This package is installed as a dependency of ng-flow.
The url looks like this:
bower_components/flow.js/dist/flow.js
When I run grunt build, I get the following error:
Warning: Unable to read "dist/public/bower_components/flow.js" file (Error code: EISDIR). Use --force to continue.
Since I don't know much about usemin and uglify, I can't put my finger on the issue. My guess was that it breaks when it gets at the first "flow.js" of the url. So, I tried to install flow.js as flowjs in my bower.json, but since its a dependency of ng-flow it will still get flow.js when running bower update.
Can anyone tell me more about this error, or suggest me a workaround to rename the dependency package?
Edit: usemin part of the Gruntfile
useminPrepare: {
html: ['<%= yeoman.client %>/index.html'],
options: {
dest: '<%= yeoman.dist %>/public'
}
},
usemin: {
html: ['<%= yeoman.dist %>/public/{,*/}*.html'],
css: ['<%= yeoman.dist %>/public/{,*/}*.css'],
js: ['<%= yeoman.dist %>/public/**/*.js'],
options: {
assetsDirs: [
'<%= yeoman.dist %>/public',
'<%= yeoman.dist %>/public/assets/images'
],
// This is so we update image references in our ng-templates
patterns: {
js: [
[/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
]
}
}
}
grunt.registerTask('build', [
'clean:dist',
'injector:less',
'concurrent:dist',
'injector',
'wiredep',
'useminPrepare',
'autoprefixer',
'ngtemplates',
'concat',
'ngAnnotate',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'rev',
'usemin']);
For the records, the grunt file is generated using https://github.com/DaftMonk/generator-angular-fullstack
The problem is that Grunt can't distinguish between a directory ending in '.js' and a .js file.
The workaround will be to use a wildcard expression to grab the files in flow.js and to exclude the directory itself.
Edit: You will need to exclude flow.js from both usemin AND rev.
usemin: {
html: ['<%= yeoman.dist %>/public/{,*/}*.html'],
css: ['<%= yeoman.dist %>/public/{,*/}*.css'],
js: {
src: ['<%= yeoman.dist %>/public/{,*/}*.js', '!<%= yeoman.dist %>/public/bower_components/flow.js'],
},
...
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/public/{,*/}*.js',
'<%= yeoman.dist %>/public/{,*/}*.css',
'<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/public/assets/fonts/*',
'!<%= yeoman.dist %>/public/bower_components/flow.js'
]
}
}
},
The problem is that Grunt can't distinguish between a directory ending in '.js' and a .js file.
This is a wrong statement. Grunt use minimatch lib to configure how to search for files, and there is a isFile filter that you can set to true to only search files. See grunt.file.expand
Following this link you will find an example with filter: 'isFile'.
By the way you should upgrade to usemin v3, as this issue seems to be solved as you can see in issue #474
You can see my patch here where I've migrate the project to usemin 3 and switch grunt-rev to grunt-filerev.
Related
I wanted to tackle file cache updating in a Svelte app and wanted this part of the rollup build. I decide to add a querystring parameter to the file references (such as 'index.html?v=0.1') in the distributed build scripts. I created a constant '__cVersion__' in my rollup.config.js script and tried to use the 'rollup-plugin-modify', but that only updated my main.js and App.svelte code (the files being compiled). I also tried the '#rollup/plugin-replace' plugin with the same results. I needed the files I was also copying (not building) from src to public to also to have instances of '__cVersion__' replaced in the scripts.
The following was my initial rollup.config.js export function (the string replacement that did not work):
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
// this only seems to work on the main.js and .svelte files
modify({
'__cVersion__': 'c0.1.19'
}),
svelte({
dev: !production,
css: css => {
css.write('public/build/bundle.css');
}
}),
copy({
targets: [{
src: 'src/bs4.4.1.css',
dest: 'public/'
},
{
src: 'src/sw.js',
dest: 'public/'
},
{
src: 'src/index.html',
dest: 'public/'
},
{
src: 'src/manifest.json',
dest: 'public/'
},
{
src: 'src/images/*',
dest: 'public/images/'
}
]
}),
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
// cache files
workbox({
mode: 'injectManifest',
options: {
swSrc: 'src/sw.js',
swDest: 'public/sw.js',
globDirectory: 'public',
globPatterns: [
'**/*.{html,json,js,css,png,map}',
'./manifest.json',
'./images/**',
'./bs4.4.1.css',
'./index.html'
]
}
}),
!production && serve(),
!production && livereload('public'),
production && terser()
],
watch: {
clearScreen: false
}
};
By default, the rollup-plugin-copy plugin will trigger on rollup's buildEnd hook.
Setting the hook to writeBundle fixed this issue for me, like so:
copy({
targets: [
{
src: ...,
dest: ...
},
...
],
hook: "writeBundle",
}),
I decided to take a different approach since I realized the build process needed to complete before I tried to replace '__cVersion__' in the files. After some trial and error I settled on this code:
https://github.com/kuhlaid/svelte2/releases/tag/v0.1.7
If you search the source code for '__cVersion__' you will see where I am adding the file revision string to try and force a file cache update...however, that didn't fully fix the issue.
I then looked at the service worker (sw.js) and realized the Workbox 'injectManifest' was actually handling the file revisions. The only problem with my current setup was that I had added '__cVersion__' constants to my scripts, but Workbox never saw the replacements since Workbox processed the service worker before I replaced the constants.
What I probably need to do is copy the src files to a 'staging directory' where I can replace the 'cache' constants in the scripts and then run the build rollup off of the staging files. This 'should' cause Workbox to treat the files as updated and thus assign them different revision numbers in the service worker file. I will try and update this thread when I have that issue worked out.
I use Webpack 4 in a project where I only need to compile and bundle styles so far. There's no Javascript.
Here's the config I have:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
'css/bundle': path.resolve(__dirname, 'static/scss/index.scss'),
},
output: {
path: path.resolve(__dirname, 'static'),
},
module: {
rules: [
{
test: /\.s[ac]ss$/,
include: path.resolve(__dirname, 'static/scss'),
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},
plugins: [
new MiniCssExtractPlugin(),
],
};
The problem is that it outputs two files: bundle.css and bundle.js. Is there a way to configure Webpack so that it doesn't output the Javascript bundle? I tried to navigate the docs, tried a dozen different things, but it didn't really work.
One important note here is that if I remove the css-loader, bundling fails. So while css-loader is most likely responsible for outputting the bundle.js file, I'm not entirely sure how to avoid using it.
webpack-extraneous-file-cleanup-plugin has no effect with webpack 4.12.0.
I can suggest to remove bundle.js manually with on-build-webpack plugin:
var WebpackOnBuildPlugin = require('on-build-webpack');
// ...
plugins: [
// ...
new WebpackOnBuildPlugin(function () {
fs.unlinkSync(path.join('path/to/build', 'bundle.js'));
}),
],
March 2021:
In Webpack 5, on-build-webpack plugin did not work for me.
I found this:
Webpack Shell Plugin Next
The project I’m working on we’re using Webpack 5 as a build tool for a CSS pattern library. Therefore, we didn’t need the main.js in our dist.
Run npm i -D webpack-shell-plugin-next
Then in webpack.config.ts (just showing the pertinent parts):
import WebpackShellPluginNext from "webpack-shell-plugin-next";
module.exports = {
output: {
path: path.resolve(__dirname, "static/dist")
},
plugins: [
// Run commands before or after webpack 5 builds:
new WebpackShellPluginNext({
onBuildEnd: {
scripts: [
() => {
fs.unlinkSync(path.join(config.output.path, "main.js"));
}
]
}
})
]
};
export default config;
Unfortunately, this is just the way that webpack currently works. However, we are not alone in this problem! There's a plugin to cleanup any unwanted files:
install the plugin:
yarn add webpack-extraneous-file-cleanup-plugin -D
and then in your config:
const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin');
plugins: [
new ExtraneousFileCleanupPlugin({
extensions: ['.js'],
minBytes: 1024,
paths: ['./static']
}),
]
I simply delete the unneeded output with rm in package.json:
"scripts": {
"build": "npm run clean && webpack -p && rm ./dist/unneeded.js"
},
The webpack-remove-empty-scripts plugin, compatible with webpack 5, cover the current issue. It remove unexpected empty js file.
I am working on an angularjs-rails app, I want to load some javascript only on specific paths, for that reason I want to install ocLazyLoad.
I have succesfuly installed the module but when I am trying to load a js file I get a 404.
when('/mypath', {
templateUrl: 'mc/templates/mypath.html',
controller: 'MyPathController',
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'mypath',
files: [
'javascript/mypath.js'
]
}]);
}]
}
})
I am using Grunt + browserSync + grunt-php. The server starts normally. The problem is that whenever I make changes to PHP files, the changes are not reloaded automatically in browser. I have to manually reload the page despite having the settings in place. Been trying to solve this issue for the past 1 week, but no success. Tried out other online sources, but didn't help either. Please help.
Directory structure:
my_app/
src/
index.php
about.php
dist/
Gruntfile.js:
"use strict";
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
php: {
files: ['src/**/*.php']
}
},
browserSync: {
dev: {
bsFiles: {
src: 'src/**/*.php'
},
options: {
proxy: '127.0.0.1:8010', //our PHP server
port: 8080, // our new port
open: true,
watchTask: true
}
}
},
php: {
dev: {
options: {
port: 8010,
base: 'src'
}
}
}
});
grunt.registerTask('default', [
'php', // Using the PHP instance as a proxy
'browserSync',
'watch' // Any other watch tasks you want to run
]);
};
A kind soul helped me with the answer. I don't take credit for the answer and would like to share the solution so that it may help someone in need. Here it is:
1) Just make sure that you have the body tag in the PHP file that you want to reload.
2) Include the following JS code in the page:
<script id="__bs_script__">
//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.17.5'><\/script>".replace("HOST", location.hostname));
//]]>
</script>
With ASP.NET 5, I am moving from ASP.NET MVC's bundling system to a Bower/Grunt workflow for my client-side package management and bundling/minification. I'm trying to figure out how to closely replicate the MVC bundling functionality.
With MVC bundling, I manually created all of my bundles and then call out to a helper method such as: #Styles.Render("~/bundles/styles/site"). In development I get separate link element for each CSS file in the bundle and in production I get a single combined and minified CSS file.
I have successfully set up Grunt with Bower to pull down packages and copy them into the appropriate final destination, but there's no differentiation between development and production. What's the closest functionality to my existing MVC bundling workflow?
This article below explain a very nice way to have both (Bower and .NET Bundle Config) playing nicely together...
http://robertnoack.com/x86/2014/07/asp-net-mvc-using-bowergruntwiredep-to-inject-javascript-dependencies-into-bundleconfig-cs/
The key info, is to use a Grunt Task (wiredep) to target the BundleConfig.cs file so you could still use bower to manage your dependencies and still use BundleConfig to let .NET minify your stuff for you.
After a day of pain, I have got grunt basically behaving in the same manner as asp.net minification with debug & release builds.
I have put together a git repo so you can just pull all the relevant files and mod as required.
https://github.com/glaidler/grunt-equivalent-asp.net-minification
You can use the grunt contrib css min task to create a bundle of your css
Read this post : http://love2dev.com/#!article/Using-GruntJS-to-Bundle-and-Minify-JavaScript-and-CSS
I'm a pretty big fan of the way Yeoman handles assets in the angular generator. It uses wiredep to automatically include Bower packages in your index.html. Usemin is used to group files you want in bundles and Filerev updates the asset locations and adds a cache breaker. Here is the a sample of some of the Grunt settings I have.
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
exclude: ['bootstrap.css'],
fileTypes: {
html: {
replace: {
js: '<script src="/{{filePath}}"></script>',
css: '<link rel="stylesheet" href="/{{filePath}}" />'
}
}
},
ignorePath: /\.\.\//
}
},
// Renames files for browser caching purposes
filerev: {
dist: {
src: [
'<%= yeoman.dist %>/scripts/{,*/}*.js',
'<%= yeoman.dist %>/styles/{,*/}*.css',
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/styles/fonts/*'
]
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
},
// Performs rewrites based on filerev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/**/*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'],
patterns: {
js: [
[/templateUrl:"(templates[/A-Za-z0-9]*\.html)"/]
]
}
}
},
The relevant npm packages are grunt-wiredep, grunt-filerev, and grunt-usemin
You will need to add a grunt build process after MSBuild that takes the files in your bin folder and runs these grunt tasks on them.