Grunt: cssmin not working - gruntjs

I am trying to minify CSS using Grunt cssmin plugin. Below is my code:
// Minify CSS
cssmin: {
build: {
options: {
banner: '/* Minified CSS */'
},
files: {
'htt/css/style.min.css' : ['wp/css/**/*.css']
}
}
},
when i run "grunt cssmin" it gives error of "Unexpected identifier".

You where missing a comma after the js object in the watch task, for future you can edit your answer to provide more information instead of posting it as an answer :)
// Watch Tasks
watch: {
js: {
files: ['wp/js/*.js'],
tasks: ['uglify:dev']
}, <------- Missing comma
css: {
files: ['wp/css/*.css'],
tasks: ['']
}
}
});

#mike
`module.exports = function (grunt) {
// Configure Tasks
grunt.initConfig ({
pkg: grunt.file.readJSON ('package.json'),
// Uglify JS
uglify: {
build: {
src: 'wp/js/*.js',
dest: 'htt/js/script.min.js'
},
dev: {
options: {
beautify: true,
mangel: false,
compress: false,
preserveComments: 'all'
},
src: 'wp/js/*.js',
dest: 'htt/js/script.min.js'
}
},
// Concatenating files
concat: {
build: {
src: ['wp/css/*.css'],
dest: 'htt/css/style.css'
}
},
// Minify CSS
cssmin: {
build: {
//options: {
// banner: '/* Minified CSS */'
//},
files: {
'htt/css/style.min.css' : ['wp/css/**/*.css']
}
}
},
// Watch Tasks
watch: {
js: {
files: ['wp/js/*.js'],
tasks: ['uglify:dev']
}
css: {
files: ['wp/css/*.css'],
tasks: ['']
}
}
});
// Load the Plugins
grunt.loadNpmTasks ('grunt-contrib-uglify');
grunt.loadNpmTasks ('grunt-contrib-watch');
grunt.loadNpmTasks ('grunt-contrib-concat');
grunt.loadNpmTasks ('grunt-contrib-cssmin');
// Register Tasks
grunt.registerTask ('default', ['uglify:dev']);
grunt.registerTask ('build', ['uglify:build', 'cssmin']);
};`
Above is the whole gruntfile.js file

Related

Put the minified html in to javascript for grunt task

I have to minify my html and add it in the minified js as an innerHtml. Currently, I am running the following grunt task and manually copying the minified html to the JS file. But , how can I get the minified html as an output and put that inside js, so that I can do all the task in single run.
module.exports = function(grunt) {
grunt.initConfig({
concat: {
css: {
src: ['src/css/style.css',...],
dest: 'dest/css/main.css'
},
js: {
src: ['src/js/angular.min.js',...],
dest: 'dest/js/main.js'
}
},
uglify: {
js: {
src: 'dest/js/main.js',
dest: 'dest/js/main.min.js'
}
},
cssmin: {
css: {
src: 'dest/css/main.css',
dest: 'dest/css/main.min.css'
}
},
minifyHtml: {
options: {
cdata: true
},
dist: {
files: {
'dest/html/index.html': 'src/html/index.html'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-minify-html');
grunt.registerTask('build', ['concat', 'uglify', 'cssmin','minifyHtml']);
};
Have you tried grunt-contrib-copy? Here is what my task looks like:
copy: {
main: {
expand: true,
cwd: 'src/img',
src: '**',
dest: 'dist/img',
flatten: true,
filter: 'isFile',
}
}
npm install grunt-contrib-copy
I had to use the grunt-copy-part-of-file to manage this working.
'copy-part-of-file': {
simple_replace_scripts: {
options: {
sourceFileStartPattern: '<!-- INDEX START -->',
sourceFileEndPattern: '<!-- INDEX END -->',
destinationFileStartPattern: "<!-- JS START -->'",
destinationFileEndPattern: "'<!-- JS END -->"
},
files: {
'dest/js/my.js': ['src/html/index.html']
}
}
}

Grunt: How do I run seperate processes for CSS and JS

As you can see I have tasks for CSS ['sass:main'] and for JS ['jshint:main', 'concat:main', 'uglify:main'], but I want to do separate tasks for separate files (JS and CSS) and listen for changes (watch). Can someone point me in the correct direction, I'm not really sure what I should be searching for. Is this something that watch can handle, or is there another plugin? I'm a little new to grunt so still trying to figure out how to use it. Thanks
GruntFile.js:
module.exports = function(grunt) {
var config = {
pkg: grunt.file.readJSON('package.json'),
jshint: {
options: {
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
},
main: {
src: [
'assets/templates/main/js/crm/*.js',
]
}
},
concat: {
options: {
separator: '\n\n'
},
main: {
src: [
'assets/templates/main/js/crm/*.js',
],
dest: 'assets/templates/main/js/crm.min.js'
}
},
sass: {
options: {
style: 'compressed'
},
main: {
files: {
'assets/templates/main/css/main.min.css': 'assets/templates/main/sass/main.scss',
}
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
main: {
src: 'assets/templates/main/js/crm.min.js',
dest: 'assets/templates/main/js/crm.min.js'
}
},
watch: {
mainjs: {
files: ['assets/templates/main/js/crm/*.js'],
tasks: ['jshint:main', 'concat:main', 'uglify:main'],
},
mainsass: {
files: ['assets/templates/main/sass/*.scss''],
tasks: ['sass:main'],
}
},
concurrent: {
maincss: ['sass:main'],
mainjs: ['jshint:main', 'concat:main', 'uglify:main']
}
};
grunt.initConfig(config);
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-concurrent');
grunt.registerTask('main', ['jshint:main', 'concat:main', 'uglify:main', 'sass:main']);
grunt.registerTask('main-watch', ['jshint:main', 'concat:main', 'uglify:main', 'sass:main', 'concurrent:mainsass']);
};
When I try run tasks:
$ grunt main-watch
Loading "Gruntfile.js" tasks...ERROR
SyntaxError: Invalid or unexpected token
Warning: Task "main-watch" not found. Use --force to continue.
Aborted due to warnings.
It sounds like you want to perform two concurrent watch tasks. You can do that using a configuration like this:
...
concurrent: {
options: { logConcurrentOutput: true },
watch: ['watch:mainjs', 'watch:mainsass']
}
};
...
grunt.registerTask('main-watch', ['concurrent:watch']);
Note that logConcurrentOutput defaults to false, so if you want to see output logged to the console, you need to set it to true.

Grunt not compiling Sass to CSS

I can't figure out what's wrong with my Gruntfile, but the way I understand it is that the sass task will compile abc.scss to abc-exp.css, then, cssmin will take abc-exp.css and generate abc.css. Finally, the watch task will run the css task, which includes sass and cssmin. However, the accurate CSS is only generated the first time I run my tasks, then, on any subsequent changes, nothing is generated.
My project structure is:
_themes/abc/css/abc-exp.css
_themes/abc/css/abc.css
_themes/abc/sass/abc.scss
_themes/abc/sass/partials
_themes/abc/sass/partials/_base.scss
_themes/abc/sass/partials/_variables.scss
_themes/abc/sass/partials/_mixins.scss
Gruntfile:
module.exports = function(grunt){
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
build: {
files: {
'_themes/abc/css/abc-exp.css': '_themes/abc/sass/abc.scss'
}
}
},
// autoprefixer: {
// build: {
// src: '_themes/abc/css/abc-exp.css',
// dest: '_themes/abc/css/abc-exp.css'
// }
// },
cssmin: {
build: {
src: '_themes/abc/css/abc-exp.css',
dest: '_themes/abc/css/abc.css'
}
},
// cssbeautifier: {
// files: ['_themes/abc/css/abc-exp.css'],
// options: {
// indent: ' ',
// openbrace: 'end-of-line',
// autosemicolon: false
// }
// },
uglify: {
options: {
},
my_target: {
files: {
'_themes/abc/js/abc-min.js': ['_themes/abc/js/abc.js'],
'_themes/abc/js/abc-bottom-min.js': ['_themes/abc/js/abc-bottom.js']
}
}
},
watch: {
css: {
files: ['_themes/abc/sass/*.scss'],
tasks: ['css']
},
js: {
files: ['_themes/abc/js/abc.js', '_themes/abc/js/abc-bottom.js'],
tasks: ['js']
}
},
browserSync: {
dev: {
bsFiles: {
src: [
'_themes/abc/css/*.css',
'_themes/abc/img/*',
'_themes/abc/js/*.js',
'_themes/abc/**/*.html',
'_themes/abc/**/*.md'
]
},
options: {
watchTask: true,
proxy: 'wifi.dev:8888'
}
}
}
});
// grunt.registerTask('default', ['browserSync', 'watch']);
// grunt.registerTask('css', ['sass', 'autoprefixer', 'cssmin', 'cssbeautifier']);
// grunt.registerTask('buildcss', ['sass', 'autoprefixer', 'cssmin', 'cssbeautifier']);
// grunt.registerTask('js', ['uglify']);
// grunt.registerTask('buildjs', ['uglify']);
grunt.registerTask('default', ['browserSync', 'watch']);
grunt.registerTask('css', ['sass', 'cssmin']);
grunt.registerTask('js', ['uglify']);
};
I think you need to replaced build with dist like this:
sass: {
dist: {
files: {
'_themes/abc/css/abc-exp.css': '_themes/abc/sass/abc.scss'
}
}
},
In order to make the task observable by watch you need to change it from css to sass
watch: {
sass: {
files: ['_themes/abc/sass/**/*.{scss,sass}'],
tasks: ['sass']
},
...
},

Bootstrap-Sass using Grunt

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.

GRUNT: Concatenated CSS files not reflecting in index.html page

I have setup grunt task to concatenate the CSS files into a combined.css file and it successfully concatenates the CSS files.
grunt.initConfig({
concat: {
options: {
separator: '\n\n\n',
base: "../../../",
},
css: {
src: [ '../../my/demo/v1.0/1.css',
'../../my/demo/v1.0/2css',
'../../my/demo/v1.0/3.css',
],
dest: '../../my/demo/v1.0/combined123.css',
},
});
grunt.loadNpmTasks('grunt-concat-css');
grunt.registerTask('default', ['concat']);
However, I am not able to figure out how should I replace 1.css, 2.css and 3.css in the index.html with the combined123.css file using Grunt.
When manually trying to replacing these css files with the css files in index.html, running the grunt command reverts back the changes made to index.html. When I do the View Source Code for the page in browser, it shows the multiple css files instead of the latest concatenated combined123.css file.
How can I replace these css files with the combined123.css file in the tag of index.html, using the Grunt task.
This is the Gruntfile.js
grunt.initConfig({
root: root,
//concat:css task implemented here as mentioned in above code snippet
connect: {
server: {
options: {
port: grunt.option('port') || 9090,
keepalive: false,
base: "../../../"
}
}
},
open: {
all: {
path: 'http://localhost:<%= connect.server.options.port%>/my/demo/v1.0/dest/index.html'
}
},
watch: {
html: {
files: ['views/*.html', 'index_temp.html'],
tasks: ['mergeFiles']
},
livereload: {
files: ['dest/index.html'],
options: { livereload: true }
}
},
htmlbuild: {
dist: {
src: 'index_temp.html',
dest: '.tmp/',
options: {
beautify: true,
relative: true,
sections: {
headers: 'views/abc.html',
input: 'views/def.html',
}
}
}
},
replace: {
example: {
src: ['.tmp/index_temp.html'],
dest: 'dest/index.html',
replacements: [ {
from: /^\s*\n/gm,
to: ''
},
{
from: /\s+$/,
to: ''
}],
}
});
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-concat-css');
grunt.registerTask('server', ['mergeFiles', 'open' ,'connect', 'watch' ]);
grunt.registerTask('default', ['mergeFiles', 'open' ,'connect', 'watch', 'concat']);
grunt.registerTask('mergeFiles', ["htmlbuild:dist", "replace:example"]);
Any help would be much appreciated.

Resources