I need to change configuration of my uglify task for only minify file as needed (as explained here for the jshint task : https://github.com/gruntjs/grunt-contrib-watch#compiling-files-as-needed)
The modification works well for the jshint task but not for uglify, i think the problem is the property path...
Any help would be appreciated ;)
Here is my Gruntfile.js :
module.exports = function (grunt) {
grunt.initConfig({
// define source files and their destinations
jshint: {
all: ['dev/**/*.js'],
},
uglify: {
dynamic_mappings: {
// Grunt will search for "**/*.js" under "dev/" when the "minify" task
// runs and build the appropriate src-dest file mappings then, so you
// don't need to update the Gruntfile when files are added or removed.
files: [{
expand: true, // Enable dynamic expansion.
cwd: 'dev/', // Src matches are relative to this path.
src: ['**/*.js'], // Actual pattern(s) to match.
dest: 'build', // Destination path prefix.
ext: '.min.js', // Dest filepaths will have this extension.
},
],
}
}
watch: {
options: { spawn: false },
js: { files: 'dev/**/*.js', tasks: [ 'uglify' ] },
}
});
// load plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
// default task
grunt.registerTask('default', [ 'watch' ]);
grunt.event.on('watch', function(action, filepath) {
grunt.config(['jshint', 'all'], filepath);
grunt.config('uglify.dynamic_mappings.files', [{src: filepath }]);
});
};
The line
grunt.config('uglify.dynamic_mappings.files', [{src: filepath }]);
Is completely replacing the original configuration for uglify.dynamic_mappings.files
Instead try including the other original parameters along with the new src: filepath
How to not minify already minified on each "grunt build" in yeoman
uglify: {
onlyScripts: {
files: [{
dest: '<%= yeoman.dist %>/scripts/scripts.js',
src: ['.tmp/concat/scripts/scripts.js']
}]
}
}
Also, now uglify will not copy your vendor.js from temporary folder, so add "vendorJS" section to "copy" task:
copy:
//...
vendorJS: {
expand: true,
cwd: '.tmp/concat/scripts/',
dest: '<%= yeoman.dist %>/scripts/',
src: 'vendor.js'
}
Then, in "build" task, set target of uglify to 'onlyScripts' and copy vendor.js:
grunt.registerTask('build', [
'jshint',
'clean:dist',
//'wiredep',
// ...
'useminPrepare',
//'concurrent:dist',
'autoprefixer',
'concat',
'ngAnnotate',
'copy:dist',
'cssmin',
'uglify:onlyScripts',
'copy:vendorJS',
// ...
]);
http://eugenioz.blogspot.in/2014/08/how-to-not-minify-already-minified-on.html
Related
Trying to use a predefined array inside of a grunt file, thought using this.js_paths would work, but doesn't seem to work as I'm getting the error, "Cannot read property IndexOf of undefined" when it comes to trying to uglify the scripts. How can I link the js_paths variable to the files src property properly instead of copying the array into the files. Would like to define it separately at the top. Is this possible?
module.exports = function(grunt) {
// loadNpmTasks from package.json file for all devDependencies that start with grunt-
require("matchdep").filterDev("grunt-*", './package.json').forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
js_paths: [
'inc/header1/js/*.js',
'!inc/header1/js/*.min.js',
'inc/header2/js/*.js',
'inc/header2/js/*.js',
'!inc/header2/js/*.min.js',
'js/*.js',
'!js/*.min.js'
],
uglify: {
options: {
mangle: true
},
build: {
files: [{
expand: true,
src: this.js_paths,
rename: function(dst, src) {
return src.replace('.js', '.min.js');
}
}]
}
},
watch: {
scripts: {
files: ['inc/header1/js/*.js', 'inc/header2/js/*.js', 'js/*.js'],
tasks: ['uglify'],
options: {
spawn: false,
}
}
}
});
grunt.registerTask('default', ['uglify', 'watch']);
};
Preferrably would like to use the same array js_paths in the watch files (since it's required there), if that makes sense? Still kinda new to using gruntfile.js
Utilize the Templates syntax. It's described in the docs as following:
Templates
Templates specified using <% %> delimiters will be automatically expanded when tasks read them from the config. Templates are expanded recursively until no more remain.
Essentially, change this.js_paths to '<%= js_paths %>' in your uglify task.
For instance:
// ...
uglify: {
options: {
mangle: true
},
build: {
files: [{
expand: true,
src: '<%= js_paths %>', // <-----
rename: function(dst, src) {
return src.replace('.js', '.min.js');
}
}]
}
},
// ...
Likewise for your watch task too.
For instance:
watch: {
scripts: {
files: '<%= js_paths %>', // <-----
tasks: ['uglify'],
options: {
spawn: false,
}
}
}
There are questions ask before but I couldn't get much out of them as I'm new to grunt.Whenever I run code , Console reads as follows
SyntaxError: Invalid or unexpected token
Warning: Task "default" not found. Use --force to continue.
My code is:
'use strict';
module.exports = function (grunt) {
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Automatically load required Grunt tasks
require('jit-grunt')(grunt, {
useminPrepare: 'grunt-usemin'
});
// Define the configuration for all the tasks
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: {
src: [
'Gruntfile.js',
'app/scripts/{,*/}*.js'
]
}
},
useminPrepare: {
html: 'app/menu.htm
},
useminPrepare: {
html: 'app/menu.html',
options: {
dest: 'dist'
}
},
// Concat
concat: {
options: {
separator: ';'
},
// dist configuration is provided by useminPrepare
dist: {}
},
// Uglify
uglify: {
// dist configuration is provided by useminPrepare
dist: {}
},
cssmin: {
dist: {}
},
// Filerev
filerev: {
options: {
encoding: 'utf8',
algorithm: 'md5',
length: 20
},
release: {
// filerev:release hashes(md5) all assets (images, js and css )
// in dist directory
files: [{
src: [
'dist/scripts/*.js',
'dist/styles/*.css',
]
}]
}
},
// Usemin
// Replaces all assets with their revved version in html and css files.
// options.assetDirs contains the directories for finding the assets
// according to their relative paths
usemin: {
html: ['dist/*.html'],
css: ['dist/styles/*.css'],
options: {
assetsDirs: ['dist', 'dist/styles']
}
},
copy: {
dist: {
cwd: 'app',
src: [ '**','!styles/**/*.css','!scripts/**/*.js' ],
dest: 'dist',
expand: true
},
fonts: {
files: [
{
//for bootstrap fonts
expand: true,
dot: true,
cwd: 'bower_components/bootstrap/dist',
src: ['fonts/*.*'],
dest: 'dist'
}, {
//for font-awesome
expand: true,
dot: true,
cwd: 'bower_components/font-awesome',
src: ['fonts/*.*'],
dest: 'dist'
}
]
}
},
clean: {
build: {
src: [ 'dist/']
}
}
});
grunt.registerTask('build', [
'clean',
'jshint',
'useminPrepare',
'concat',
'cssmin',
'uglify',
'copy',
'filerev',
'usemin'
]);
grunt.registerTask('default' , ['build']);
};
the complete output of your grunt call shows that your gruntfile.js has a sytax error:
Loading "gruntfile.js" tasks...ERROR
>> SyntaxError: Invalid or unexpected token Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
and indeed your file has no closing quotes on line 37:
useminPrepare: {
html: 'app/menu.htm <-----!!!!!!!!
},
useminPrepare: {
html: 'app/menu.html',
options: {
dest: 'dist'
}
},
probably a copy paste error since you have the useminPrepare twice (which is illegal in strict mode btw...)
I have installed Grunt, Node and updated npm. I am trying to minify all js files into one single file using "grunt uglify". The above command creating new js files with minified code. I placed all JS files in js and also tried with src folders. Below is my code please help With this, I am new to Grunt:
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
my_target: {
files: [{
expand: true,
cwd: 'src/js',
src: '**/*.js',
dest: 'dest/.min.js'
}]
}
},
cssmin: {
my_target:{
files : [{
expand: true,
cwd: 'css/',
src: ['*.css', '.min.css'],
//src: '*.css',
dest: 'css/',
ext: '.min.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
}
I know it's been a year since the question was asked, but I'd like to contribute anyway for the sake of googling and finding this thread.
To achieve what you're trying to do you should NOT use expand param. Just set src and dest ones. Like this:
module.exports = function(grunt){
grunt.initConfig({
uglify: {
my_target: {
files: [{
src: "js/src/*.js",
dest: "js/main.min.js"
}]
},
},
});
grunt.loadNpmTasks('grunt-contrib-uglify');
};
Hope this helps.
I have a Gruntfile.js set up with Post CSS running autoprefixer, mqpacker, and cssnano at the moment.
I have a default grunt build that will work to build everything for deployment. It includes the call to postcss, like so:
grunt.registerTask('default', ['sass', 'postcss', 'concat', 'uglify', 'browserSync', 'watch']);
The issue is I also want the default grunt build process to be for everyday dev work - one that omits (turns off) the media query compilation and minification from Post CSS.
However, I want to leave autoprefixer on. This wasn't a problem with grunt when autoprefixer ran as a separate program, we just make a new grunt.registerTask
Now that autoprefixer now runs inside of Post CSS, how do we make these different build processes work, without commenting out the individual plugins in CSS (clumsy) and restarting grunt every time we want to do a different build?
My Gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Sass to CSS
sass: {
app: {
files: [{
expand: true,
cwd: 'scss',
src: ['**/*.scss'],
dest: 'css/src',
ext: '.css'
}]
},
options: {
sourceMap: true,
outputStyle: 'expanded',
imagePath: "../"
}
},
// Post CSS (autoprefixer, mqpacker, cssnano)
postcss: {
// Configuration
options: {
map: true,
// Load plugins
processors: [
// Runs Post CSS Autoprefixer
require('autoprefixer')({browsers: ['last 2 versions']}),
// require('postcss-import')(),
require('css-mqpacker')(),
require('cssnano')({
autoprefixer: false,
safe: true,
sourcemap: false
})
]
},
// Operate on compiled Sass, write global.css
dist: {
src: 'css/src/global-sass.css',
dest: 'css/global.min.css'
}
},
// JS Concatenation Plugin
concat: {
dist: {
src: [
'js/libs/*.js', // All JS in the libs folder
'js/src/*.js' // All JS in the src folder
],
dest: 'js/scripts.js'
}
},
// JS Minification
uglify: {
build: {
src: 'js/scripts.js',
dest: 'js/scripts.min.js'
}
},
// Image Minification -- run on demand w/ `grunt imagemin`
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'img/src/',
src: ['**/*.{png,jpg,gif}'],
dest: 'img/'
}]
}
},
// BrowserSync
browserSync: {
dev: {
bsFiles: {
src : [
'css/*.css',
'**/*.{html}'
]
},
options: {
watchTask: true,
server: './'
}
}
},
// Watch
watch: {
sass: {
files: ['scss/{,*/}*.{scss,sass}'],
tasks: ['sass', 'postcss']
},
js: {
files: ['js/src/*.js'],
tasks: ['concat', 'uglify']
},
options: {
livereload: false,
spawn: false
}
},
});
// Loads Grunt Tasks
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
// Default Task
grunt.registerTask('default', ['sass', 'postcss', 'concat', 'uglify', 'browserSync', 'watch']);
};
I would split them into subtasks so that I could call them separately in different registered tasks:
// Post CSS (autoprefixer, mqpacker, cssnano)
postcss: {
prefix: {
options: {
map: true,
// Load plugins
processors: [
require('autoprefixer')({browsers: ['last 2 versions']})
]
}
dist: {
src: 'css/src/global-sass.css',
dest: 'css/global.min.css'
}
},
pack: {
options: {
map: true,
// Load plugins
processors: [
require('css-mqpacker')()
]
}
dist: {
src: 'css/src/global-sass.css',
dest: 'css/global.min.css'
}
},
nano: {
options: {
map: true,
// Load plugins
processors: [
require('cssnano')({
autoprefixer: false,
safe: true,
sourcemap: false
})
]
}
dist: {
src: 'css/src/global-sass.css',
dest: 'css/global.min.css'
}
}
}
and then
grunt.registerTask('default', ['sass', 'postcss:prefix', 'postcss:pack', 'postcss:nano', 'concat', 'uglify', 'browserSync', 'watch']);
or whichever way suits your project.
Hope it helps
I am intending to add a task to sails's (0.10 rc5) grunt build system.
tasks/config/asset-versioning.js
module.exports = function(grunt) {
grunt.config.set('asset-versioning', {
copy: {
src: '.tmp/public/min/production.js',
dest: '.tmp/public/min/production2.js'
}
});
grunt.task.registerTask('asset-versioning', ['copy']);
grunt.loadNpmTasks('grunt-contrib-copy');
};
tasks/register/prod.js
module.exports = function (grunt) {
grunt.registerTask('prod', [
'compileAssets',
'concat',
'uglify',
'cssmin',
'sails-linker:prodJs',
'sails-linker:prodStyles',
'sails-linker:devTpl',
'asset-versioning' // Added the task config here
]);
};
After running sails lift --prod --verbose I am getting following error:
Grunt :: Warning: Task "asset-versioning" not found.
** Grunt :: An error occurred. **
What am I missing?
EDIT
Apparently I am missing to register my task.
Adding grunt.task.registerTask('asset-versioning'); to the first file. I am not getting any error, but my task is not running! Nothing is happening.
Okay, you're having this all mixed up. Copy is a predefined task, you just need to tweak its configs. Go to tasks/config/copy.js and add your custom configuration (in the grunt.config.set call)
productionfiles: {
src: '.tmp/public/min/production.min.js',
dest: '.tmp/public/min/production2.min.js'
}
Then, in the tasks/register/prod.js, make sure you call copy:productionfiles, and it will do the magic.
Copy.js
module.exports = function(grunt) {
grunt.config.set('copy', {
dev: {
files: [{
expand: true,
cwd: './assets',
src: ['**/*.!(coffee|less)'],
dest: '.tmp/public'
}]
},
build: {
files: [{
expand: true,
cwd: '.tmp/public',
src: ['**/*'],
dest: 'www'
}]
},
productionfiles: {
src: '.tmp/public/min/production.min.js',
dest: '.tmp/public/min/production2.min.js'
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
};
Prod.js
module.exports = function (grunt) {
grunt.registerTask('prod', [
'compileAssets',
'concat',
'uglify',
'cssmin',
'sails-linker:prodJs',
'sails-linker:prodStyles',
'sails-linker:devTpl',
'sails-linker:prodJsJade',
'sails-linker:prodStylesJade',
'sails-linker:devTplJade',
'copy:productionfiles'
]);
};