I am using 'cssmin' and 'sass' grunt task separately, Is it possible to run them one after other automatically, when I can anything in my file.
cssmin: {
target: {
files: [{
cwd: srcCss,
src: ['**/*.css', '*.css'],
dest: buildCss
}]
}
},
sass: {
target: {
files: [{
cwd: srcScss,
src: ['**/*.scss', '*.scss'],
dest: srcCss
}]
}
}
This can be done easily: You need to use watch plugin,
npm install grunt-contrib-watch
grunt.loadNpmTasks('grunt-contrib-watch');
3.
grunt.initConfig({
watch: {
scripts: {
files: ['lib/*.js'],
tasks: ['jshint'],
options: {
spawn: false,
},
},
},
jshint: {
all: {
src: ['lib/*.js'],
},
},
});
// Default task(s).
grunt.registerTask('default', 'watch');
Now Just run grunt in cmd.
I have several files in my LESS folder with a underscore before the file name. Example:
_variables.less
_colors.less
These files only store data used on other .less files, so they should not have the .css file generated.
Is there any way to set a "ignore" on my gruntfile.js for this kind of file?
Here is my current setup:
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
uglify: {
options: {
manage: false
},
my_target: {
files: [{
expand: true,
cwd: 'assets/js',
src: '*.js',
dest: 'assets/js/min'
}]
},
},
less: {
components: {
options: {
imports: {
reference: [
"assets/less/**/*.less",
]
}
},
files: [{
expand: true,
cwd: 'assets/less',
src: [
'input.less'
],
dest: 'assets/css/',
ext: '.css'
}]
}
},
watch: {
styles: {
files: ['assets/less/**/*.less', 'assets/js/*.js'],
tasks: ['less', 'newer:uglify'],
options: {
nospawn: truetasks
}
}
}
});
grunt.loadNpmTasks('assemble-less');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('default', ['less', 'watch', 'newer:uglify']);
};
I have a Gruntfile.js set up with Post CSS running autoprefixer, mqpacker, and cssnano at the moment.
I have a default grunt build that will work to build everything for deployment. It includes the call to postcss, like so:
grunt.registerTask('default', ['sass', 'postcss', 'concat', 'uglify', 'browserSync', 'watch']);
The issue is I also want the default grunt build process to be for everyday dev work - one that omits (turns off) the media query compilation and minification from Post CSS.
However, I want to leave autoprefixer on. This wasn't a problem with grunt when autoprefixer ran as a separate program, we just make a new grunt.registerTask
Now that autoprefixer now runs inside of Post CSS, how do we make these different build processes work, without commenting out the individual plugins in CSS (clumsy) and restarting grunt every time we want to do a different build?
My Gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Sass to CSS
sass: {
app: {
files: [{
expand: true,
cwd: 'scss',
src: ['**/*.scss'],
dest: 'css/src',
ext: '.css'
}]
},
options: {
sourceMap: true,
outputStyle: 'expanded',
imagePath: "../"
}
},
// Post CSS (autoprefixer, mqpacker, cssnano)
postcss: {
// Configuration
options: {
map: true,
// Load plugins
processors: [
// Runs Post CSS Autoprefixer
require('autoprefixer')({browsers: ['last 2 versions']}),
// require('postcss-import')(),
require('css-mqpacker')(),
require('cssnano')({
autoprefixer: false,
safe: true,
sourcemap: false
})
]
},
// Operate on compiled Sass, write global.css
dist: {
src: 'css/src/global-sass.css',
dest: 'css/global.min.css'
}
},
// JS Concatenation Plugin
concat: {
dist: {
src: [
'js/libs/*.js', // All JS in the libs folder
'js/src/*.js' // All JS in the src folder
],
dest: 'js/scripts.js'
}
},
// JS Minification
uglify: {
build: {
src: 'js/scripts.js',
dest: 'js/scripts.min.js'
}
},
// Image Minification -- run on demand w/ `grunt imagemin`
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'img/src/',
src: ['**/*.{png,jpg,gif}'],
dest: 'img/'
}]
}
},
// BrowserSync
browserSync: {
dev: {
bsFiles: {
src : [
'css/*.css',
'**/*.{html}'
]
},
options: {
watchTask: true,
server: './'
}
}
},
// Watch
watch: {
sass: {
files: ['scss/{,*/}*.{scss,sass}'],
tasks: ['sass', 'postcss']
},
js: {
files: ['js/src/*.js'],
tasks: ['concat', 'uglify']
},
options: {
livereload: false,
spawn: false
}
},
});
// Loads Grunt Tasks
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
// Default Task
grunt.registerTask('default', ['sass', 'postcss', 'concat', 'uglify', 'browserSync', 'watch']);
};
I would split them into subtasks so that I could call them separately in different registered tasks:
// Post CSS (autoprefixer, mqpacker, cssnano)
postcss: {
prefix: {
options: {
map: true,
// Load plugins
processors: [
require('autoprefixer')({browsers: ['last 2 versions']})
]
}
dist: {
src: 'css/src/global-sass.css',
dest: 'css/global.min.css'
}
},
pack: {
options: {
map: true,
// Load plugins
processors: [
require('css-mqpacker')()
]
}
dist: {
src: 'css/src/global-sass.css',
dest: 'css/global.min.css'
}
},
nano: {
options: {
map: true,
// Load plugins
processors: [
require('cssnano')({
autoprefixer: false,
safe: true,
sourcemap: false
})
]
}
dist: {
src: 'css/src/global-sass.css',
dest: 'css/global.min.css'
}
}
}
and then
grunt.registerTask('default', ['sass', 'postcss:prefix', 'postcss:pack', 'postcss:nano', 'concat', 'uglify', 'browserSync', 'watch']);
or whichever way suits your project.
Hope it helps
I am trying to run grunt in order to get SASS and a few other things to compile my project (that someone else created), however I keep getting the following error:
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
I do not understand which "default" task it is is referring to. The grunt file I have inherited is as follows:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dev: {
src: ['www/_assets/js/vendor-concat/*.js', 'www/_assets/js/*.js', '!www/_assets/js/prototype.js', '!www/_assets/js/scripts.js', '!www/_assets/js/scripts.min.js'],
dest: 'www/_assets/js/scripts.js'
}
},
uglify: {
dist: {
files: {
'www/_assets/js/scripts.min.js': ['www/_assets/js/scripts.js']
}
}
},
jshint: {
files: ['Gruntfile.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
modernizr: {
dist: {
// [REQUIRED] Path to the build you're using for development.
"devFile" : "www/_assets/js/vendor/modernizr-2.7.1.js",
// [REQUIRED] Path to save out the built file.
"outputFile" : "www/_assets/js/vendor/modernizr-custom.js"
}
},
imageoptim: {
dev: {
src: ['www/_assets/img']
}
},
sass: {
dev: {
options: {
includePaths: ['www/_assets/scss'],
outputStyle: 'compressed',
sourceMap: true
},
files: {
'www/_assets/css/main.css' : 'www/_assets/scss/main.scss',
'www/_assets/css/main-ie8.css' : 'www/_assets/scss/main-ie8.scss'
}
}
},
assemble: {
options: {
flatten: false,
expand: true,
assets: 'www/_assets',
layout: 'default.hbs',
layoutdir: 'www/_templates/layouts',
partials: ['www/_templates/partials/*.hbs'],
data: ['www/_templates/data/*.json']
},
dev: {
files: [
{expand: true, cwd: 'www/_templates/pages/', src: '**/*.hbs', dest: 'www/', ext: '.html'}
]
}
},
watch: {
options: {
livereload: true,
spawn: false
},
css: {
files: ['www/_assets/scss/**/*.scss'],
tasks: ['sass']
},
js: {
files: ['www/_assets/js/**/*.js', '!www/_assets/js/scripts.min.js', '!www/_assets/js/scripts.js'],
tasks: ['jshint', 'concat:dev']
},
hbs: {
files: ['www/_templates/{,*/}*.hbs', 'www/_templates/{,*/*/}*.hbs', 'www/_templates/{,*/*/*/}*.hbs'],
tasks: ['assemble']
},
html: {
files: ['www/email.html']
}
},
copyto: {
prototype: {
files: [
{cwd: 'www/', src: ['**/*'], dest: 'prototype/'}
],
options: {
ignore: [
'www/_assets/scss{,/**/*}',
'www/_assets/js{,/**/*}',
'!www/_assets/js/vendor{,/**/*}',
'!www/_assets/js/scripts.min.js',
'!www/_assets/js/prototype.js',
'www/_templates{,/**/*}',
'www/z-backups{,/**/*}',
'www/_assets/css/*.map'
]
}
},
beta: {
files: [
{cwd: 'prototype/_assets/', src: ['**/*'], dest: '_beta-sln/Beta/src/SFA.as.Web.Candidate/Content/_assets/'}
],
options: {
ignore: [
'prototype/_assets/video{,/**/*}',
'prototype/_assets/js/prototype.js'
]
}
},
sprint: {
files: [
{cwd: 'prototype/', src: ['**/*'], dest: 'sprint/'}
]
},
dist: {
files: [
{cwd: 'www/', src: ['**/*'], dest: 'dist/'}
],
options: {
ignore: [
'www/_assets/scss{,/**/*}',
'www/_assets/css/*.map',
'www/_assets/video{,/**/*}',
'www/_assets/js/plugins{,/**/*}',
'www/_assets/js/interactions.js',
'www/_assets/js/scripts.js',
'www/_templates{,/**/*}',
'www/*.html',
'!www/index.html',
'www/z-backups{,/**/*}'
]
}
}
},
clean: {
prototype: {
src: [ 'prototype/' ]
},
sprint: {
src: [ 'sprint/' ]
},
dist: {
src: [ 'dist/' ]
}
},
replace: {
map: {
src: ['www/_assets/css/*.css'],
overwrite: true,
replacements: [{
from: 'sourceMappingURL=main.css.map',
to: 'Map removed'
},{
from: 'sourceMappingURL=main-ie8.css.map',
to: 'Map removed'
}]
},
scripts: {
src: ['www/apprentice/*.html', 'www/test/apprentice/*.html', 'www/trainee/*.html', 'www/employer/*.html', 'www/*.html'],
overwrite: true,
replacements: [{
from: 'scripts.js',
to: 'scripts.min.js'
}]
}
},
prettify: {
options: {
indent: 2,
wrap_line_length: 78,
brace_style: 'expand',
},
// Specify a number to padcomments
dist: {
files: [
{expand: true, cwd: 'dist/', src: ['apprentice/*.html', 'trainee/*.html', 'employer/*.html', '*.html'], dest: 'dist/', ext: '.html'}
]
},
prototype: {
files: [
{expand: true, cwd: 'prototype/', src: ['apprentice/*.html', 'trainee/*.html', 'employer/*.html', '*.html', '!pattern-library.html'], dest: 'prototype/', ext: '.html'}
]
}
},
devUpdate: {
main: {
options: {
updateType: 'report', //just report outdated packages
reportUpdated: false, //don't report already updated packages
semver: true, //use package.json semver rules when updating
packages: { //what packages to check
devDependencies: true, //only devDependencies
dependencies: false
},
packageJson: null //find package.json automatically
}
}
},
browserSync: {
dev: {
bsFiles: {
src : [
'www/_assets/css/*.css',
'www/_assets/js/scripts.js',
'www/**/*.html'
]
},
options: {
ghostMode: {
clicks: true,
scroll: true,
links: true,
forms: true
},
watchTask: true,
server: {
baseDir: "www"
}
}
}
},
connect: {
server: {
options: {
port: 7000,
base: 'www',
livereload: true,
open: true
}
}
},
uncss: {
offline: {
options: {
// csspath : 'www/_assets/css/',
// urls : ['http://localhost:/mypage', '...'], // Deprecated
timeout : 1000,
},
files: {
'www/offline/offline.css': ['www/offline/maintenance.html']
}
}
}
});
[
'assemble',
'grunt-modernizr',
'grunt-contrib-imagemin',
'grunt-imageoptim',
'grunt-contrib-uglify',
'grunt-contrib-jshint',
'grunt-sass',
'grunt-uncss',
'grunt-criticalcss',
'grunt-contrib-concat',
'grunt-text-replace',
'grunt-contrib-watch',
'grunt-copy-to',
'grunt-contrib-clean',
'grunt-contrib-compress',
'grunt-pngmin',
'grunt-browser-sync',
'grunt-dev-update',
'grunt-contrib-connect',
'grunt-prettify'
].forEach(function (task) {
grunt.loadNpmTasks(task);
});
grunt.registerTask('images', ['imageoptim']);
grunt.registerTask('modern', ['modernizr']);
grunt.registerTask('offline', ['uncss:offline']);
grunt.registerTask('dev', ['jshint', 'concat:dev', 'sass', 'assemble', 'connect', 'watch']);
grunt.registerTask('sync', ['jshint', 'concat:dev', 'sass', 'assemble', 'browserSync', 'watch']);
grunt.registerTask('proto', ['uglify:dist', 'replace:map', 'clean:prototype', 'replace:scripts', 'copyto:prototype', 'prettify:prototype']);
grunt.registerTask('sprint', ['clean:sprint', 'copyto:sprint']);
grunt.registerTask('dist', ['uglify:dist', 'replace:map', 'clean:dist', 'replace:scripts', 'copyto:dist', 'prettify:dist']);
grunt.registerTask('beta', ['copyto:beta']);
};
As I have not created this myself, I am reluctant to go ahead and break it but is there anything there which stands out? I have seen similar questions but as the grunt files need to vary it is difficult to find the correct answer for this.
Many thanks!
Since file doesn't have default task you have to either create it or run grunt with one of defined tasks:
> grunt dev
or add default task in your Gruntfile.js
grunt.registerTask('default',['dev']);
please refer to http://gruntjs.com/creating-tasks for more information
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',
},