I just started messing around with Grunt. I have a basic implementation running successfully, minifying my code and running JSHint.
It says 0 files lint free, which I've gathered means that all of the files it's checking have lint.
However, I've been googling for an hour, and somehwat incredibly, cannot figure out where the hell these errors are being saved.
Do I need to specify a logfile in the grunt config? I don't see anything like that in the JSHint or grunt documentation.
Gruntfile below, taken pretty much straight from Grunt's "Getting Started". I pulled out qunit because I don't currently have any tests -
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
// define a string to put between each file in the concatenated output
separator: ';'
},
dist: {
// the files to concatenate
src: ['spin/**/*.js'],
// the location of the resulting JS file
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
// the banner is inserted at the top of the output
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
jshint: {
// define the files to lint
files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
// configure JSHint (documented at http://www.jshint.com/docs/)
options: {
// more options here if you want to override JSHint defaults
"curly": true,
"eqnull": true,
"eqeqeq": true,
"undef": true,
globals: {
jQuery: true,
console: true,
module: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('test', ['jshint']);
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
};
0 files lint free does not mean that you have files which have errors, it means that zero files are checked!
the jshint-task will output errors to your console (including file, linenumber and column)
thats where you specify your files to check:
files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
if you change 'gruntfile.js' to 'Gruntfile.js' (case sensitive!) it should check your gruntfile (which you of course already have).
Related
Trying to use a predefined array inside of a grunt file, thought using this.js_paths would work, but doesn't seem to work as I'm getting the error, "Cannot read property IndexOf of undefined" when it comes to trying to uglify the scripts. How can I link the js_paths variable to the files src property properly instead of copying the array into the files. Would like to define it separately at the top. Is this possible?
module.exports = function(grunt) {
// loadNpmTasks from package.json file for all devDependencies that start with grunt-
require("matchdep").filterDev("grunt-*", './package.json').forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
js_paths: [
'inc/header1/js/*.js',
'!inc/header1/js/*.min.js',
'inc/header2/js/*.js',
'inc/header2/js/*.js',
'!inc/header2/js/*.min.js',
'js/*.js',
'!js/*.min.js'
],
uglify: {
options: {
mangle: true
},
build: {
files: [{
expand: true,
src: this.js_paths,
rename: function(dst, src) {
return src.replace('.js', '.min.js');
}
}]
}
},
watch: {
scripts: {
files: ['inc/header1/js/*.js', 'inc/header2/js/*.js', 'js/*.js'],
tasks: ['uglify'],
options: {
spawn: false,
}
}
}
});
grunt.registerTask('default', ['uglify', 'watch']);
};
Preferrably would like to use the same array js_paths in the watch files (since it's required there), if that makes sense? Still kinda new to using gruntfile.js
Utilize the Templates syntax. It's described in the docs as following:
Templates
Templates specified using <% %> delimiters will be automatically expanded when tasks read them from the config. Templates are expanded recursively until no more remain.
Essentially, change this.js_paths to '<%= js_paths %>' in your uglify task.
For instance:
// ...
uglify: {
options: {
mangle: true
},
build: {
files: [{
expand: true,
src: '<%= js_paths %>', // <-----
rename: function(dst, src) {
return src.replace('.js', '.min.js');
}
}]
}
},
// ...
Likewise for your watch task too.
For instance:
watch: {
scripts: {
files: '<%= js_paths %>', // <-----
tasks: ['uglify'],
options: {
spawn: false,
}
}
}
I have been trying to configure this gruntfile for days, I have seen and read multiple documents on how to set it up. I have been able to set it up so I can run individual tasks by typing in the individual commands into bash:
grunt uglify
grunt sass
grunt cssmin
However grunt watch seems to not watch any of my js files
All of which work fine, but when I tried to run them all under the "watch" task, my js files are all ignored. my command line just reads 'waiting...'. Changing any of the content in my js files does not trigger an update. I also had toruble running jshint as it kept telling me that it is looking for a string etc. so i disabled that plugin for now. Here is my file:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: { // Task
dist: { // Target
files: { // Dictionary of files
'assets/css/style.css': 'assets/scss/style.scss'
// 'destination': 'source'
}
}
},
cssmin: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd")
%> \n*/\n'
},
build: {
files: {
'assets/css/style.min.css': 'assets/css/style.css'
}
}
},
uglify: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd")
%> \n*/\n'
},
build: {
files: {
'assets/js/magic.min.js': ['assets/js/magic.js',
'assets/js/server.js', 'assets/js/script.js']
}
}
},
// configure jshint to validate js files -------------------------------
// jshint: {
// options: {
// reporter: require('jshint-stylish')
// },
// // when this task is run, lint the Gruntfile and all js files in
src
// build: ['Gruntfile.js', 'assets/**/*.js']
// },
watch: {
// for stylesheets, watch css and less files
// only run less and cssmin stylesheets: {
files: ['assets/**/*.css', 'assets/**/*.less'],
tasks: ['sass', 'cssmin']
},
// for scripts, run jshint and uglify
scripts: {
files: 'assets/**/*.js',
tasks: 'uglify'
}
});
// Default tasks
//grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['uglify', 'cssmin', 'sass', 'watch']);
};
I think you want to do this ?
watch: {
stylesheets: {
files: ['assets/**/*.css', 'assets/**/*.less'],
tasks: ['sass', 'cssmin']
},
// for scripts, run jshint and uglify
scripts: {
files: 'assets/**/*.js',
tasks: 'uglify'
}
}
I can't seem to find the answer in the documentation. I want to send an array of sourceFiles from my package.json to the grunt task.
Here is my config.json
{
"sourceFiles": ["src/js/d3js/d3.js", "src/js/testingGrunt.js"]
}
and here is my gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
config: grunt.file.readJSON('config.json')
});
// Load the plugin that provides the concat tasks.
grunt.loadNpmTasks('grunt-contrib-concat');
// defining my concat task
grunt.config('concat', {
dist: {
//src: ['src/js/testingGrunt.js', 'src/js/d3js/d3.js'],
src: '<%config.sourceFiles%>',
dest: 'build/<%= pkg.name %>-build.js'
}
});
// Load the plugin that provides the uglify tasks.
grunt.loadNpmTasks('grunt-contrib-uglify');
// defining my uglify task
grunt.config('uglify', {
options: {
banner: '/*\n* ©<%= pkg.author%>\n* <%= pkg.name %>\n* <%= grunt.template.today("yyyy-mm-dd HH:mm:ss") %> \n*/\n'
},
build: {
src: 'build/<%= pkg.name %>-build.js',
dest: 'build/<%= pkg.name %>-build.min.js'
}
});
// Default task(s).
var defaultTasks;
defaultTasks = ['concat', 'uglify']
grunt.registerTask('default', defaultTasks);
};
The commented out line inside the grunt.config('concat',... works just fine. However I want to set up my gruntfile to read the files from the config file.
Eventually I'm going to be doing other things in this grunt task and I want to set it up so that I never need to edit the grunt file.
Looks like the template syntax is off try replacing:
src: '<%config.sourceFiles%>',
with the following:
src: '<%= config.sourceFiles %>',
I am trying to achieve a smooth workflow.
my problem:
My JS modifications are shown and minified and the live reload works fine. When I make changes to my SCSS files they do not run under the run command:
grunt
or the grunt plugin:
grunt watch
It only works when I invoke:
grunt sass
This was the output from the 'grunt sass' console window:
Macintosh:grunt-test Neil$ grunt sass
Running "sass:dist" (sass) task
File "css/global.css" created.
Done, without errors.
Notes:
When I run 'grunt watch' on a sass file I have noticed that grunt runs the minification on the javascript for no reason. Surely this be invoked when that file or one of its dependencies is effected?
Gruntfile.js Contents:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
options: {
files: ['css/*.css'],
livereload: true
},
css: {
files: ['css/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
scripts: {
files: ['js/*.js', 'scss/*.scss'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
}
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
expand: true,
cwd: 'scss/',
src: ['*.scss'],
dest: 'css/',
ext: '.css'
}
},
concat: {
// 2. Configuration for concatinating files goes here.
dist: {
src: [
'js/libs/*.js', // All JS in the libs folder
'js/global.js' // This specific file
],
dest: 'js/build/production.js',
}
},
uglify: {
build: {
src: 'js/build/production.js',
dest: 'js/build/production.min.js'
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images-lossy/',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/'
}]
},
png: {
options: {
optimizationLevel: 7
}
},
jpg: {
options: {
progressive: true
}
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
// CONCATENATION PLUGIN
grunt.loadNpmTasks('grunt-contrib-concat');
// MINIFY PLUGIN
grunt.loadNpmTasks('grunt-contrib-uglify');
// IMG CRUSH PLUGIN
grunt.loadNpmTasks('grunt-contrib-imagemin');
// GRUNT WATCH PLUGIN
grunt.loadNpmTasks('grunt-contrib-watch');
// SASS LIBARY PLUGIN
grunt.loadNpmTasks('grunt-contrib-sass');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['sass','concat', 'uglify', 'imagemin', 'watch']);
};
I hope the above information helps. I have previously used Codekit, and it a really great app. I want to move to grunt but maybe my configuration file is incorrect I am close.
Any help would be greatly appreciated.
Neil
It looks like both of your issues occur within the watch configuration.
First, the reason the SASS task isn't working during watch is due to the files entry pointing to the wrong location. Your current files entry points to the "css" folder, but it should point to the "scss" folder, according to what you've specified in the actual "sass" task. In other words, your entry should be: files: ['scss/*.scss'].
css: {
files: ['scss/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
}
Second, the JavaScript minification occurs during the watch whenever a SASS file changes because you have it listed here:
scripts: {
files: ['js/*.js', 'scss/*.scss'], // <-- scss is covered here
tasks: ['concat', 'uglify'],
options: {
spawn: false,
}
}
Change it to files: ['js/*.js'], instead to have the watch task kick in for JavaScript files only.
Once you address those issues, if things are slightly working you might want to expand the patterns so that it covers all files in the subdirectories for your JavaScript, CSS, SASS, etc. For example, js/*.js includes all .js files under the js folder, while js/**/*.js covers the js folder and its subfolders. You can read more under the GruntJS "globbing patterns" documentation.
EDIT: here's how the updated watch should look like...
watch: {
options: {
livereload: true
},
// css is really for Sass
css: {
files: ['scss/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
// scripts will detect js changes
scripts: {
files: ['js/**/*.js'],
tasks: ['jshint', 'concat', 'uglify'],
options: {
spawn: false,
}
}
},
As mentioned, your individual tasks might need to use the ** pattern similar to what I've done with the "scripts" entry above: js/**/*.js
I am using gruntfile for running uglify task for 2 separate modules. Both the modules are configured in the same gruntfile as:
uglify:
{
ac: {
dist: {
options: {
mangle: false, // Separate target for mangled output
report: 'min', // Reports actual minified size
banner: '<%= banner %>'
},
files: {
'dist/<%= pkg.name %>_ac.min.js': ['<%= concat.ac.dest %>']
}
},
mangled: {
options: {
mangle: true,
report: 'gzip',
banner: '<%= banner %>'
},
files: {
'dist/<%= pkg.name %>_ac.2.min.js': ['<%= concat.ac.dest %>']
}
}
},
lib: {
files: {
'dist/<%= pkg.name %>_lib.min.js': ['<%= concat.lib.dest %>']
},
mangled: {
files: {
'dist/<%= pkg.name %>_lib.2.min.js': ['<%= concat.lib.dest %>']
}
}
},
}
grunt.registerTask('ac', ['uglify:ac:dist']);
When i run the above grunt file, it runs without any error but i dont get any output. I am not sure if my way of configuring is correct.
Okay here's my answer from the limited info in the question;
The way you have your Gruntfile.js file set up it is looking for files in a concat task which you don't seem to have included. If it can't find these files it wont output anything.
My guess is that you copied some of this from the sample gruntfile.
Specifically this section ['<%= concat.ac.dest %>'] is explained in the documentation:
This tells uglify to create a file within dist/ that contains the
result of minifying the JavaScript files. Here I use <%=
concat.dist.dest %> so uglify will minify the file that the concat
task produces.
If you don't have a concat task specified or being called, there will be no output files to run uglify on so there will be no output. Either check that concat is called with grunt.registerTask('ac', ['concat', 'uglify:ac:dist']); and is producing output (if you have a tast set up) or change this to the location of the JS files you wish to uglify are.
'dist/<%= pkg.name %>_ac.min.js': ['/path/to/yourJavascriptFile.js']
Remove the dist task and have only
ac: {
options: {
mangle: false, // Separate target for mangled output
report: 'min', // Reports actual minified size
banner: '<%= banner %>'
},
files: {
'dist/<%= pkg.name %>_ac.min.js': ['<%= concat.ac.dest %>']
}
},
Hope concat.ac.dest is having the correct file name and the path. If you need to add more files you can add as
['src/input1.js', 'src/input2.js']
Fore more details refer https://github.com/gruntjs/grunt-contrib-uglify
Hope this would solve your issue.