The uglify task takes too long to complete, it is difficult while development, How can I disable the task without removing from grunt.registerTask, because other tasks are also calling uglify
uglify: {
compile: {
options: {
banner: '<%= meta.text%>'
},
files: {
'<%= assets %>': '<%= concat.assets%>'
}
}
},
this is how I solved the issue
uglify: {
compile: {
options: {
banner: '<%= meta.text%>'
},
files: {
// commented this line to stop uglify task
// '<%= assets %>': '<%= concat.assets%>'
}
}
},
Related
Up until recently I've been using a similar gruntfile to this with success. However in my latest project grunt watch is looping continually - sometimes 4 times, sometimes 15 times or so before stopping - I can't figure out how to change the gruntfile to get it working properly again.
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Define our source and build folders
js_path: 'public_html/js',
img_path: 'public_html/img',
css_path: 'public_html/css',
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: '<%= img_path %>/',
src: ['*.{png,jpg,gif}'],
dest: '<%= img_path %>/'
}]
}
},
concat: {
dist: {
src: [
'<%= js_path %>/jquery-ui.js',
'<%= js_path %>/plugin_royal_slider.js',
'<%= js_path %>/plugins.js',
'<%= js_path %>/plugin_selectboxit.js',
'<%= js_path %>/plugin_picturefill.js',
'<%= js_path %>/plugin_jquery_placeholder.js',
'<%= js_path %>/plugin_pickadate.js',
'<%= js_path %>/script.js'
],
dest: '<%= js_path %>/output.js',
nonull: true
}
},
jshint: {
beforeconcat: [
'<%= js_path %>/jquery-ui.js',
'<%= js_path %>/plugin_royal_slider.js',
'<%= js_path %>/plugins.js',
'<%= js_path %>/plugin_selectboxit.js',
'<%= js_path %>/plugin_picturefill.js',
'<%= js_path %>/plugin_jquery_placeholder.js',
'<%= js_path %>/plugin_pickadate.js',
'<%= js_path %>/script.js'],
afterconcat: ['<%= js_path %>/output.js'
],
options: {
sub: true,
"-W004": true,
"-W041": true,
"-W093": true,
"-W032": true,
"-W099": true,
"-W033": true,
"-W030": true,
ignores: ['<%= js_path %>/jquery-ui.js']
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy H:M:s") %> */\n',
mangle: true,
compress: {drop_console: true} // true supresses console.log output: https://github.com/gruntjs/grunt-contrib-uglify#turn-off-console-warnings
},
dist: {
files: {
'<%= js_path %>/js.min.js': ['<%= js_path %>/output.js']
}
}
},
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')({browsers: 'last 2 versions'}),
require('csswring')
]
},
dist: {
src: '<%= css_path %>/*.css'
}
},
watch: {
options: {nospawn: true},
scripts: {
files: ['<%= js_path %>/*.js'],
tasks: ['build']
},
css: {
files: ['<%= css_path %>/*.css'],
tasks: ['build']
},
grunt: {
files: ['Gruntfile.js']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('build', ['jshint', 'concat', 'uglify', 'postcss']); // run manually with grunt build or run grunt watch - ctrl c to exit
grunt.registerTask('optimg', ['imagemin']); // run with grunt optimg
grunt.event.on('watch', function (action, filepath) {
grunt.log.writeln(filepath + ' has ' + action);
});
};
Current dependencies:
"grunt": "~0.4.5",
"grunt-contrib-concat": "~0.5.1",
"grunt-contrib-imagemin": "~0.9.4",
"grunt-contrib-jshint": "~0.11.2",
"grunt-contrib-uglify": "~0.9.1",
"grunt-contrib-watch": "~0.6.1",
"grunt-postcss": "~0.6.0",
"csswring": "~4.0.0",
"autoprefixer-core": "~6.0.1",
"autoprefixer": "~6.0.3"
your issue is that concat generates its file into your js_path directory, and watch monitors all js files in that directory. So what happens is:
you modify a js source file
watch detects your modification and launches concat
concat generates output.js
watch detects output.js and launches concat
3 then 4 repeat - until you're saved by watch buffering (which prevents triggering too quickly in sequence)
To solve it, you have to remove the concat output from the watchlist.
What I recommend is to have concat output to a build directory outside your sources - it's best practice to separate build artefacts from source elements anyway. Define a build_path config variable and use it in your concat target.
If you really can't do that for a good reason, manually remove output.js from the watch with a negative directive (http://gruntjs.com/configuring-tasks#globbing-patterns):
watch: {
scripts: {
files: ['<%= js_path %>/*.js', '!<%= js_path %>/output.js'],
tasks: ['build']
},
}
Moving the postcss to a separate task has solved the problem for me.
Here are the changes to the gruntfile:
watch: {
options: {nospawn: true},
scripts: {
files: ['<%= js_path %>/*.js'],
tasks: ['build_js']
},
css: {
files: ['<%= css_path %>/*.css'],
tasks: ['build:css']
},
grunt: {
files: ['Gruntfile.js']
}
and
grunt.registerTask('build_js', ['jshint', 'concat', 'uglify']);
grunt.registerTask('build_css', ['postcss:dist']);
I have 2 sass targets.
one creates debug info, the other does not.
If I don't copy/paste the files section between the targets, it doesn't seem to work.
sass: {
server: {
options: {
debugInfo: true
},
files: {
'.tmp/styles/main.css': '<%= yeoman.app %>/styles/main.scss'
}
},
dist: {
files: {
'.tmp/styles/main.css': '<%= yeoman.app %>/styles/main.scss'
}
}
},
How can I reuse the files decleration?
From a grunt-sass point of view, you can't share the file declaration between multiple targets.
But to avoid duplication in your Gruntfile, you can always use plain old Javascript variables:
var cssFiles = {
'.tmp/styles/main.css': '<%= yeoman.app %>/styles/main.scss'
}
// ...
grunt.initConfig({
// ...
sass: {
server: {
options: {debugInfo: true},
files: cssFiles
},
dist: {
files: cssFiles
}
},
// ...
});
I am using grunt-contrib-less to compile my .less files in to a single CSS stylesheet. Everything is working, except the source map, which I cannot get to work under any circumstances!
Here is my Gruntfile:
'use strict';
module.exports = function(grunt) {
// Force use of Unix newlines
grunt.util.linefeed = '\n';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
project: {
// Add entries to this array to create variables for use by Grunt
app: ['app'],
server: 'http://mysite.app',
// Components
bower: ['<%= project.app %>/bower_components'],
bootstrap: ['<%= project.bower %>/bootstrap'],
// Custom Assets
assets: ['<%= project.app %>/assets'],
css: ['<%= project.assets %>/css'],
less: ['<%= project.assets %>/less'],
js: ['<%= project.assets %>/js']
},
less: {
production: {
options: {
ieCompat: true,
sourceMap: true,
sourceMapFilename: '<%= project.css %>/style.css.map',
sourceMapURL: '<%= project.server %>/assets/css/style.css.map',
sourceMapBasepath: 'app',
sourceMapRootpath: '<%= project.server %>'
},
files: {
'<%= project.css %>/style.css': '<%= project.less %>/style.less'
}
}
},
autoprefixer: {
dist: {
files: {
'<%= project.assets %>/css/style.css': '<%= project.assets %>/css/style.css'
}
}
},
concat: {
options: {
separator: ';\n',
sourceMap: true
},
plugins_head: {
// Add further Javascript plugins to this array and they will be
// concatenated in to the plugins-built-head.js file
src: [
'<%= project.bower %>/modernizr/modernizr.js'
],
dest: '<%= project.js %>/built/plugins-built-head.js'
},
plugins: {
// Add further Javascript plugins to this array and they will be
// concatenated in to the plugins-built.js file
src: [
'<%= project.bootstrap %>/js/dropdown.js'
],
dest: '<%= project.js %>/built/plugins-built.js'
},
custom: {
// Add further custom-written javascript files to this array and
// they will be concatenated in to the scripts-built.js file
src: [
'<%= project.js %>/scripts.js'
],
dest: '<%= project.js %>/built/scripts-built.js'
}
},
watch: {
css: {
files: [
'<%= project.bootstrap %>/less/*.less',
'<%= project.less %>/*.less'
],
tasks: [
'less',
'autoprefixer'
],
options: {
livereload: true
}
},
js: {
files: [
'<%= project.js %>/scripts.js'
],
tasks: ['concat']
},
html: {
files: [
'<%= project.app %>/*.html'
],
options: {
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-run-grunt');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default', [
'watch'
]);
};
What's happening is that Grunt is writing a proper and correct style.css.map file, but it's not writing the following line to the end of the compiled style.css file:
/*# sourceMappingURL=http://mysite.app/assets/css/style.css.map */
That's the one line that's missing. Everything else is getting compiled and written correctly. If I manually add that line to the end of the compiled CSS, Chrome picks up on the source map properly, but it's not being written in.
Additionally, trying options like sourceMapFileInline seems to make no difference - the file is never written inline.
Any ideas?
Hopefully you have found a solution by now. This is for other people with the same issue:
Make sure the soourcemap will be placed in the same folder as css.
Set sourceMapUrl to only the name of the map file.
This will add the following line to your .css file: /*# sourceMappingURL=default.css.map */
Here are the sourcemap settings in my grunt file:
sourceMap: true,
sourceMapFilename: "src/assets/css/default.css.map",
sourceMapURL: "default.css.map"
I'm trying to configure a grunt file that can run multiple tasks on multiple "themes". Since i'm new to this whole grunt thing, i'm having some problems with the configuration.
My example below is just a start, but essentially I'd like to have some global configs, and then nest specific "theme" configurations within a named "target". I'm not fully up to speed on syntax, so that could be the issue, but when I run grunt powerful I get the error Warning: Required config property "watch" missing? I feel that the configs are ok, but the problem lies with my registerMultiTask. Any ideas?
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Metadata.
pkg: grunt.file.readJSON('package.json'),
banner: '/*!\n' +
'* Microsites v<%= pkg.version %>\n' +
'* Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
'*/\n' +
'/* #package: <%= pkg.name %> */\n',
jqueryCheck: 'if (!jQuery) { throw new Error(\"<%= pkg.name %> requires jQuery\") }\n\n',
basePath: '../../www/wp-content/themes',
powerful: {
name: 'Powerful Theme',
path: '<%= basePath %>/powerful',
less: {
development: {
options: {
dumpLineNumbers: true
},
files: {
'<%= powerful.path %>/static/css/project.css': '<%= powerful.path %>/static/css/less/project.less',
'<%= powerful.path %>/static/css/editor.css': '<%= powerful.path %>/static/css/less/editor.less',
'<%= powerful.path %>/static/css/login.css': '<%= powerful.path %>/static/css/less/login.less'
}
},
production: {
options: {
yuicompress: true
},
files: {
'<%= powerful.path %>/static/css/project.css': '<%= powerful.path %>/static/css/less/project.less',
'<%= powerful.path %>/static/css/editor.css': '<%= powerful.path %>/static/css/less/editor.less',
'<%= powerful.path %>/static/css/login.css': '<%= powerful.path %>/static/css/less/login.less'
}
},
ie: {
options: {
yuicompress: true
},
files: {
'<%= powerful.path %>/static/css/ie.css': '<%= powerful.path %>/static/css/less/ie.less'
}
}
},
watch: {
less: {
files: ['<%= powerful.path %>/static/css/less/*.less'],
tasks: ['less:development']
}
}
}, // end: powerful
});
// load the plugin
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
// load tasks
//grunt.registerTask('default', ['less']);
grunt.registerMultiTask('powerful', 'do things', function(){
grunt.task.run(['watch']);
});
};
Tasks should go on the first level of your config, not within another task config. Also your powerful task isnt a multitask so it doesnt even need a config block. Just configure the tasks the standard way:
grunt.initConfig({
less: {
/* config here */
},
watch: {
/* config here */
}
});
I'm just learning Grunt. I'm going to use compass for vertical rhythm and image sprite generation and autoprefixer for prefixing css3 styles.
Here's my Gruntfile.js.
module.exports = function(grunt) {
var globalConfig = {
sassDir: 'sass',
cssDir: 'css'
};
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// Project configuration.
grunt.initConfig({
globalConfig: globalConfig,
pkg: grunt.file.readJSON('package.json'),
compass: {
dev: {
options: {
sassDir: '<%= globalConfig.sassDir %>',
cssDir: '<%= globalConfig.cssDir %>'
}
}
},
autoprefixer: {
dev: {
options: {
browsers: ['last 2 versions']
},
src: '<%= globalConfig.cssDir %>/style.css',
dest: '<%= globalConfig.cssDir %>/style.css'
}
},
watch: {
compass: {
files: ['<%= globalConfig.sassDir %>/**/*.scss'],
tasks: ['compass:dev'],
},
autoprefixer: {
files: ['<%= globalConfig.cssDir %>/style.css'],
tasks: ['autoprefixer:dev']
},
livereload: {
options: { livereload: true },
files: ['<%= globalConfig.cssDir %>/style.css']
}
}
});
// Default task(s) that will be run by invoking 'grunt' w/o args
grunt.registerTask('styles:dev', ['compass', 'autoprefixer']);
grunt.registerTask('default', ['styles:dev', 'watch']);
};
But whenever i run
grunt
Everything works as expected except that grunt-contrib-watch calls grunt-autoprefixer endlessly.
I'm just beginning to learn Grunt. It's probably a wrong configuration on my Gruntfile.js
I hope you could help me out here.
Change your task configuration to:
watch: {
compass: {
files: ['<%= globalConfig.sassDir %>/**/*.scss'],
tasks: ['compass:dev', 'autoprefixer:dev']
},
livereload: {
options: { livereload: true },
files: ['<%= globalConfig.cssDir %>/style.css']
}
}
Basically, grunt-contrib-watch will run tasks whenever a file is updated, and because your source and destination files are the same it turns it into an infinite loop. Simply run the autoprefixing once your compass task has built your css. Hope this helps. :-)