I have different options to concat JS files and CSS files.
How can I configure grunt to run such a configuration ?
This doesn't work :
concat: {
js: { // Custom options for JS
options: {
separator: '\n',
sourceMap: true,
banner: '...',
},
core: {
src: ['src/core/*.js', 'src/core/**/*.js'],
dest: 'assets/xxxx.js'
}
},
css: { // Default options for CSS
core: {
src: ['src/core/*.css', 'src/core/**/*.css'],
dest: 'assets/xxxx.css'
}
}
}
This is ugly, but it works :
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.renameTask('concat', 'concatCss');
grunt.loadNpmTasks('grunt-contrib-concat');
// The task is then loaded two times, under 'concat' and 'concatCss' names.
...
concat: {
options: {
separator: '\n',
sourceMap: true,
banner: '...',
},
core: {
src: ['src/core/*.js', 'src/core/**/*.js'],
dest: 'assets/xxxx.js'
},
concatCss: { // Default options for CSS
core: {
src: ['src/core/*.css', 'src/core/**/*.css'],
dest: 'assets/xxxx.css'
}
}
Related
I'm using Terser for Gruntjs to minify js files.
I want to be able to create a sourcemap but I don't know how to translate the samples I see in the options section (https://www.npmjs.com/package/terser#source-map-options) into my gruntfile.js.
Here is the section where I am minifying and I added where I think the sourceMap options go:
grunt.initConfig({
terser: {
pages: {
options: {
mangle: {
properties: false
},
sourceMap: {
// source map options goes here I think but not certain what
}
},
files: [
{ expand: true,
src: '**/*.js',
dest: 'wwwroot/js',
cwd: 'wwwroot/js',
ext: '.min.js'
}
]
}
}
});
I cannot find a gruntjs example for this anywhere so any input or help would be great
I found the answer and have tested it. Note the sourceMap entry in the options below:
grunt.initConfig({
terser: {
pages: {
options: {
mangle: {
properties: false
},
sourceMap: true
},
files: [
{ expand: true,
src: '**/*.js',
dest: 'wwwroot/js',
cwd: 'wwwroot/js',
ext: '.min.js'
}
]
}
}
});
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 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']
}
}
}
The tasks in my grunt file are running without errors but the files i'm asking it to create aren't being compiled. They are created if I simple run 'grunt' but if I use 'grunt watch' and save a file it doesn't update.
Particularly I am working on file 'script/src/latestNews.js' so on save this should concat with others to create 'script/dist/main.js', which it does. But it does not then go on to create 'dist/build.min.js' like it should.
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
mangle: false
},
target: {
files: {
'script/dist/main.min.js':'script/dist/main.js'
}
},
build: {
files: {
'script/dist/build.min.js':'script/dist/build.min.js'
}
}
},
concat: {
options: {
stripBanners: true,
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */',
},
srcJS: {
src: ['script/src/menu.js',
'script/src/custom_plugins.js',
'script/src/banner.js',
'script/src/latestNews.js',
'script/src/officers.js',
'script/src/eventsCalendar.js',
'script/src/combinedSocialMedia.js',
'script/src/haveYourSay.js',
'script/src/photoGallery.js',
'script/src/countdown.js'
],
dest: 'script/dist/main.js'
},
css: {
src: ['style/libs/bootstrap.min.css',
'style/libs/bootstrap-theme.min.css',
'style/src/css/*'],
dest: 'style/dist/build.min.css'
},
build: {
src: ['script/libs/jquery.easing.min.js',
'script/dist/main.js',
'script/libs/bootstrap.min.js',
'script/libs/velocity.min.js',
'script/libs/date.js',
'script/libs/jquery.timeago.js',
'script/libs/owl.carousel.min.js'
],
dest: 'script/dist/build.min.js'
}
},
jshint: {
main: 'script/dist/main.js'
},
watch: {
js: {
files: 'script/src/*',
tasks: ['concat:srcJS', 'uglify:target', 'jshint:main', 'copy:js']
},
css: {
files: 'style/src/css/*',
tasks: ['copy:css']
},
less: {
files: 'style/src/less/*',
tasks: ['less', 'copy:css']
},
html: {
files: '*.html',
tasks: ['validation', 'bootlint']
}
},
clean: {
js: [
'script/dist/main.min.js',
'dist/build.min.js',
'dist/build.min.css'
]
},
copy: {
css: {
files: [
{ expand: true, 'src' : 'style/src/css/main.css',
'dest' : 'style/dist/', flatten: true,
rename: function(dest, src) {
return dest + src.replace('main','build.min');
}
},
{ expand: true, 'src' : 'style/dist/build.min.css',
'dest' : 'dist/', flatten: true },
]
},
js: {
files: [
{ expand: true, 'src' : 'script/dist/build.min.js',
'dest' : 'dist/', flatten: true }
]
}
},
validation: {
options: {
reset: grunt.option('reset') || false,
stoponerror: true,
relaxerror: ['Bad value X-UA-Compatible for attribute http-equiv on element meta.'] //ignores these errors
},
files: {
src: ['homepage.html']
}
},
bootlint: {
options: {
stoponerror: false,
relaxerror: ['E001', 'E003', 'E031', 'W001', 'W002', 'W003', 'W005', 'W007', 'W009', 'E013']
},
files: ['homepage.html'],
},
less: {
build: {
options: {
paths: ["style/src/less"],
cleancss: true,
compress: true
},
files: {
"style/src/css/main.css": "style/src/less/main.less"
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-html-validation');
grunt.loadNpmTasks('grunt-bootlint');
// Default task(s).
//grunt.registerTask('default', ['concat:srcJS','concat:css','uglify','jshint:main']);
grunt.registerTask('default', [
'validation',
'bootlint',
'concat:srcJS',
'jshint:main',
'uglify:target',
'clean',
'concat:build',
'uglify:build',
'less',
'copy'
]);
};
It looks like the array of tasks that are run by your watch:js task is simply missing a couple of critical tasks. Specifically you are not running the concat:build and uglify:build tasks.
Your current array of tasks:
['concat:srcJS', 'uglify:target', 'jshint:main', 'copy:js']
Complete/fixed array of tasks:
['concat:srcJS', 'uglify:target', 'jshint:main', 'concat:build', 'uglify:build', 'copy:js']
Replacing your current array with the fix that I supplied should solve your issue.
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