Can Grunt minify multiple files separately, without concatenating them? - javascript

I have a Sailsjs project, and it comes with Grunt built in. Here is what tasks/register/prod.js looks like:
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'
]);
};
and here is my attempt to get Grunt to minify files separately tasks/config/cssmin.js:
module.exports = function(grunt) {
grunt.config.set('cssmin', {
dist: {
src: 'assets/css/test.css',
dest: '.tmp/public/min/test.min.css'
}
});
grunt.config.set('cssmin', {
dist: {
src: 'assets/css/main.css',
dest: '.tmp/public/min/main.min.css'
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
};
This doesn't work correctly, it only gives me main.min.css (minified) but not test.min.css.

"dist" is not a static part of the syntax, it's the name of the target. You can have as many targets as you want, but you can't have two with the same name.
grunt.config.set('cssmin', {
test: {
src: 'assets/css/test.css',
dest: '.tmp/public/min/test.min.css'
},
main: {
src: 'assets/css/main.css',
dest: '.tmp/public/min/main.min.css'
}
});
Running "cssmin" executes both targets, "cssmin:test" runs the first one and "cssmin:main" runs the second.

The second time you set the value for the cssmin task you are overwriting your previous value, thus you are only returned main.min.css.
To minify multiple separate files with cssmin you would only set grunt.config once and it would look like this:
module.exports = function(grunt) {
grunt.config.set('cssmin', {
dist: {
src: 'assets/css/test.css',
dest: '.tmp/public/min/test.min.css'
},
dist2: {
src: 'assets/css/main.css',
dest: '.tmp/public/min/main.min.css'
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
};

Related

How to pass dynamic config to Gruntfile.js

I have written the grunt task to transpile ES6 to ES5. Following is my Gruntfile.js file
module.exports = function (grunt)
{
require("load-grunt-tasks")(grunt);
grunt.initConfig({
"babel": {
options: {
presets: ['es2015']
},
dist: {
files: [{
expand: true,
cwd: '/Users/pankajmeshram/Documents/IVWorkSpace/enfresh/resources/modules',
src: ['**/*.es6'],
dest: '/Users/pankajmeshram/Documents/IVWorkSpace/enfresh/resources/modules',
ext: '.js'
}]
}
}
});
grunt.registerTask("default", ["babel"]);
};
In this file, I want to pass the cwd and dest option dynamically so that I can use this for the different project as well as we have common build for all our projects.
If anyone work on this before, you can suggest some ways or any alternative solution for this task.
module.exports = function(grunt) {
require("load-grunt-tasks")(grunt);
grunt.initConfig({
"babel": {
options: {
presets: ['es2015']
},
dist: {
files: [{
expand: true,
cwd: "<%= cwd %>",
src: ['**/*.es6'],
dest: "<%= dest %>",
ext: '.js'
}]
}
}
});
grunt.registerTask("dynamicConfigs", "Set Dynamic Configs", function (argName, argValue) {
grunt.config.set(argName, argValue);
});
grunt.registerTask("default", ["dynamicConfigs:cwd:/Users/vineethgn/Documents/IVWorkSpace/enfresh/resources/modules", "dynamicConfigs:dest:/Users/vineethgn/Documents/IVWorkSpace/enfresh/resources/modules", "babel"]);
};
You can define those properties as template and then before calling babel task, call the newly created dynamicConfigs task.
Inside dynamicConfigs you are basically setting the key-value pair in grunt.config.
Make sure to call dynamicConfigs task with the parameters you want to set like in the sample code above.

grunt uglify showing error

I am getting the error though all seems to be right in the code. Can someone help?
gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//Setting up some base links
meta: {
basePath: '../'
},
//Reading package.json file
pkg: grunt.file.readJSON('package.json'),
// Concat Configuration
concat: {
options: {
separator: ';'
},
dist: {
src: ['<%= meta.basePath %>scripts/*.js'],
dest: '<%= meta.basePath %>scripts/concated.js'
}
},
// Uglify Configuration
uglify: {
build: {
src: ['<%= meta.basePath %>scripts/concated.js'],
dest: '<%= meta.basePath %>scripts/uglify.js'
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-concat','grunt-contrib-uglify');
// Default task
grunt.registerTask('default', ['concat','uglify']);
};
ERROR
Already seen the links:
grunt uglify task failing
new to grunt - warning: task "concat, uglify" not found
However, "grunt concat" runs fine and provide results. No issues. But this uglify seems to create a lot of pain.
try this excerpt from http://gruntjs.com/configuring-task:
uglify: {
static_mappings: {
// Because these src-dest file mappings are manually specified, every
// time a new file is added or removed, the Gruntfile has to be updated.
files: [
{ src: 'lib/a.js', dest: 'build/a.min.js' },
{ src: 'lib/b.js', dest: 'build/b.min.js' },
{ src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js' },
{ src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js' },
]
}
}

Grunt changing multiple times

I have a grunt file that watches for changes on app.css. The watch appears to be processing the file multiple times upon change of app.css. Checked the file and the output is correct.
Grunt File
module.exports = function(grunt) {
"use strict";
grunt.initConfig({
//concat: {
// css: {
// src: ['app/css/*.css'],
// dest: 'app/css/app.min.css'
// }
//},
cssmin: {
minify: {
expand: true,
cwd: 'app/css/',
src: ['*.css', '!*.min.css'],
dest: 'app/css/',
ext: '.min.css'
}
},
watch: {
//js: {
// files: ['app/js/**/*.js'],
// tasks: ['concat']
//},
css: {
files: ['app/css/*.css'],
tasks: ['cssmin']
}
}
});
//grunt.loadNpmTasks('grunt-contrib-concat'); // Load concat
grunt.loadNpmTasks('grunt-contrib-watch'); // Load watch
grunt.loadNpmTasks('grunt-contrib-cssmin'); // Load CSS min
grunt.registerTask('default', ['watch']); // Load default task
};
It is because the first pass modifies the app.css file which creates app.min.css -- but your watcher is looking for modifications to ANY CSS files (including the newly-created app.min.css).
You can either ignore *.min.css in your watcher config, or just output the minified CSS to a folder you're not watching.

Watch task doesn't compile sass files

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!

Save jade file to html with same name

Trying to get jade to save my jade files as HTML files while keeping the same file name.
So the file views/index.jade should save as dist/index.html
Same for additional files.
I am using grunt-contrib-jade
The jade configuration of my Gruntfile:
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jade: {
compile: {
options: {
pretty: true
},
files: {
'dist/*.html': ['views/*.jade']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.registerTask('default', ['jade']);
};
But it just saves the file as *.html
I think it's doing what you are telling it to do.
Try this for configuration of the jade task:
jade: {
compile: {
options: {
pretty: true
},
files: [{
expand: true, // setting to true enables the following options
cwd: '/jade', // src matches are relative to this path
src: ['{,*/}*.jade'], // matches *.jade in cwd and 1 level down
dest: 'dist/', // destination prefix
ext: '.html' // replace existing extensions with this value
}]
}
}
here is is some information about building file lists dynamically with Grunt.

Categories