Why doesn't the GruntJS watch for the css/ folder?
But it successfully watches for /js folder.
Manual start function by default or any separate function using grunt-cli command grunt or grunt cssmin works correctly too...
My GruntJS code is:
module.exports = function(grunt) {
// 1. Вся настройка находится здесь
var d = new Date();
var y = d.getFullYear();
var bannerText = 'Created by Andrew Dyachenko ' + y + ''
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
dist: {
options: {
banner: '/*' + bannerText + '*/\n'
},
files: {
'js/main.min.js': ['js/main.js']
}
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: 'css/',
src: ['*.css', '!*.min.css'],
dest: 'css/',
ext: '.min.css'
}]
}
},
watch: {
options: {
livereload: true
},
scripts: {
files: ['js/*.js', 'css/*.css'],
tasks: ['process']
}
}
});
// 3. Тут мы указываем Grunt, что хотим использовать этот плагин
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-newer');
// 4. Указываем, какие задачи выполняются, когда мы вводим «grunt» в терминале
grunt.registerTask('process', ['newer:uglify', 'cssmin']);
grunt.registerTask('default', ['uglify', 'cssmin', 'watch']);
};
I think my problemm was in undefined bug. But now after small rebuild, everythin is working fine.
module.exports = function(grunt) {
var d = new Date();
var y = d.getFullYear();
var bannerText = 'Created by Andrew Dyachenko ' + y + '';
grunt.initConfig({
jshint: {
files: ['js/*.js', '!js/*.min.js'],
options: {
// eqeqeq: false,
// curly: true,
// es3: true,
// es5: true,
// noempty: true,
// shadow: true,
// unused: true,
// boss: true,
// debug: true,
globals: {
jQuery: true
}
}
},
uglify: {
dist: {
options: {
banner: '/*' + bannerText + '*/\n'
},
files: [{
expand: true,
cwd: 'js/',
src: ['*.js', '!*.min.js'],
dest: 'js/',
ext: '.min.js'
}]
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: 'css/',
src: ['*.css', '!*.min.css'],
dest: 'css/',
ext: '.min.css'
}]
}
},
watch: {
options: {
livereload: true
},
files: ['<%= jshint.files %>', ['css/*.css', '!css/*.min.css']],
tasks: ['process']
}
});
grunt.loadNpmTasks('grunt-newer');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('process', ['newer:jshint', 'uglify', 'cssmin']);
grunt.registerTask('default', ['jshint', 'uglify', 'cssmin', 'watch']);
};
Related
Trying to use Javascript within an HTML file. So I am using 'replace' dependency to reference the macro of the JS file.
Since adding in the replace function in the gruntfile.js config I am getting syntax errors.
I am sure it's very simple that I am missing. Hopefully, someone can assist?
module.exports = function (grunt) {
var allJS = ['src/*.js'];
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
options: {
scripturl: true
},
files: ['gruntfile.js', allJS]
},
replace: {
normal: {
options: {
patterns: [
{
match: 'scriptmacro',
replacement: '<%= grunt.file.read("tmp/tmpmoatscript.js") %>'
},
]
},
files: [
{
expand: true,
flatten: true,
src: ['src/index.html'],
dest: 'dist'
}
]
},
clean: {
dist: ['dist']
},
uglify: {
'main': {
options: {
"banner": "",
enclose: {
window: "window",
document: "document"
},
},
files: {
'dist/min-moatscript.txt': 'src/moatscript.txt',
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-replace');
// Default task(s).
grunt.registerTask('default', ['jshint', 'clean', 'uglify','replace',]);
};
Thanks in advance
You have a mismatched parenthesis for initConfig.
For any syntax errors, you could use an IDE / go to jshint.com to find out.
module.exports = function(grunt) {
var allJS = ['src/*.js'];
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
options: {
scripturl: true
},
files: ['gruntfile.js', allJS]
},
replace: {
normal: {
options: {
patterns: [{
match: 'scriptmacro',
replacement: '<%= grunt.file.read("tmp/tmpmoatscript.js") %>'
}, ]
},
files: [{
expand: true,
flatten: true,
src: ['src/index.html'],
dest: 'dist'
}]
},
clean: {
dist: ['dist']
},
uglify: {
'main': {
options: {
"banner": "",
enclose: {
window: "window",
document: "document"
},
},
files: {
'dist/min-moatscript.txt': 'src/moatscript.txt',
}
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-replace');
// Default task(s).
grunt.registerTask('default', ['jshint', 'clean', 'uglify', 'replace', ]);
};
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
Grunt says waiting... but doesn't make changes to sass while watching. I have to run grunt on the command line every time I want it to run and change things. The thing I need it to update the most is the sass to css. But it's not working. Please help.
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// package options
express: {
server: {
options: {
port: 3000,
hostname: 'localhost',
bases: 'public' // the 'public' folder for your project
}
}
},
jshint: {
options: {
jshintrc: '.jshintrc' // jshint config file
},
all: [
'Gruntfile.js',
'js/*.js'
]
},
concat: {
basic: {
src: [
'bower_components/jquery/dist/jquery.js',
'bower_components/foundation/js/foundation/foundation.js',
'dev/js/jquery.royalslider.custom.min.js',
'dev/js/royalslider.js',
'dev/js/megamenu_plugins.js',
'dev/js/megamenu.min.js',
'dev/js/megamenu.js',
'dev/js/app.js'
],
dest: 'dev/tmp/app.js'
},
extras: {
src: [
'bower_components/modernizr/modernizr.js'
],
dest: 'dev/tmp/modernizr.js'
}
},
sass: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'public/build/css/app.min.css': 'dev/scss/app.scss'
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'dev/img/',
src: ['**/*.{png,jpg,gif}'],
dest: 'public/build/img/'
}]
}
},
uglify: {
build: {
files: {
'public/build/js/modernizr.min.js': 'dev/tmp/modernizr.js',
'public/build/js/app.min.js': 'dev/tmp/app.js'
}
}
},
clean: {
dist: [
'tmp/**',
'public/build/img/**'
]
},
watch: {
grunt: {
files: ['Gruntfile.js']
},
css: {
files: ['scss/*.scss'],
tasks: ['newer:sass'],
options: {
spawn: false
}
},
js: {
files: [
'js/*.js'
],
tasks: ['newer:concat', 'newer:uglify'],
options: {
livereload: true,
atBegin: true
}
},
imagemin: {
files: [
'img/**'
],
tasks: ['newer:imagemin'],
options: {
livereload: true,
atBegin: true
}
}
}
});
// Load tasks
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-notify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-express');
grunt.loadNpmTasks('grunt-newer');
// Register default tasks
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build','watch']);
}
I want to have a gruntfile with 2 tasks: less (compiles all less files) and watch (listens to changes and re-compiles the changed file).
I have the following Gruntfile.js:
module.exports = function(grunt) {
var files = [
{
expand: true,
cwd: 'media/less',
src: ['*.less'],
dest: 'media/css/',
ext: '.css'
},
{
expand: true,
cwd: 'media/less/vendor',
src: ['*.less'],
dest: 'media/css/vendor/',
ext: '.css'
},
{
expand: true,
cwd: 'media/admin/less',
src: ['*.less'],
dest: 'media/admin/css/',
ext: '.css'
}
];
grunt.initConfig({
less: {
development: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: files
},
production: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: files
}
},
watch: {
styles: {
files: ['media/**/*.less'],
tasks: ['less:development'],
options: {
nospawn: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less:development']);
};
The less task runs correctly without any problems. The watch task however listens to changes, but re-compiles all files when one is changed. I suspect it's something to do with how I set up my less task, because I want my less file list to be dynamic and not to add each file manually.
As per this answer grunt should already support this, but I'm unsure how.
Ended up using the watch event and overriding the files property of the less task. Here's my final code:
module.exports = function(grunt) {
var files = [
{
expand: true,
cwd: 'media/less',
src: ['*.less'],
dest: 'media/css/',
ext: '.css',
extDot: 'last'
},
{
expand: true,
cwd: 'media/less/vendor',
src: ['*.less'],
dest: 'media/css/vendor/',
ext: '.css',
extDot: 'last'
},
{
expand: true,
cwd: 'media/admin/less',
src: ['*.less'],
dest: 'media/admin/css/',
ext: '.css',
extDot: 'last'
}
];
grunt.initConfig({
less: {
development: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: files
},
production: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: files
}
},
watch: {
styles: {
files: ['media/**/*.less'],
tasks: ['less:development'],
options: {
nospawn: true
}
}
}
});
grunt.event.on('watch', function(action, filepath){
// ignore include files, TODO: have naming convention
// if an include file has been changed, all files will be re-compiled
if(filepath.indexOf('.inc.') > -1)
return true;
// might not be the most efficient way to do this
var srcDir = filepath.split('/');
var filename = srcDir[srcDir.length - 1];
delete srcDir[srcDir.length - 1];
srcDir = srcDir.join('/');
var destDir = srcDir.replace(/less/g, 'css');
grunt.config('less.development.files', [{
src: filename,
dest: destDir,
expand: true,
cwd: srcDir,
ext: '.css',
extDot: 'last'
}]);
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less:development']);
};
I'm unsure what you mean with the current title of your question Grunt watch less on changed file only. Do you mean that is a problem? That's the expected behavior of a watch task, it will watch the files specified for changes and run the tasks you specified - in this case the LESS compilation.
I did some changes to your file. Some of it was simplified, some was changed keeping flexibility and expandability of the script in mind.
First install underscore as a dependency, by running:
npm install underscore --save-dev
Then do the following changes to your Gruntfile.js:
module.exports = function(grunt) {
var _ = require('underscore');
var files = {
app : {
'<%= path.styles.css %>/styles.css' : '<%= path.styles.less %>/*.less'
},
vendor : {
'<%= path.styles.css %>/styles-vendor.css' : '<%= path.styles.vendor %>/*.less'
},
admin : {
'<%= path.styles.css %>/styles-admin.css' : '<%= path.styles.admin %>/*.less'
}
}
function all() {
'use strict';
var allfiles = {},
i = {};
for (i in files) {
_.extend(allfiles, files[i]);
}
return allfiles;
}
grunt.initConfig({
path : {
media : 'media',
styles : {
css: 'media/css',
less: 'media/less',
admin: 'media/admin/less',
vendor: '<%= path.styles.less %>/vendor'
}
},
less: {
development: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: (all())
},
production: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: (all())
}
},
watch: {
styles: {
files: ['<%= path.media %>/**/*.less'],
tasks: ['less:development'],
options: {
nospawn: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
// run several tasks as default (handy for complex projects)
grunt.registerTask('dist', [ // run with 'grunt dist'
'less:production'
]);
grunt.registerTask('dev', [ // default, will run with 'grunt' only
'less:development'
]);
grunt.registerTask('default', 'dev');
};
If what you want is to actually compile the sets of files separately (files.app, files.vendor & files.admin), you might need to split the task some more, like so:
less: {
app: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: files.app
},
vendor: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: files.vendor
},
admin: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: files.admin
},
development: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: (all())
},
production: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: (all())
}
},
watch: {
all: {
files: ['<%= path.media %>/**/*.less'],
tasks: ['less:development'],
options: {
nospawn: true
}
},
app : {
files: ['<%= path.styles.less %>/*.less'],
tasks: ['less:app'],
options: {
nospawn: true
}
},
vendor : {
files: ['<%= path.styles.vendor %>/*.less'],
tasks: ['less:vendor'],
options: {
nospawn: true
}
},
admin : {
files: ['<%= path.styles.admin %>/*.less'],
tasks: ['less:admin'],
options: {
nospawn: true
}
}
}
Then you could then run either of these:
grunt watch:app
grunt watch:vendor
grunt watch:admin
You can always to choose to run the tasks directly, once:
grunt less:app
grunt less:vendor
grunt less:admin
Hope this helps! Please note that I haven't tested this.