Watch directory of LESS files with Grunt - css

My current Grunt code:
module.exports = function(grunt) {
grunt.initConfig({
// running `grunt less` will compile once
less: {
development: {
options: {
paths: ["custom"],
yuicompress: true
},
files: {
"custom/file1.css": "custom/*.less",
"custom/file2.css": "custom/*.less"
}
}
},
// running `grunt watch` will watch for changes
watch: {
files: "custom/*.less",
tasks: ["less"]
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', ['less:development']);
};
Rather than specifying two individual files "file1" and "file2", i would prefer it to compile and watch all .less files within "custom".

Apparently, you have to use the rename callback :
files: [{
src: ['custom/*.less'],
expand: true,
rename: function(dest, src) { return dest + src.replace('.less', '.css') },
dest: ''
}]
Source: https://github.com/gruntjs/grunt-contrib-less/issues/135

Related

I'm stuck configuring Gruntfile.js to transpile multiple JS files into one

I've replaced uglify with babel (and concat), so I'm concat'ing multiple ES6 files into one distribution JS file. I'd LIKE to concat into the dist folder, and have babel transpile and overwrite the file but doing that, babel is unable to use the dist FOLDER, warning:
Couldn't find preset “env” relative to directory
What am I doing wrong?
my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
/*sourceMap: true,
sourceMapStyle: "link"*/
},
dist: {
src: [
"js/file1.js",
"js/file2.js",
"js/file3.js",
"js/file4.js",
"js/file5.js"
],
dest: "js/script.concat.js"
}
},
babel: {
options: {
presets: ["env"],
/*sourceMap: true,*/
minified: true
},
dist: {
files: [{"../dist/js/script.min.js" : "js/script.concat.js"}]
}
},
watch: {
js: {
files: ["js/file1.js", "js/file2.js", "js/file3.js", "js/file4.js", "js/file5.js"],
tasks: ["concat:dist", "babel:dist"]
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
grunt.registerTask('build', ['concat:dist', 'babel:dist']);
};

How to minify/format with Less and Grunt

I am using grunt to compress my LESS files and I have partial success it's either in one line from the setting compress: true or it's not compressed from false and the optimization value set.
What I would like is one per line class without the comments.
.cssitem {stuff;}
.cssitem {stuff;}
.cssitem {stuff;}
My grunt file looks like this:
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
less: {
development: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: {
"css/style.css": "less/style.less" // destination file and source file
}
}
},
watch: {
styles: {
files: ['less/**/*.less'], // which files to watch
tasks: ['less'],
options: {
nospawn: true
}
}
}
});
grunt.registerTask('default', ['less', 'watch']);
grunt.loadNpmTasks('grunt-contrib-less');
};

Grunt: Why is concat and uglify not working when the watch task sees a file change?

Grunt doesn't concat and uglify my javascript files when these files are changed and changes are watched for.
If I run grunt concat the js files are concatenated as expected.
If I then run grunt uglify the files are uglified as expected.
However when I simply run grunt the watch task starts and I change a javascript file I get this:
$ grunt
Running "watch" task
Waiting...
>> File "src/js/test.js" changed.
Running "uglify:my_target" (uglify) task
>> Destination dest/js/app.min.js not written because src files were empty.
>> No files created.
Why does it work when I run individual commands but not when changes to the files are being watched for?
Here's my grunt file:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';',
},
dist: {
src: ['src/**/*.js'],
dest: 'dest/js/app.js',
},
},
uglify: {
my_target: {
files: {
'dest/js/app.min.js': ['<%= concat.dist.dest %>']
}
}
},
compass: { // Task
dist: { // Target
options: { // Target options
sassDir: 'scss',
cssDir: 'css',
environment: 'production'
}
},
dev: { // Another target
options: {
sassDir: 'scss',
cssDir: 'css'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass']
},
js: {
files: 'src/js/*.js', tasks: [ 'uglify' ]
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default',['watch', 'compass', 'concat', 'uglify']);
};
I fixed this by changing the watch section. I also changed my_target to build.
My whole grunt file looks like this
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: "\n\n\n",
},
dist: {
src: ['src/**/*.js'],
dest: 'dest/js/app.js',
},
},
uglify: {
build: {
files: {
'dest/js/app.min.js': ['<%= concat.dist.dest %>']
}
}
},
compass: { // Task
dist: { // Target
options: { // Target options
sassDir: 'scss',
cssDir: 'css',
environment: 'production'
}
},
dev: { // Another target
options: {
sassDir: 'scss',
cssDir: 'css'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass']
},
scripts: {
files: ['<%= concat.dist.dest %>'],
tasks: ['concat', 'uglify:build'],
options: {
atBegin: true,
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default',['watch', 'compass', 'concat', 'uglify']);
};

grunt watch command not working

my grunt watch task is running, but no changes in .less files are recognized:
here is my grunt file.js:
module.exports = function(grunt) {
grunt.initConfig({
// running `grunt less` will compile once
less: {
development: {
options: {
compress: false,
yuicompress: false,
},
files: {
"public/css/styles.css": "src/less/styles.less"
}
},
production: {
options: {
compress: true,
yuicompress: true,
optimization: 2,
},
files: {
"public/css/styles.min.css": "src/less/styles.less"
}
}
},
// running `grunt watch` will watch for changes
watch: {
files: "src/less/*.*/*.less",
tasks: ["less"]
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
Can someone give me a hint, please. Manual trigger of grunt less works fine.

Grunt task arguments do not work

I'm trying to configure grunt to have 2 tasks (development and production). But for whatever reason, whenever I add an argument, the task gets run (as you will see) but there is not output/action:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dev: {
options: {
// define a string to put between each file in the concatenated output
separator: ';'
},
dist: {
// the files to concatenate
src: [
'public/js/jquery-1.10.2.min.js'
],
// the location of the resulting JS file
dest: 'public/js/aaaaa.src.js'
}
},
prod: {
options: {
// define a string to put between each file in the concatenated output
separator: ';'
},
dist: {
// the files to concatenate
src: [
'public/js/jquery-1.10.2.min.js'
],
// the location of the resulting JS file
dest: 'public/js/bbbbbb.src.js'
}
}
}
});
// Load Plugins
grunt.loadNpmTasks('grunt-contrib-concat');
// Default task(s).
grunt.registerTask('default', ['concat:dev']);
});
Output:
$ grunt
Running "concat:dev" (concat) task
Done, without errors.
The plugin does not support nested targets:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dev: {
// the files to concatenate
src: [
'public/js/jquery-1.10.2.min.js'
],
// the location of the resulting JS file
dest: 'public/js/aaaaa.src.js'
},
prod: {
// the files to concatenate
src: [
'public/js/jquery-1.10.2.min.js'
],
// the location of the resulting JS file
dest: 'public/js/bbbbbb.src.js'
}
}
});
// Load Plugins
grunt.loadNpmTasks('grunt-contrib-concat');
// Default task(s).
grunt.registerTask('default', ['concat:dev']);
});

Resources