Please i am not sure if i misunderstood what grunt is for. I was expecting to write .scss files and grunt take what i write in sass and update them in my .css file. I learnt to configure my grunfile.js here . However, after running grunt watch , grunt keeps watching and excute my .scss file when ever i change it. However, contrary to my expectation, it does not update my .css file. Below is my gruntfile.js
module.exports = function(grunt) {
grunt.initConfig ({
sass: {
dist: {
files: {
'public/stylesheets/style.css' : 'sass/style.scss'
},
options: {
loadPath: ['bower_components/foundation-apps/scss']
}
}
},
watch: {
source: {
files: ['**/*.sass','**/*.scss'],
tasks: ['sass'],
options: {
livereload: true, // needed to run LiveReload
}
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
In my page, i only reference the style.css and expect it to be updated with my .scss content. What am i missing please? Any help would be appreciated.
Try to add watch to the default task:
grunt.registerTask('default', ['watch', 'sass']);
Related
I have a Grunt files as follows,
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
'uglify': {
options: {
preserveComments: 'some',
},
my_target: {
files: {
'site/assets/js/js_code.js': [
/* Libs */
'/js/libs/jquery_2.2.4.min.js',
'/js/libs/underscore_1.8.3.min.js',
'/js/libs/backbone_1.3.3.min.js',
/* Plugins */
'/js/plugins/dropzone.min.js',
'/js/plugins/jquery.magnific-popup.min.js',
'/js/plugins/jquery.validate.min.js',
/* Build JS Functions */
'/js/functions.js',
'/js/builder.js',
]
}
}
},
'sass': {
dist: {
options: {
style: 'expanded',
compass: true,
},
files: {
'assets/css/styles.css': '/scss/styles.scss',
} //End of Files
} //End of Dist.
}, //End of SASS
watch: {
'JS': {
files: ['/js/*.js'],
tasks: ['uglify'],
options: { spawn: false },
},
'Scss': {
files: ['/scss/*.scss'],
tasks: ['sass'],
options: { spawn: false },
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
};
What I can not work out, and I have done lots of research but cant seems to find an answer, is how to set up uglify to have more than one task.
I know I can set up more than one file target but I dont want my watch to running these. So I want to be setup a 'libs.js', 'plugins.js' and something like 'my_code.js'. But I don't want the libs and plugins to be run each time my code is edited/updated. But what to be able to set it up in a way so that I can run something like, grunt uglify-libs.
Is that doable?
Many thanks
UPDATE
As per comments below, I try to explain in more detail.
Right now, I run grunt watch Which returns one output file.
I want to change this to have three output files, one for the libs files, one for the plugins and the other would be the code I write.
So when I run Grunt watch, that would only watch the files in my code but not any of the libs or plugins files.
Then I want to be able to run, Grunt uglify-libs, this would then make the libs file.
Same goes for the plugins, but something like, Grunt uglify-plugs.
So basically I want three uplify tasks but only one of them is run within the watch function.
Hope that help explain more.
Many thanks.
If i understood you right, you want to use one grunt-command to start multiple tasks. You can do this by creating a "parent" tasks, who calls multiple sub-tasks like this:
grunt.registerTask('uglify-libs', ['sass', 'uglify']);
I want to create a common top-level Gruntfile.js configured to watch over less file change. When the less file changes, I want to compile it to css and then livereload the css file in browser. I have the functionality working but I have to duplicate most of code in Gruntfile.js for every project. So I was thinking if there is some way I can create a common Gruntfile.js and include/import it in different projects.
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
options: {
compress: true
},
compile: {
extend: true,
src: 'less/**/project.less',
dest: 'css/project.css',
ext: '.css'
}
},
watch : {
less : {
files : ['less/**/*.less'],
tasks : ['less']
},
css : {
files : ['css/*.css'],
options : {
livereload: true,
spawn : false
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
};
I solved the problem using grunt plugin - 'gruntfile'. It lets you import top-level Gruntfile.js to be included in other Gruntfiles.
I set parameters dynamically of parent Gruntfile from within other gruntfiles.
You can find more about the plugin and usage examples on : https://github.com/shama/gruntfile
I've the following Grunfile.js File:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/build/style.css': 'css/style.scss'
}
}
},
watch: {
stylesheets: {
files: ['css/*.scss'],
tasks: ['newer:sass']
}
}
});
// Load the plugin that compiles sass
grunt.loadNpmTasks('grunt-contrib-sass');
// watch for, and run grunt if files change
grunt.loadNpmTasks('grunt-contrib-watch');
// Plugin for Grunt tasks to run with newer files only.
grunt.loadNpmTasks('grunt-newer');
// Grunt Tasks:
grunt.registerTask('default', ['newer:sass']);
};
After running grunt watch and saving my scss File, the console output is the following:
Running "watch" task
Waiting...
>> File "css\style.scss" changed.
Running "newer:sass" (newer) task
Running "newer:sass:dist" (newer) task
Running "sass:dist" (sass) task
File css/build/style.css created.
Running "newer-postrun:sass:dist:1:D:\xampp\htdocs\grunt-test\node_modules\grunt-newer\.cache" (newer-postrun) task
Done, without errors.
The problem is, the .scss file is compiled every time. Even if there was no change.
I don't understand why grunt is running 3 tasks (newer:sass, newer:sass:dist, sass:dist), instead of only running the task defined under watch (newer:sass).
Hope someone has an idea to fix this. :)
I'm not positive this is the problem, but try specifying that you don't want to run all of sass, just sass:dist. So try: grunt.registerTask('default', ['newer:sass:dist']);
I have an app written in Coffeescript. My grunt.js file looks like this:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: {
test: {
files: [{
src: ['.tmp']
}]
}
},
coffee: {
compileScripts: {
expand: true,
flatten: true,
src: '*/*.coffee',
dest: '.tmp/scripts',
ext: '.js'
},
},
jst: {
compile: {
files: {
'.tmp/scripts/templates.js': ['scripts/**/*.ejs']
}
}
},
watch: {
all: {
options: {
livereload: true,
spawn: false
},
files: ['scripts/*.coffee', 'scripts/*.ejs', 'index.html'],
tasks: ['compile'],
}
},
connect: {
server: {
options: {
port: 8000,
hostname: 'localhost',
open: true,
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-contrib-jst');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('compile', ['clean', 'coffee', 'jst']);
grunt.registerTask('default', ['compile', 'connect', 'watch']);
}
After much tinkering, I finally got the 'watch' working where my JS files are live reloading, but I'm not clear on what goes in the 'files' section of the watch task? Did I do it right?
Do I have to watch the coffeescript files only? Or do I also have to watch index.html so that if one of the coffeescript files change, the index.html will refresh and reload the new JS? (All of my JS files are scripts in my index.html.)
The files property of the watch task contains a list of file patterns to watch and perform some action on when changed (most commonly run certain tasks).
The tasks property contains the tasks you want to run when the corresponding files have been changed.
Any target which has the livereload options configured on it will feed the files as they are changed to the live reload server. So if you have *.coffee files, they will be fed to the live reload server upon change. The live reload server only knows how to interpret js, css files so a .coffee file would refresh the entire page, instead of just the javascript.
The tasks property is optional with the watch task so a common solution to better configuring the live reload is this:
watch: {
options: { spawn: false },
all: {
files: ['scripts/*.coffee', 'scripts/*.ejs'],
tasks: ['compile'],
},
livereload: {
options: { livereload: true },
files: ['.tmp/**/*.{html,js,css}']
}
},
So as your compile task runs it will trigger the watch:livereload target and live reload by feeding the correct files.
Regarding the index.html, in your instance you probably don't need to watch that file within the watch:all target. As it doesn't have any tasks that do any building from it (at least from the config I see above).
I can't seem to get my gruntfile to compile my less files from bootstrap, here is my gruntfile:
module.exports = function(grunt) {
// Configuration goes here
grunt.initConfig({
less: {
options: {
paths: ["public/bower_components/bootstrap/less"]
},
files: {
"public/css/bootstrap.css" : "public/bower_components/bootstrap/less/bootstrap.less"
}
}
});
// Load plugins here
grunt.loadNpmTasks("grunt-contrib");
grunt.loadNpmTasks("grunt-contrib-less");
// Define your tasks here
};
When I run grunt less I get
Running "less:files" (less) task
Done, without errors.
Bootstrap has it's own grunt file that comes with its bower install, I don't suppose it would cause some sort of conflict? I have triple checked my paths and they are fine.
EDIT: my folder structure:
Thanks
My grunt less config has blocks for the development and production targets. Does this work?
module.exports = function(grunt) {
// Configuration goes here
grunt.initConfig({
less: {
development: {
options: {
paths: ["public/bower_components/bootstrap/less"]
},
files: {
"public/css/bootstrap.css" : "public/bower_components/bootstrap/less/bootstrap.less"
}
}
}
});
// Load plugins here
grunt.loadNpmTasks("grunt-contrib");
grunt.loadNpmTasks("grunt-contrib-less");
// Define your tasks here
};