I have set up my grunt to minify my html, but when I run 'grunt htmlmin'
it doesnt send it to my dist folder, here are the settings I used:
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: [{
expand: true,
cwd: 'src',
src: '**/*.html',
dest: 'dist/'
}],
},
},
Do I have something set up wrong?
Your configuration seems fine - below is the exact Gruntfile.js that works on my machine. Can you try it on your side?
module.exports = function(grunt) {
grunt.initConfig({
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: [{
expand: true,
cwd: 'src',
src: '**/*.html',
dest: 'dist/'
}],
},
},
});
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.registerTask('default', ['htmlmin']);
};
Related
Grunt is running and detecting the change but the compilation is not happening due to the error "Could not find an option named "sourcemap"
Ruby was not installed since it was required before, I installed it.
Updated all the node packages inside the package.json file. SCSS/CSS files are in the correct path as fas as I know, not sure what could be the issue.
ui = {
'grunt' :
{
'js_files' :
[
'web/webroot/_ui/responsive/theme-blue/razer/js/jquery-ui-1.11.2.custom.min.js'
]
}
}
//'use strict';
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//Compile Sass
sass: {
options: {
sourcemap: 'none'
},
compile: {
files: {
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.css': 'web/webroot/_ui/responsive/theme-blue/razer/sass/main.scss',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.home.css': 'web/webroot/_ui/responsive/theme-blue/razer/sass/main.home.scss',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.branding.css': 'web/webroot/_ui/responsive/theme-blue/razer/sass/main.branding.scss',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.whitepdp.css': 'web/webroot/_ui/responsive/theme-blue/razer/sass/main.whitepdp.scss'
}
}
},
//Minify css
cssmin: {
target: {
files: [
{
src: [
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.carousel.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.theme.default.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/simplebar.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/styles.css'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/mainmin.css'
},
{
src: [
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.home.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.carousel.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.theme.default.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/simplebar.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/styles.css'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/mainmin.home.css'
},
{
src: [
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.branding.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.carousel.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.theme.default.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/simplebar.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/styles.css'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/mainmin.branding.css'
},
{
src: [
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.whitepdp.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.carousel.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.theme.default.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/simplebar.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/styles.css'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/mainmin.whitepdp.css'
}
]
}
},
imagemin: { // Task
dynamic: { // Another target
files: [{
expand: true, // Enable dynamic expansion
cwd: 'web/webroot/_ui/responsive/theme-blue/razer/images/', // Src matches are relative to this path
src: ['**/*.{png,jpg,gif}'], // Actual patterns to match
dest: 'web/webroot/_ui/responsive/theme-blue/razer/images/' // Destination path prefix
}]
}
},
//Uglify js
uglify: {
build: {
files: [{
src: ui.grunt.js_files,
dest: 'web/webroot/_ui/responsive/theme-blue/razer/js/combined.js'
}],
files: [{
src: [
'web/webroot/_ui/responsive/common/js/jquery-2.1.1.min.js'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/js/combined_lib.js'
}],
files: [{
src: [
'web/webroot/_ui/responsive/common/js/jquery-2.1.1.min.js'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/js/combined_lib.js'
}]
},
debug: {
options: {
beautify: false,
mangle: false,
compress: true
},
files: [{
src: ui.grunt.js_files,
dest: 'web/webroot/_ui/responsive/theme-blue/razer/js/combined.js'
}]
}
},
watch: {
css: {
files: ['**/*.scss', '**/*.css'],
tasks: ['sass', 'cssmin']
},
build: {
files: ['web/webroot/_ui/responsive/theme-blue/razer/js/*.js', 'web/webroot/_ui/responsive/common/js/*.js', 'web/webroot/_ui/responsive/theme-blue/razer/js/plugin/*.js'], // which files to watch
tasks: ['uglify:build'],
options: {
nospawn: true
}
},
debug: {
files: ['web/webroot/_ui/responsive/theme-blue/razer/js/*.js', 'web/webroot/_ui/responsive/common/js/*.js'], // which files to watch
tasks: ['uglify:debug'],
options: {
nospawn: true
}
}
}
});
// Plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
//grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('build', ['watch']);
grunt.registerTask('default', ['sass', 'cssmin', 'uglify']);
grunt.registerTask('debug', ['uglify:debug', 'watch:debug']);
grunt.registerTask('lib', ['uglify:lib']);
};
I am experiencing the same issue. I recently switched machines and upgraded to OS Catalina (not sure if this is related to the error).
A (temporary) solution that worked for me is to edit Gruntfile.js and remove the 'sourcemap' option:
before:
options: {
style: 'compressed',
sourcemap: true
},
after:
options: {
style: 'compressed'
},
most likely you have an old sass engine
just do gem install sass or sudo gem install sass
I have several files in my LESS folder with a underscore before the file name. Example:
_variables.less
_colors.less
These files only store data used on other .less files, so they should not have the .css file generated.
Is there any way to set a "ignore" on my gruntfile.js for this kind of file?
Here is my current setup:
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
uglify: {
options: {
manage: false
},
my_target: {
files: [{
expand: true,
cwd: 'assets/js',
src: '*.js',
dest: 'assets/js/min'
}]
},
},
less: {
components: {
options: {
imports: {
reference: [
"assets/less/**/*.less",
]
}
},
files: [{
expand: true,
cwd: 'assets/less',
src: [
'input.less'
],
dest: 'assets/css/',
ext: '.css'
}]
}
},
watch: {
styles: {
files: ['assets/less/**/*.less', 'assets/js/*.js'],
tasks: ['less', 'newer:uglify'],
options: {
nospawn: truetasks
}
}
}
});
grunt.loadNpmTasks('assemble-less');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('default', ['less', 'watch', 'newer:uglify']);
};
My grunt file looks like this:
grunt.initConfig({
compress: {
foo: {
options: { archive: 'deploy/foo.zip', mode: 'zip' },
files: [{ expand: true, cwd: 'release/foo/', src: ['**'], dot: true }]
},
bar: {
options: { archive: 'deploy/bar.zip', mode: 'zip' },
files: [{ expand: true, cwd: 'release/bar/', src: ['**'], dot: true }]
},
baz: {
options: { archive: 'deploy/baz.zip', mode: 'zip' },
files: [{ expand: true, cwd: 'release/baz/', src: ['**'], dot: true }]
},...
How do i parameterise this, so i don't need N definitions and I can call (pseudocode)
> grunt compress "foo"
If I understand your problem correctly:
var initData = {
compress: { }
};
var compress = function(n){
initData.compress[n] = {
options: {archive: 'deploy/' + n + '.zip', mode: 'zip'},
files: [{expand: true, cwd: 'release/' + n + '/', src: ['**'], dot: true}]
};
}
compress('foo');
compress('bar');
compress('baz');
grunt.initConfig(initData);
I want to have a gruntfile with 2 tasks: less (compiles all less files) and watch (listens to changes and re-compiles the changed file).
I have the following Gruntfile.js:
module.exports = function(grunt) {
var files = [
{
expand: true,
cwd: 'media/less',
src: ['*.less'],
dest: 'media/css/',
ext: '.css'
},
{
expand: true,
cwd: 'media/less/vendor',
src: ['*.less'],
dest: 'media/css/vendor/',
ext: '.css'
},
{
expand: true,
cwd: 'media/admin/less',
src: ['*.less'],
dest: 'media/admin/css/',
ext: '.css'
}
];
grunt.initConfig({
less: {
development: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: files
},
production: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: files
}
},
watch: {
styles: {
files: ['media/**/*.less'],
tasks: ['less:development'],
options: {
nospawn: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less:development']);
};
The less task runs correctly without any problems. The watch task however listens to changes, but re-compiles all files when one is changed. I suspect it's something to do with how I set up my less task, because I want my less file list to be dynamic and not to add each file manually.
As per this answer grunt should already support this, but I'm unsure how.
Ended up using the watch event and overriding the files property of the less task. Here's my final code:
module.exports = function(grunt) {
var files = [
{
expand: true,
cwd: 'media/less',
src: ['*.less'],
dest: 'media/css/',
ext: '.css',
extDot: 'last'
},
{
expand: true,
cwd: 'media/less/vendor',
src: ['*.less'],
dest: 'media/css/vendor/',
ext: '.css',
extDot: 'last'
},
{
expand: true,
cwd: 'media/admin/less',
src: ['*.less'],
dest: 'media/admin/css/',
ext: '.css',
extDot: 'last'
}
];
grunt.initConfig({
less: {
development: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: files
},
production: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: files
}
},
watch: {
styles: {
files: ['media/**/*.less'],
tasks: ['less:development'],
options: {
nospawn: true
}
}
}
});
grunt.event.on('watch', function(action, filepath){
// ignore include files, TODO: have naming convention
// if an include file has been changed, all files will be re-compiled
if(filepath.indexOf('.inc.') > -1)
return true;
// might not be the most efficient way to do this
var srcDir = filepath.split('/');
var filename = srcDir[srcDir.length - 1];
delete srcDir[srcDir.length - 1];
srcDir = srcDir.join('/');
var destDir = srcDir.replace(/less/g, 'css');
grunt.config('less.development.files', [{
src: filename,
dest: destDir,
expand: true,
cwd: srcDir,
ext: '.css',
extDot: 'last'
}]);
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less:development']);
};
I'm unsure what you mean with the current title of your question Grunt watch less on changed file only. Do you mean that is a problem? That's the expected behavior of a watch task, it will watch the files specified for changes and run the tasks you specified - in this case the LESS compilation.
I did some changes to your file. Some of it was simplified, some was changed keeping flexibility and expandability of the script in mind.
First install underscore as a dependency, by running:
npm install underscore --save-dev
Then do the following changes to your Gruntfile.js:
module.exports = function(grunt) {
var _ = require('underscore');
var files = {
app : {
'<%= path.styles.css %>/styles.css' : '<%= path.styles.less %>/*.less'
},
vendor : {
'<%= path.styles.css %>/styles-vendor.css' : '<%= path.styles.vendor %>/*.less'
},
admin : {
'<%= path.styles.css %>/styles-admin.css' : '<%= path.styles.admin %>/*.less'
}
}
function all() {
'use strict';
var allfiles = {},
i = {};
for (i in files) {
_.extend(allfiles, files[i]);
}
return allfiles;
}
grunt.initConfig({
path : {
media : 'media',
styles : {
css: 'media/css',
less: 'media/less',
admin: 'media/admin/less',
vendor: '<%= path.styles.less %>/vendor'
}
},
less: {
development: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: (all())
},
production: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: (all())
}
},
watch: {
styles: {
files: ['<%= path.media %>/**/*.less'],
tasks: ['less:development'],
options: {
nospawn: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
// run several tasks as default (handy for complex projects)
grunt.registerTask('dist', [ // run with 'grunt dist'
'less:production'
]);
grunt.registerTask('dev', [ // default, will run with 'grunt' only
'less:development'
]);
grunt.registerTask('default', 'dev');
};
If what you want is to actually compile the sets of files separately (files.app, files.vendor & files.admin), you might need to split the task some more, like so:
less: {
app: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: files.app
},
vendor: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: files.vendor
},
admin: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: files.admin
},
development: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: (all())
},
production: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: (all())
}
},
watch: {
all: {
files: ['<%= path.media %>/**/*.less'],
tasks: ['less:development'],
options: {
nospawn: true
}
},
app : {
files: ['<%= path.styles.less %>/*.less'],
tasks: ['less:app'],
options: {
nospawn: true
}
},
vendor : {
files: ['<%= path.styles.vendor %>/*.less'],
tasks: ['less:vendor'],
options: {
nospawn: true
}
},
admin : {
files: ['<%= path.styles.admin %>/*.less'],
tasks: ['less:admin'],
options: {
nospawn: true
}
}
}
Then you could then run either of these:
grunt watch:app
grunt watch:vendor
grunt watch:admin
You can always to choose to run the tasks directly, once:
grunt less:app
grunt less:vendor
grunt less:admin
Hope this helps! Please note that I haven't tested this.
I am using grunt-contrib-uglify plugin in my grunt 0.4.
I have the following task:
uglify: {
dist: {
options: {
sourceMap: 'dist/sm/sm.js'
},
files: grunt.file.expandMapping(['*.js'], 'dist/js', {
cwd: 'dist/js'
})
}
},
As you can see, uglify is configured to compress multiple files, and there is only one source-map specified. (I am not able to figure out a way to specify multiple sourcemap outputs).
Also, uglify is overwriting the soucemap after compressing each js file.
How do I configure this plugin to output the complete source-maps for all my js files?
You can set functtion at sourceMap.
uglify: {
options: {
sourceMap: function(path) { return path.replace(/.js/,".map")}
},
.....
In the V0.4.0 version, sourceMap is Boolean value. Use dynamic build to produce multiple sourceMap with multiple .min.js files.
uglify: {
options: {
sourceMap: true
},
build: {
files: [{
expand: true,
cwd: 'src/',
src: '*.js',
dest: 'build/',
ext: '.min.js',
extDot: 'first'
}]
}
}
options: {
beautify: false,
banner: 'lorem ipsum',
mangle: false,
sourceMap: true,
compress: {
conditionals: true,
booleans: true,
unused: true,
sequences: true,
dead_code: true,
if_return: true,
join_vars: true,
drop_console: true
}
},
min: {
files: [{
expand: true,
cwd: '<%= config.destination.js %>',
src: ['**/*.js', '!**/*.min.js'],
dest: '<%= config.destination.js %>',
ext: '.min.js'
}]
}