Grunt twice for the same task - gruntjs

I would like to run the jshint task twice in GruntJS, but with different options each time.
How would I go about doing something like that?
Currently, my Gruntfile.js looks like this:
'use strict';
module.exports = function(grunt) {
var opts = {
pkg: grunt.file.readJSON('package.json'),
jasmine_node: {
matchall: true,
forceExit: true
},
jshint: {
files: [
'gruntfile.js',
'src/**/*.js', '!src/static/bin', '!src/static/js/libs/*.js',
'test/spec/**/*.js'
],
options: {
jshintrc: '.jshintrc'
}
}
};
grunt.initConfig(opts);
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-jasmine-node');
grunt.registerTask('default', ['jshint', 'jasmine_node']);
grunt.registerTask('travis', ['jshint', 'jasmine_node']);
};
And I would probably want it to be something like this:
var jshint: {
files: [
'gruntfile.js',
'src/**/*.js', '!src/static/**',
'test/spec/**/*.js'
],
options: {
jshintrc: '.jshintrc'
}
}
var jshint2 = {
files: [
'src/static/**/*.js',
'!src/static/bin',
'!src/static/js/libs/*.js'
],
options: {
jshintrc: '.jshintrc-browser'
}
};
So that I can pick different options for the front-end javascript and the NodeJS javascript, since linting should be different for each of those environments

jshint is a multitask. So it is possible to have to following config:
jshint: {
browser: {
files: [
'src/static/**/*.js',
'!src/static/bin',
'!src/static/js/libs/*.js'
],
options: {
jshintrc: '.jshintrc-browser'
}
},
node: {
files: [
'gruntfile.js',
'src/**/*.js', '!src/static/**',
'test/spec/**/*.js'
],
options: {
jshintrc: '.jshintrc'
}
}
}
To run the browser version:
grunt jshint:browser.
To run to node version:
grunt jshint:node.
Running just:
grunt jshint
will run both.
Of course, you probably will want to trigger them via another task, e.g:
grunt.registerTask('build', ['clean:all', 'jshint:browser', ...]);
You want want to read the section Specifying JSHint options and globals for more info.

Related

Issues with Postcss config in gruntfile

Quick question, trying to get postcss to work and keep getting
"SyntaxError: /Users/todd.kidder/Documents/sitecore-site/Gruntfile.js:40
>> });"
error when I go to run the default task.
I'm sure the error is obvious but totally new at this, I'm a css grunt by trade.
Appreciate any help I can get on this.
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uncss: {
dist: {
files: {
'cleaned-css/tidy.css': ['index.html']
}
}
},
cssnano: {
options: {
sourcemap: true
},
dist: {
files: {
'cleaned-css/tidy.css': 'cleaned-css/tidy.css'
}
}
},
postcss: {
options: {
map: true,
processors: [
require('autoprefixer-core')({
browsers: 'last 2 version'
}).postcss,
]
},
dist: {
expand: true,
flatten: true,
src: 'cleaned-css/tidy.css'
}
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-cssnano');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('autoprefixer');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['uncss', 'postcss']);
grunt.registerTask('build', ['uncss', 'postcss', 'cssnano']);
};
i think the problem is a simple typo issue.
Please try this one:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uncss: {
dist: {
files: {
'cleaned-css/tidy.css': ['index.html']
}
}
},
cssnano: {
options: {
sourcemap: true
},
dist: {
files: {
'cleaned-css/tidy.css': 'cleaned-css/tidy.css'
}
}
},
postcss: {
options: {
map: true,
processors: [
require('autoprefixer-core')({
browsers: 'last 2 version'
}).postcss,
]
},
dist: {
expand: true,
flatten: true,
src: 'cleaned-css/tidy.css'
}
}
})
};
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-cssnano');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('autoprefixer');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['uncss', 'postcss']);
grunt.registerTask('build', ['uncss', 'postcss', 'cssnano']);
Hope that helps.
best regards, micha

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 Uglify Loop

I'm still rather new to Grunt so maybe someone with more experience can help me with this. For some reason anytime I run grunt watch the uglify task is getting executed multiple times so my scripts.min.js file is getting compiled multiple times.
This is what my Gruntfile.js currently looks like:
'use strict';
module.exports = function(grunt) {
// Show elapsed time
require('time-grunt')(grunt);
// Comment out any unused components
var jsFiles = [
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/button.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js',
'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js',
'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js',
'assets/js/*.js'
];
// Configure tasks.
grunt.initConfig({
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'assets/css/main.min.css': 'assets/sass/app.scss',
'assets/css/custom-login.min.css': 'assets/sass/_login.scss',
'assets/css/magnific.min.css': 'assets/sass/plugins/magnific/magnific.scss'
}
}
},
uglify: {
dist: {
files: {
'assets/js/scripts.min.js': [ jsFiles ]
}
}
},
watch: {
sass: {
files: [ 'assets/sass/*.scss' ],
tasks: [ 'sass' ]
},
js: {
files: [ jsFiles ],
tasks: [ 'uglify' ]
}
}
});
// Load tasks.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
// Register tasks.
grunt.registerTask('default', [
'watch',
'sass',
'uglify'
]);
};
Anyone have any ideas why the uglify task is executing multiple times?
The problem is that you have all the js files to inspect and minify. The main problem is:
'assets/js/*.js'
You are compressing all the js files, but also you are watching then, so when you uglify all the js files, they changed, and for that reason the watch task executes and minify again....and that's the infinite loop.
You should change your gruntfile, for example removing scripts.min.js of the assets folder, or removimg assets/js/*.js and adding manually all your js files. I recommend apply the second one.
'use strict';
module.exports = function(grunt) {
// Show elapsed time
require('time-grunt')(grunt);
// Comment out any unused components
var jsFiles = [
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/button.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js',
'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js',
//'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js',
'assets/vendor/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js'
];
// Configure tasks.
grunt.initConfig({
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'assets/css/main.min.css': 'assets/sass/app.scss',
'assets/css/custom-login.min.css': 'assets/sass/_login.scss',
'assets/css/magnific.min.css': 'assets/sass/plugins/magnific/magnific.scss'
}
}
},
uglify: {
dist: {
files: {
'assets/js/scripts.min.js': [ jsFiles ]
}
}
},
watch: {
sass: {
files: [ 'assets/sass/*.scss' ],
tasks: [ 'sass' ]
},
js: {
files: [ jsFiles ],
tasks: [ 'uglify' ]
}
}
});
// Load tasks.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
// Register tasks.
grunt.registerTask('default', [
'watch',
'sass',
'uglify'
]);
};
Regards.

jshint grunt targets generate message: 0 files linted. Please check your ignored files

I have multiple jshint configurations in my gruntfile.
I tested each configuration, and it works great.
However, when I define a target in the gruntfile for each configuration, jshint stops working and all I can see is :
0 files linted. Please check your ignored files.
This is how my jshint configuration looks like with targets:
jshint: {
backend: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'server.js',
'*.js',
'backend/{,*/}*.js'
]
},
test: {
options: {
jshintrc: 'test.jshintrc'
},
all: [
'test/{,*/}*.js'
]
}
}
For multiple tasks changing:
'all' : {...}
to
'files': { src: [...] }
should fix it. It would seem that 'all' is a shorthand for a single task, with multiple tasks, jshint will be looking for files in files->src ie:
backend: {
options: {
jshintrc: '.jshintrc'
},
'files': {
'src': [
'Gruntfile.js',
'server.js',
'*.js',
'backend/{,*/}*.js'
]
}
},
test: {
options: {
jshintrc: 'test.jshintrc'
},
'files': {
'src': [
'test/{,*/}*.js'
]
}
}
My team found out this works, we are using it on a project of ours.
Even though I don't recommend using this method, it taught me something about how grunt works, and how you can programatically invoke tasks and change options at runtime so I find it relevant.
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'<%= yeoman.app %>/scripts/{,*/}*.js'
],
backend: [
'server.js'
]
},
....
grunt.registerTask('backend', function() {
grunt.config.set('jshint.options.jshintrc', '.backendhintrc');
grunt.task.run('jshint:backend');
});

Grunt outputs an empty .js-file after concatting

The output of the Gruntfile is an empty file in public/assets/app.js. The Sass-part works fine, but the JS-part doesn't.
//Gruntfile
module.exports = function(grunt) {
//Initializing the configuration object
grunt.initConfig({
// Task configuration
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'./public/assets/app.css': './app/assets/scss/style.scss'
},
noCache: true
}
},
concat: {
options: {
separator: ';',
},
dist: {
src: [
'./app/bower/jquery/jquery.js',
'./app/assets/js/script.js'
],
dest: './public/assets/app.js',
},
},
uglify: {
options: {
mangle: false
},
dist: {
files: {
'./public/assets/app.js': './public/assets/app.js',
}
},
},
jshint: {
all: ['Gruntfile.js', './public/assets/app.js']
},
watch: {
js: {
files: [
'./app/assets/bower/*.js',
'./app/assets/js/*.js'
],
tasks: ['jshint', 'concat', 'uglify'],
options: {
livereload: false
}
},
sass: {
files: ['./app/assets/scss/*.scss'],
tasks: ['sass'],
options: {
livereload: false
}
}
}
});
// Plugin loading
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
// Task definition
grunt.registerTask('default', ['sass', 'jshint', 'concat', 'uglify', 'watch']);
};
But I can't find out what is wrong. Even JShint isn't showing errors.
Structure looks like this: https://www.dropbox.com/s/y0t2tu0asotz0ex/Screenshot%202013-12-20%2020.49.54.png
Taking another look at your Gruntfile and directory structure, I think you have the folders specified incorrectly, You specify the source as being ./app/..., but if your Gruntfile is in that directory (app), then you would have to be running your grunt tasks from there, meaning it would be looking for app/app/... (because it's relative to the current directory). Try this:
concat: {
options: {
separator: ';',
},
dist: {
src: [
'bower/jquery/jquery.js',
'assets/js/script.js'
],
dest: 'public/assets/app.js',
},
},
My solution is set correct filepath: Scripts/libs/Timer.js - correct, /Scripts/libs/Timer.js - empty file
Scripts is a folder into my project.
Project/Scripts/libs/Timer.js - full path.
when I set this path:
Scripts/libs/Timer.js - file isn't empty, when /Scripts/libs/Timer.js - file is empty.
concat: {
options:{
// define a string to put between each file in the concatenated output
separator: '\n;'
},
own_scripts: {
//project-files
src: [
"Scripts/application/app.js",
"Scripts/application/Controllers/*.js",
"Scripts/application/Directives/*.js",
"Scripts/application/Filters/*.js",
"Scripts/application/Services/*.js"
],
dest: 'dist/scripts-concat.js'
}
maybe you should do this:
dist: {
src: [
'app/bower/jquery/jquery.js',
'app/assets/js/script.js'
],
dest: 'public/assets/app.js',
},

Resources