I have the following grunt file:
module.exports = function(grunt) {
grunt.initConfig({
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
files: {
'css/output.css': ['css/one.css', 'css/two.css']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin']);
};
just started using grunt.js today and just had a look at the documentation and the examples , i am using the following plugin:
CSS-CONTRIB-MIN
Now, My files get minifined into one , but what i really want is for them to only be combined into one and not minified. how do i achieve that ?
You should use the grunt-contrib-concat plugin for this task. Take a closer look at the GitHub documentation on how to configure the task (e.g. separator, banner, ...)
grunt.initConfig({
concat: {
dist: {
src: ['css/one.css', 'css/two.css'],
dest: 'css/output.css',
},
},
});
Related
edit for clarity
old question: grunt watch task leading zeros in minified css for some styles truncated
new diagnosis: There are several people that push to the same repository and I have observed a different behavior to minified files with the same setup of grunt watch.
end edit
In my repo I have multiple stylesheets. I use grunt to watch for scss changes and only modify the correlating CSS file. I've had a problem lately where grunt will see a modified file in older, non modified CSS files.
Here's the problem:
I pull from master.
I run grunt in the command line.
I make no changes to a scss file but save the file anyway.
I stop grunt and git status.
Git sees four modifications in the minified CSS files.
I save the changes commit and push to a branch.
When I git diff I can see that grunt has removed some of the leading zeros in front of decimal points for opacity.
Here is a screenshot of the diff.
If I commit and push these modifications to my branch I can go about making other changes and only modifying the correlating CSS minified files. But after merging these changes to master and then pulling from master again, when I run grunt locally I will see these same four "ghost" modifications with the same zero's being removed in the minified file. I've tried changing my version of node, sass, and grunt but all different versions have the same result!
Has anyone else experienced this or know how to stop grunt from making these changes and bloating the repo with excessive recompiling and commits?
Version of node: 5.1.0
Version of sass: 3.4.19
Version of grunt 0.4.5
Version of grunt cli: 0.1.13
I just recently updated my version of node from 0.10.33 to 5.1.0
And here is my gruntfile:
module.exports = function(grunt) {
require('time-grunt')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// set notifications that run after other tasks
notify: {
uglify: {
options: {
title: 'Task Complete',
message: 'Uglify finished running',
}
},
sass: {
options: {
title: 'Task Complete',
message: 'Sass finished running',
}
}
},
// concat and minify js task
uglify: {
site: {
files: {
'assets/four/js/site.js': [
'assets/four/js/src/plugins/*.js',
'assets/four/js/src/global.js',
'assets/four/js/src/data/*.js',
'assets/four/js/src/forms/*.js',
'assets/four/js/src/modules/*.js',
'assets/four/js/src/pages/*.js'
],
'assets/four/js/analytics.min.js': ['assets/four/js/src/analytics.js'],
'assets/four/js/social.js': ['assets/four/js/src/social.js']
}
},
pages: {
files: grunt.file.expandMapping(['assets/js/pages/**/*.js', '!assets/js/pages/**/*.min.js'], 'assets/js/pages', {
rename: function(destBase, destPath) {
return destPath.replace('pageassets/js/pages', destBase).replace('.js', '.min.js');
}
})
}
},
//concat and minify scss -> css task
sass: {
options: {
sourceMap: true,
outputStyle: 'compressed'
},
dist: {
files: {
'assets/css/style.css': 'assets/css/scss/style.scss',
'assets/css/old.css': 'assets/css/scss/old.scss',
'assets/css/pages/brand.css': 'assets/css/pages/scss/brand.scss',
'assets/css/pages/custom-design-showcase.css': 'assets/css/pages/scss/custom-design-showcase.scss',
'assets/css/landings.css': 'assets/css/scss/landings.scss',
// 4.0
'assets/four/css/site.css': 'assets/four/css/scss/site.scss',
'assets/four/css/ie.css': 'assets/four/css/scss/ie.scss',
'assets/four/css/interim.css': 'assets/four/css/scss/interim.scss'
}
}
},
// compress images losslessly task
imagemin: {
dynamic: {
options: {
optimizationLevel: 3,
progressive: true,
svgoPlugins: [{removeUselessStrokeAndFill: false}]
},
files: [{
expand: true,
cwd: 'assets/four/img',
src: ['**/*.{png,jpg,gif,svg}'],
dest: 'assets/four/img'
}]
}
},
// watch for changes in repo and run tasks automatically
watch: {
options: {
// Google Extension: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en
livereload: true
},
html: {
files: ['templates/default_site/**/*.html']
},
js: {
files: [
'assets/js/*.js',
'assets/four/js/src/global.js',
'assets/four/js/src/plugins/*.js',
'assets/four/js/src/data/*.js',
'assets/four/js/src/forms/*.js',
'assets/four/js/src/pages/*.js',
'assets/four/js/src/modules/*.js',
//dont
'!assets/four/js/*.min.js',
'!assets/four/js/*.js',
'!assets/js/*.min.js',
'assets/js/pages/**/*.js',
'!assets/js/pages/**/*.min.js',
'assets/js/geo/**/*.js',
'!assets/js/geo/**/*.min.js'
],
tasks: ['uglify', 'notify:uglify']
},
sass: {
options: {
livereload: true
},
files: ['assets/css/scss/*.scss', 'assets/four/css/scss/*.scss', 'assets/four/css/scss/pages/*.scss', 'assets/four/css/scss/modules/*.scss', 'assets/css/scss/modules/*.scss', 'assets/css/pages/scss/*.scss'],
tasks: ['sass:dist', 'notify:sass']
},
css: {
files: ['assets/css/*.css', 'assets/four/css/*.css', 'assets/css/pages/*.css']
}
},
});
//load plugins
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-notify');
// to run watch task, enter 'grunt' command line in project DIR
grunt.registerTask('default', ['watch']);
};
I'm working on a Node.js website and I'm using Grunt to concat and minify my CSS and JS files. However, after running the grunt command I'm getting the error message:
fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!
Here's my grunt file:
/*global module */
module.exports = function (grunt) {
"use strict";
grunt.initConfig({
// read in the project settings from the package.json file into the pkg property
pkg: grunt.file.readJSON("package.json"),
// Install only the bower packages that we need
bower: {
install: {
options: {
"targetDir": "./public/lib",
"copy": true,
"cleanup": true,
"install": true
}
}
},
concat: {
css: {
src: ["public/lib/css/**/*.css", "public/css/cts.css"],
dest: "public/lib/dist/main.css"
},
js: {
src: ["public/lib/**/jquery.js", "public/lib/**/*.js", "public/js/cts.js"],
dest: "public/lib/dist/main.js"
}
},
cssmin: {
target: {
files: {
"public/lib/dist/main.min.css": "public/lib/dist/main.css"
}
}
},
uglify : {
js: {
files: {
"public/lib/dist/main.min.js": "public/lib/dist/main.js"
}
}
},
copy: {
files: {
expand: true,
flatten: true,
src: ["public/lib/fonts/**/*"],
dest: "public/lib/fonts/",
filter: "isFile"
}
}
});
// Add all plugins that your project needs here
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
// this would be run by typing "grunt test" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("test", []);
// define the default task that can be run just by typing "grunt" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("default", [ "bower", "concat", "cssmin", "uglify", "copy"]);
grunt.registerInitTask("install", ["bower"]);
};
If anything I would have thought jQuery would be the one that's getting concatenated multiple times but it's not. Any suggestions what I might be doing wrong?
EDIT: Here's my upgraded grunt file with all 3rd party libraries listed in the concat.src.
/// <binding BeforeBuild='default' />
/*global module */
module.exports = function (grunt) {
"use strict";
grunt.initConfig({
// read in the project settings from the package.json file into the pkg property
pkg: grunt.file.readJSON("package.json"),
// Install only the bower packages that we need
bower: {
install: {
options: {
"targetDir": "./public/lib",
"copy": true,
"cleanup": true,
"install": true
}
}
},
concat: {
css: {
src: ["public/lib/css/**/*.css", "public/css/cts.css"],
dest: "public/lib/dist/main.css"
},
js: {
src: [
"public/lib/js/jquery/jquery.js",
"public/lib/js/bootstrap/bootstrap.js",
"public/lib/js/fullpage.js/jquery.fullpage.js",
"public/lib/js/jquery-easing-original/jquery.easing.js",
"public/lib/js/slimscroll/jquery.slimscroll.js",
"public/lib/js/wow/wow.js",
"public/js/cts.js"
],
dest: "public/lib/dist/main.js"
}
},
cssmin: {
target: {
files: {
"public/lib/dist/main.min.css": "public/lib/dist/main.css"
}
}
},
uglify : {
js: {
files: {
"public/lib/dist/main.min.js": "public/lib/dist/main.js"
}
}
},
copy: {
files: {
expand: true,
flatten: true,
src: ["public/lib/fonts/**/*"],
dest: "public/lib/fonts/",
filter: "isFile"
}
}
});
// Add all plugins that your project needs here
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
// this would be run by typing "grunt test" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("test", []);
// define the default task that can be run just by typing "grunt" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("default", [ "bower", "concat", "cssmin", "uglify", "copy"]);
grunt.registerTask("combine", [ "concat", "cssmin", "uglify", "copy"]);
grunt.registerInitTask("install", ["bower"]);
};
Your issue seems to be in concate.js.src
src: ["public/lib/**/jquery.js", "public/lib/**/*.js", "public/js/cts.js"]
This will have your files added multiple times as there might some files common among the paths mentioned in src.
You should probably move all your vendor files like jquery out of the public directory and put in a different one, say vendor.
Your src should then look something like
src: ["vendor/**/*.js", "public/**/*.js"]
As you see now there are no common files among these two paths.
Also its a good practice to always have 3rd party code outside your app directory as a sibling folder and not inside it.
EDIT:
Ah! I see whats your problem. You want to have jquery first among the other vendor files.
public/lib/**/jquery.js and public/lib/**/*.js together might be causing files added twice.
Try this
src: ["public/lib/jquery/jquery.js", "public/lib/**/*.js", "!public/lib/jquery/jquery.js", public/js/cts.js"]
Put the full path of jquery first public/lib/jquery/jquery.js and then the !public/lib/jquery/jquery.js should prevent jquery being added again as part of public/lib/**/*.js
Got the above pattern from here http://gruntjs.com/configuring-tasks#globbing-patterns
If this still doesn't work, then another option is to add all paths in the src array individually. If you have a requirejs config just copy the paths from there, as jquery might not be the only dependency issue you face in future.
So i am trying to set up my first grunt application, but i am struggling with the watch task.
When I run the task watch looks like it is working when i change my sass files, but the css files are not updated, so it looks like it is not compiling.
I am wondering if i need to install something else, for me this is all new... and i am not sure if I understand, because it looks very simple but I just cant make it work.
So here is my code
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
watch:{
sass:{
options: {
livereload: true
},
files:['sass/**/*.scss'],
task:['sass']
},
css: {
files: ['css/*.css'],
tasks: []
}
},
sass: {
dist: {
files: [{
expand: true,
cwd: 'sass',
src: ['*.scss', '*.sass'],
dest: 'css/',
ext: '.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
I think you want your livereload to be on the css files instead of scss. As it is the compiled file that you want to be reloaded and not the preprocessed (scss) file.
Example
watch:{
sass:{
files:['sass/**/*.scss'],
task:['sass']
},
css: {
options: {
livereload: true
},
files: ['css/*.css']
}
}
OWWWWW....
I just found the problem... it should have been "tasks" not "task", i wasted sooo much time, on finding this little thingy!
Goal
My goal is to concatenate all my css,js files and minify all of them.
I can minify my concat.js, but I'm struggling trying to minify my concat.css.
Gruntfile.js
module.exports = function(grunt) {
"use strict";
grunt.initConfig({
concat: {
js: {
src: [
'js/bootstrap.min.js',
'js/jquery-1.10.2.min.js',
'js/jquery.easypiechart.min.js',
'js/jquery.isotope.min.js',
'js/jquery.magnific-popup.min.js',
'js/waypoints.min.js',
'js/respond.min.js',
'js/jquery.vegas.min.js',
'js/modernizr-2.6.2.min.js',
'js/jquery.nav.js',
'js/html5shiv.js',
'js/jquery.scrollTo.js',
'js/jquery.sticky.js',
'js/jquery.validate.js',
'js/main.js',
],
dest: 'dist/concat.js'
},
css: {
src: [
'css/magnific-popup.css',
'css/main.css',
'css/xl.css',
'css/lg.css',
'css/md.css',
'css/sm.css',
'css/xs.css',
'css/print.css',
'css/bootstrap.min.css',
'css/font-awesome.min.css',
],
dest: 'dist/concat.css'
}
},
watch: {
js: {
files: ['js/*.js'],
task: ['concat:js']
},
css: {
files: ['css/*.css'],
task: ['concat:css']
}
},
uglify: {
js: {
files: {
'dist/minified.js': ['dist/concat.js']
}
},
css: {
files: {
'dist/minified.css': ['dist/concat.css']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['concat', 'uglify']);
};
Result
I concatenate all my css and js files succesfully, and they're generated at :
dist/concat.js
dist/concat.css
Then, I can also minify my concat.js with no problem, but I'm struggling trying to minify my concat.css.
I kept getting this error in the bottom of my Terminal :
Running "uglify:css" (uglify) task
{ message: 'Unexpected token: punc (.)',
filename: 'concat.css',
line: 4,
and line4 is just the beginning of my class : .mfp-bg {
Can someone please give me a little push here ?
Also, should I perform minify after concatenation or the other way around ?
Is there a better way to do this ?
uglify is for minimising JavaScript only, not CSS.
If you want to minimise CSS you can use the cssmin task for Grunt instead.
I have a grunt task that calls other grunt tasks. I want to call a subtask with programmatically determined arguments. Is this possible? I spent some time digging around the lib/grunt.js and lib/grunt/task.js, but couldn't figure it out.
I'm using grunt-compass with the following arguments specified in Gruntfile.js:
compass: {
default_options: {
src: 'components/201',
dest: 'build',
require: ['zurb-foundation']
}
}
I want to be able to override them at runtime:
tasks/my-task.js:
// simplified example
module.exports = function(grunt) {
grunt.registerTask('foo', 'bar', function() {
var chooseDest = doWork();
grunt.task.run('compass', {src: 'src', dest: chooseDest});
});
};
For reference:
$ grunt --version
grunt-cli v0.1.6
grunt v0.4.0rc6
I figured it out. Use the <%= %> syntax in Gruntfile.js:
compass: {
default_options: {
src: 'components/<%= myTask.src %>',
dest: 'build',
require: ['zurb-foundation']
}
}
Then you can set it in your task:
grunt.config.set('myTask.src', getSrc());
You can edit all the Grunt config:
grunt.config('compass.default_options.src', 'blabla');
Just before run the task. But your solution is "cleaner".