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');
};
Related
I have installed bootstrap using sass, however my scss files are not compiling to the css folder.
I was able to install the bootstrap, using bower.
This is my gruntfile.js
/*jslint node: true */
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
loadPath: ['./bower_components/bootstrap-sass/assets/stylesheets']
},
dist: {
options: {
outputStyle: 'expanded',
sourceMap: false
},
files: {
'css/bootstrap.css' : 'stylesheets/_bootstrap.scss',
}
}
}, // sass
compass: {
dev: {
options: {
config: 'config.rb'
}
} // dev
}, //compass
watch: {
options: {
livereload: true,
dateFormat: function(time) {
grunt.log.writeln('The watch finished in ' + time + 'ms at ' + (new Date()).toString());
grunt.log.writeln('Waiting for more changes...');
} //date format function
}, //options
scripts: {
files: ['*.js']
}, // scripts
//Live Reload of SASS
sass: {
files: ['stylesheets/*.scss', 'stylesheets/bootstrap/*.scss'],
tasks: ['sass']
}, //sass
css: {
files: ['stylesheets/*.scss', 'stylesheets/bootstrap/*.scss'],
tasks: ['compass']
},
html: {
files: ['*.html']
}
}, //watch
postcss: {
options: {
processors: [
require('autoprefixer-core')({
browsers: 'last 2 versions'
})
]
}
}, //post css
jshint: {
options: {
reporter: require('jshint-stylish')
},
target: ['*.js', 'js/*.js']
} //jshint
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build', 'watch', 'compass', 'jshint']);
}
I would like to know, what step I am missing, because I have followed the directory paths correctly. My config.rb file, I have changed the sass directory to stylesheets.
When I run, sudo grunt, no errors are found but the stylesheet is not compiling.
In SCSS, files starting with _ (underscore) are typically ignored. See: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials
This also applies to grunt-sass.
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
I have the following Gruntfile.js. My bootstrap.less file has tons of imports which includes all the plugins' CSS codes as well. Therefore, the bootstrap takes from 5-20 seconds to compile whenever I make a change to any less files. Is there any way I can have two different less tasks, so whenever there's a change in any of the bootstrap's imported files, that only runs the less task associated to the bootstrap and the other task that would run only if the main.less is changed.
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
development: {
options: {
paths: ["../css"]
},
files: {
"../css/bootstrap.css": "../less/bootstrap.less",
"../css/main.css": "../less/main.less"
}
}
},
watch: {
options: {
livereload: true
},
less: {
options: {
livereload: false,
spawn: false
},
files: ['../less/*.less', '../less/responsive/*.less'],
tasks: ['less']
}, css: {
files: ['../css/main.css'],
tasks: []
}
}
});
// Less
grunt.loadNpmTasks('grunt-contrib-less');
// Watch
grunt.loadNpmTasks('grunt-contrib-watch');
};
try running this code :
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
development: {
options: {
paths: ["../css"]
},
files: {
"../css/main.css": "../less/main.less"
}
},
bootstrapBuild : {
options : {
paths: ['../css']
},
files : {
"../css/bootstrap.css": "../less/bootstrap.less",
}
}
},
watch: {
options: {
livereload: true
},
mainCSS: {
options: {
livereload: false,
spawn: false
},
files: ['../less/*.less', '../less/responsive/*.less', '!../less/bootstrap.less'],
tasks: ['less: development']
},
bootstrapBuild : {
files: ['../less/bootstrap.less'],
tasks: ['less:bootstrapBuild']
},
css: {
files: ['../css/main.css'],
tasks: []
}
}
});
// Less
grunt.loadNpmTasks('grunt-contrib-less');
// Watch
grunt.loadNpmTasks('grunt-contrib-watch');
};
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.
I am not sure why Grunt isn't generating my HTML?
Is there a mistake with my gruntfile?
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-haml');
grunt.initConfig({
uglify: {
my_target: {
files: {
'js/script.js': ['javascripts/*.js']
} //files
} //my_target
}, //uglify
sass: {
dist: {
options: {
sourcemap: true,
compass: true
}, //options
files:{
'stylesheets/style.css': 'sass/style.scss'
} //files
} //dist
}, //sass
haml: { // Task
dist: { // Target
files: { // Dictionary of files
'index.html': 'index.haml' // 'destination': 'source'
}
}
},
watch: {
options: { livereload: true },
scripts: {
files: ['javascripts/*.js'],
tasks: ['uglify']
}, //script
css: {
files: ['sass/*.scss'],
tasks: ['sass']
}, //sass
html: {
files: ['*.haml'],
task: ['haml']
}
} //watch
}) //initConfig
grunt.registerTask('default', ['haml', 'watch']);
} //exports
Old question, but I had the same issue, and here's what it was for anyone's future reference.
The gruntfile that I downloaded (like this one) had 'task' instead of 'tasks'. So the watch task is running, and you'll get notified that a file has changed, but no actual tasks will be run. Correct the typo and you're back in action!
Figure this out.
There is no problem with the code itself.
It is the terminal screwing up.