Background
I've just started using grunt as of about 30mins ago. So bear with me.
But I have a rather simple script going that will look at my js and then compress it all into one file for me.
Code
"use strict";
module.exports = function (grunt) {
// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
beautify: true,
report: 'gzip'
},
build: {
src: ['docroot/js/*.js', 'docroot/components/pages/*.js', 'docroot/components/plugins/*.js'],
dest: 'docroot/js/main.min.js'
}
},
watch: {
options: {
dateFormat: function(time) {
grunt.log.writeln('The watch finished in ' + time + 'ms at' + (new Date()).toString());
grunt.log.writeln('Waiting for more changes...');
}
},
js: {
files: '<%= uglify.build.src %>',
tasks: ['uglify']
}
}
});
grunt.registerTask('default', 'watch');
}
Question
My main.min.js is getting included in the compile each time. Meaning my min.js is getting 2x, 4x, 8x, 16x etc etc. Is best way around this is to add an exception and ignore main.min.js?
To the end of the src array, add
'!docroot/js/main.min.js'
This will exclude it. The ! turns it into an exclude.
http://gruntjs.com/api/grunt.file#grunt.file.expand
Paths matching patterns that begin with ! will be excluded from the returned array. Patterns are processed in order, so inclusion and exclusion order is significant.
This is not specific to grunt uglify, but any task that uses grunt convention for specifying files will work this way.
As a general advice though I would suggest putting built files somewhere else than your source files. Like in a root dist folder.
Related
I'm trying to use Grunt's grunt-contrib-watch plugin to watch some files and then run the tasks, just what it was made for, this is my Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
sourceMap: true,
outputStyle: 'compressed'
},
dist: {
files: {
'static/stylesheets/main.min.css': 'static/stylesheets/sass/main.scss',
/*'bower_components/foundation-sites/dist/foundation.min.css': 'bower_components/foundation-sites/scss/foundation.scss'*/
}
}
},
uglify: {
dist: {
files: {
'static/javascript/main.min.js': 'static/javascript/main.js'
}
}
},
watch: {
files: [
'<%= sass.dist.files %>',
'<%= uglify.dist.files %>'
],
tasks: [
'sass',
'uglify'
]
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['watch']);
};
When I run it, it runs over and over and over again, and when I stop it, I see I have this message:
Running "watch" task
Waiting...
Warning: pattern.indexOf is not a function
I really don't know what's the problem. Does anybody know what happens here?
UPDATE:
Apparently, the problem is because of the way I call the files, because I changed it to: 'static/stylesheets/sass/*.scss' and it worked well, but I would like to know why the other way doesn't work, because I think is a more useful way to do it.
grunt-contrib-watch expects either a single pattern string or an array of pattern strings as the value of its files config. However, the templates you are using in your config evaluate to objects. Your watch.files value evaluates to the following:
files: [
{ 'static/stylesheets/main.min.css': 'static/stylesheets/sass/main.scss' },
{ 'static/javascript/main.min.js': 'static/javascript/main.js' }
]
When the pattern matching tries to run it fails because there is no indexOf method on an Object. Due to the fact that grunt-contrib-watch runs forever, there is an infinite loop of the trying and failing to build the list of watched files.
You would normally configure your watch files with something like the following:
files: [
'static/**/*.scss',
'static/**/*.js'
]
But the above will cause issues in your case because your minified JS file is in the same folder as your source JS file. You could probably get around this by adding '!static/**/*.min.js' to your files array, but a better solution would be to put all of your compiled files into a separate folder.
Extract the values from the object:
watch: {
files: [
'<%= sass.dist.files.values() %>',
'<%= uglify.dist.files.values() %>'
],
i have this situation:
i have some js libraries downloaded via bower in bower_componenents folder
some custom javascript in a different js folder
my concat task is the following:
concat: {
dist: {
src: [
'bower_components/jquery/jquery.js',
'bower_components/imagesloaded/imagesloaded.js',
'js/libs/*.js',
'js/custom/*.js'
],
dest: 'js/build/production.js'
}
}, //end concat
the result gets then processed by grunt uglifier like so:
uglify: {
dist: {
src: 'js/build/production.js',
dest: '_site/js/production.min.js'
}
}, //end uglify
what happens here is everything goes smoothly if i add just ONE library from bower_components folder (in my case jquery). if i add a second one (in my case images loaded), the resulting javascript file gets broken and no javascript works at all.
if i inspect the production.min.js file i notice all the needed code is actually there, but it doesn't work.
what am i missing?
should i use grunt-bower-concat? if yes, why and will it concatenate also my custom js?
for a reference, i'm using this grunt boilerplate: https://github.com/vlrprbttst/grunt-boilerplate-v2
thanks!!
that's fixed with:
concat: {
options: {
separator: ';',
},
dist: {
and
uglify: {
options: {
mangle: false
},
dist: {
I've tried a few things but can't come to a good solution.
I'm using grunt to compile my sass and minify my javascript.
Is it possible to autoload every .sass file and every .js file in a specific directory?
I've tried stuff like this
sass: {
options: {
sourceMap: false
},
dist: {
src: 'src/sass/**/*.sass',
dest: 'dist/css/style.css'
}
}
but this will only load the very first sass file.
I'm not sure what concat even does but I tried it aswell and didn't find the solution I was looking for.
Basicly all files in the folder sass/ should be compiled to 1 big style.css file the same with javascript.
Sure I could manually import each file in a main.sass file or so, but I would love a autoload function so I don't get lazy and don't create new files because I would have to add them.
edit:
So with this
files: [{
expand: true,
cwd: "src/sass/",
src: ["**/*.sass"],
dest: "dest/css",
ext: ".css"
}]
I can actually do what I want. The problem is my mixins get loaded too late and it's thorwing an error because it doesn't find the mixin I wanted to include.
This is a format to generate a single output file from multiple source files:
concat: {
whatever: {
options: { separator: '\n' },
src: ['src/sass/**/*.sass'],
dest: 'build/tmp.sass' // make sure the temporary build/ dir exists!
}
}
It only works on tasks supporting combining multiple files; in this case the grunt-contrib-concat task.
It produces dist/css/sass.tmp, which you will need to process with the sass task:
sass: {
dist: {
files: [{
src: 'build/tmp.sass',
dest: 'dist/css/style.css'
}]
}
}
You would make sure they are run in sequence with something like this:
grunt.registerTask( 'default', ['concat', 'sass'] ); // add your uglify/cssmin here
However, I don't recommend this, because the order of the sass files is uncontrollable, and it won't make mixin's available, even if they are compiled to css first - which is pointless, because they loose their 'mixin' format. It's best to run sass on a single source file and import your other files in that source file.
Update
Regarding auto-loading of mixin files,
the SASS Reference does mention you can use custom importers (written in Ruby) that take care of #import; I'm not sure whether this is only for top-level importing of files, or also for #import mixin-name(foo) within rules, but I don't think so.
There is an alternative approach you could use, based on concat, assuming that you have one main sass file. You would need to add a single #import 'all-mixins' to it. This all-mixins.sass is a generated file:
concat: {
all_mixins: {
options: { separator: '\n' },
src: ['src/sass/mixins/*.sass'],
dest: 'build/all-mixins.sass'
}
}
And you would specify the sass option loadPath to add build/ to the path:
sass: {
dist: {
options: {
loadPath: 'build/'
},
files: [{
src: 'build/tmp.sass',
dest: 'dist/css/style.css'
}]
}
}
This is as close to auto-loading as it gets without extending sass itself.
I have the following Gruntfile.js:
module.exports = function(grunt) {
var config = {
pkg: grunt.file.readJSON('package.json'),
/* Some other tasks... */
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
def: {
files: {
'out/src.js': 'out/src.min.js'
}
}
}
};
grunt.initConfig(config);
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', [/* <other-tasks>, */ 'uglify:def']);
};
Folder structure is as follows:
project
|
+-out (folder)
+-Gruntfile.js
Important: I run grunt from the project folder.
When running grunt, there is a task before uglify:def which is responsible for generating src.js into project/out.
When I run grunt I can see src.js being generated into project/out, but when Grunt runs uglisy:def I get the following error:
Running "uglify:def" (uglify) task.
Destination out/src.js not written because src files were empty.
No files created.
What am i doing wrong?
Log
When running with --verbose I get:
Running "uglify:def" (uglify) task
Verifying property uglify.def exists in config...OK
Files: [no src] -> out/src.js
Options: banner="/*! My Pack 2015-07-19 */\r\n", footer="", compress={"warnings":false}, mangle={}, beautify=false, report="
min", expression=false, maxLineLen=32000, ASCIIOnly=false, screwIE8=false, quoteStyle=0
>> Destination out/src.js not written because src files were empty.
>> No files created.
I've a configuration like the following, and it works fine for me.
// uglify javascript
uglify: {
dev: {
options: {
mangle: true
},
files: {
'js/dest.min.js': 'js/source.js'
}
}
},
Probably you confused the destination with the source. Try to switch them.
It were happening due to, you are not registering above given tasks.
OK, lets start with concatenation in grunt:
concat: {
css: {
src: ['./assets/css/*.css', './assets/css/**/*.css'],
dest: './dist/css/style.css'
},
js: {
src: ['./assets/js/*.js', './assets/js/**/*.js'],
dest: './dist/js/script.js'
}
},
so, this concat is supposed to collect all css files from above given url / directories and concatenate to given destination in one place and so with js.
this will be simple concatenated style.css and script.js at dest destination directory.
but it won't work, till you not register this concat task inside below line:
grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);
So, till concat will not concatenate those files in dest directory, how the uglify will collect and work!
Conclusion: task won't get execute till you not mention them inside grunt.registerTask function.
My problem was that the path to my source file was incorrect. So it wasn't so much that the file is "empty" but that it can't be found.
I am new to grunt (literally installed it today and using it) and its great, but i cannot work out something.
I have an angularJs project and i would like to concat all my javascript files into 3 files overall.
So i would have
"base" - all the vendor javascript files for plugins etc
"app" - all the controllers etc used by all users
"admin" - all the controllers etc used but only ever accessed by administrators
Now i have install grunt and setup my task for concat, but how can i have multiple dest and src attributes?
Example of grunt file
grunt.initConfig({
// Metadata
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
stripBanners: true
},
dist: {
src: ['Scripts/jquery-*.js', '!Scripts/jquery-*.min.*', '!Scripts/jquery-*.intellisense.*', 'Scripts/bootstrap.js', 'Scripts/respond.js', 'js/**/*.js'],
dest: 'dist/app.js'
},
distCss: {
src: ['Content/bootstrap.css', 'Content/site.css'],
dest: 'dist/app.css'
}
},
});
Once i have figured this out, can i then have multiple ugilify attributes to ugilify each js file created?
you can set up seperate tasks to perform when ever you run grunt. each task will concatenate different sources.
from grunt-contrib-concat:
In this example, running grunt concat will build two separate files. One "basic" version, with the main file essentially just copied to dist/basic.js, and another "with_extras" concatenated version written to dist/with_extras.js.
grunt.initConfig({
concat: {
basic: {
src: ['src/main.js'],
dest: 'dist/basic.js',
},
extras: {
src: ['src/main.js', 'src/extras.js'],
dest: 'dist/with_extras.js',
},
},
});
after which you need to use grunt-contrib-uglify plugin to minify the output files from grunt-concat.