grunt-sync with grunt-contrib-watch - gruntjs

I am currently trying to configure grunt-sync to run inside a watch and am running into issues. I've reported the issue to the module's github page but decided to post here to draw upon the general development population rather than wait for a single contributor to come across my issue report.
So, I'm thinking this may just be a gap in my understanding of how to drive grunt tasks through a watch. I've got watches up and running for several tasks already and I'm adding grunt-sync to my workflow to automate publication of my changes to a network directory that blah blah blah...not important; my watch is working for some stuff but not for this. I'm dropping in the relevant config section along with my "concurrent","karma", and "sass" tasks to give you the gist of my overall grunt config.
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
project: {
app: 'app',
},
sync:{
main: {
files:
[
{
cwd: 'app/',
src: [
'**/*.js',
'**/*.html',
'**/*.css',
'!app/node_modules/**'
],
dest: ['publish/']
}
],
verbose: true
}
},
karma: {
unit: {
configFile: 'test/karma.conf.js'
},
continuous:{
configFile: 'test/karma.conf.js',
singleRun: true,
browsers: ['PhantomJS']
}
},
sass:{
dev: {
options:{
style: 'expanded',
compass: false
},
files:{
'app/css/app.css':'app/css/app.scss'
}
},
dist: {
options: {
style: 'compressed',
compass: false
},
files:{
'app/css/app.css':'app/css/app.scss'
}
}
},
watch: {
sass: {
files: 'app/css/**/{,*/}*.{scss,sass}',
tasks: ['sass:dev']
},
styles: {
files: ['app/css/app.css'],
tasks: ['autoprefixer']
},
// karma: {
// files: ['test/*.js',
// 'test/**/*.js'
// ],
// tasks: ['karma:unit:run']
// },
livereload:{
options: {livereload: true},
files: ['app/**/*'],
},
sync:{
files: ['app/**'],
tasks: ['sync:main']
}
},
concurrent:
{
target: {
tasks: [
'karma:unit',
'watch'
],
options: {
logConcurrentOutput: true
}
}
}
});
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.registerTask('default', [
'sass:dev',
'concurrent:target'
]
);
};
Currently receiving the following warning when I grunt
Warning: Task "sync:main" not found. Use --force to continue.
Aborted due to warnings.
Since there is only the main subtask, I thought that maybe changing the watch from executing ['sync:main'] to executing ['sync'] would possibly work. The warning goes away but poof nothing happens...so I'm not sure if the issue is with my config or with the module implementation.
Any ideas?
Edit to Add:
From the module's github site, I see the following in sync.json
{
"main": {
"files": [{
"src": ["**"],
"dest": "bin/to",
"cwd": "bin/from"
}]
}
}
so that would lead me to believe that "main" is the name I should be using for the sync subtask. I'm really confused as to why grunt isn't recognizing it in my config, but I am not too terribly familiar with dissecting the code for grunt modules.

Well...turns out I referenced a module in my gruntfile before I ran npm install on it and then decided to come on the internet to tell everybody about it.
Edit:
To partially exonerate myself, I found the console that I used to run npm install grunt-sync --save-dev. I had run it, but I was in the
wrong directory; it added it to the wrong gruntfile.
To answer my own question, the gruntfile packaged with the [grunt-sync] module contains a watch section, so you just have to have grunt-contrib-watch installed; you don't have to do anything special. And that makes sense. A folder synchronization task would be pretty darned worthless without a file system watch, so it is perfectly reasonable to run the task in a very broad watch but with an inherent blacklist (it watches all files in all folders but only operates on files matching a src pattern.
So to get it to syn-down all files on all file changes,
sync: {
main:{
files:[{
src:[
'**'
]
, dest: 'publish'
}
]
,verbose: true
}
},
will copy all files to the publish subdirectory. I run mine inside a concurrent task
concurrent:
{
target: {
tasks: [
'karma:unit',
'sync:main',
'watch'
],
options: {
logConcurrentOutput: true
}
}
}
Personally, I'll probably be swapping this out with grunt-rsync because grunt-sync simply performs the file copy task inside [sync:main] What I want it to do is to only send deltas to the publish folder every time I save a file; that's a task for rsync.

Related

How to combine multiple watch tasks for different compass tasks in Grunt

We are having some problems finetuning our Grunt setup. Our current project setup is like this. We have a Themes folder, in that themes folder there are different themes that all hold their own SCSS files and other bits related to that theme.
Our grunt file is setup like this with around 15 themes (leaving out default Grunt setup and JSHint because in the end Grunt is working):
compass: {
options: {
...
}
theme1: {
src: ['App/Themes/theme1/scss/**/*.scss'],
tasks: ['compass'],
options: {
sassDir: 'App/Themes/theme1/scss',
cssDir: 'App/Themes/theme1'
}
},
theme2: {
src: ['App/Themes/theme2/scss/**/*.scss'],
tasks: ['compass'],
options: {
sassDir: 'App/Themes/theme2/scss',
cssDir: 'App/Themes/theme2'
}
},
...
}
concurrent: {
watch: {
tasks: ['compass:theme1', 'compass:theme2', ..., 'compass:themeXX'],
options: {
logConcurrentOutput: true,
spawn: false
}
}
}
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['concurrent']);
The actual issue then is that when we start the default task also x watch threads are started. Which have a lot of overhead for the small watch task they have to do.
The solution I'm looking for is a way to setup a single watch task that can trigger the specific theme compass compile. Is there a way to do that? Or is the current setup the only way to do it? So no other option than to have x watch tasks?
Thanks.
First, scaffold a watch task in your config object that watches files but doesn't execute any tasks. Using the glob pattern, tell the watcher to spy on all .scss files within the themes directory:
grunt.initConfig({
compress: {}, //your existing compress object goes here
watch: {
themes: {
files: ['App/Themes/**/*.scss'],
tasks: []
},
},
});
Next, you're going to add a grunt.event listener to your gruntfile. The listener event will expose the file changed (example: App/Themes/theme1/scss/foobar.scss). With that, you can now determine which compress target (theme1) to run:
grunt.event.on('watch', function(action, filepath, target) {
if (target === 'themes') {
var theme = filepath.split("/");
grunt.task.run('compress.' + theme[2]); //tells grunt to run "compress.theme1" based on this example
}
});

Set up grunt to build Jekyll site, serve & livereload

I have a simple Jekyll site, and am using grunt to compile LESS files.
I want to build in the ability to continue compiling .less files, building the jekyll site & serving it locally. I also have a task to watch and copy compiled css files into the jekyll _site folder.
However the Grunftile I have at the moment isn't quite working:
module.exports = function (grunt) {
grunt.initConfig({
// compile set less files
less: {
development: {
options: {
paths: ["assets/less"],
yuicompress: true,
compress: true
},
files: {
"assets/css/site.css": ["assets/less/*.less", "!assets/less/_*.less"]
}
}
},
// watch changes to less files
watch: {
styles: {
files: ["less/**/*"],
tasks: ["less", "copy:css"]
},
options: {
livereload: true,
spawn: false,
},
},
// copy compiled css to _site
copy: {
css : {
files: {
cwd: './assets/css/',
src: 'site.css',
dest: './_site/assets/css',
expand: true
}
}
},
// run jekyll command
shell: {
jekyll: {
options: {
stdout: true
},
command: 'jekyll build'
}
},
// jekyll build
jekyll: {
files: [
'*.html', '*.yml', 'assets/js/**.js',
'_posts/**', '_includes/**'
],
tasks: 'shell:jekyll',
options: {
livereload: true
}
},
exec: {
server: {
command: 'jekyll serve -w'
}
},
concurrent: {
options: { logConcurrentOutput: true },
server: {
tasks: ['watch', 'exec:server']
}
}
});
// Load tasks so we can use them
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-concurrent');
// the default task will show the usage
grunt.registerTask("default", "Prints usage", function () {
grunt.log.writeln("");
grunt.log.writeln("Using Base");
grunt.log.writeln("------------------------");
grunt.log.writeln("");
grunt.log.writeln("* run 'grunt --help' to get an overview of all commands.");
grunt.log.writeln("* run 'grunt dev' to start watching and compiling LESS changes.");
});
grunt.registerTask("dev", ["less:development", "watch:styles", "copy:css", "shell:jekyll", "concurrent:server"]);
};
It's probably better to have Grunt also building Jekyll, using grunt-jekyll https://github.com/dannygarcia/grunt-jekyll. I suspect you're having issues with Jekyll cleaning the output directory after your copy task has placed your compiled LESS output there, so it's important your tasks are run in the correct sequence.
There's an excellent Yeoman generator with a complete Jekyll / Grunt workflow that's also worth checking out; https://github.com/robwierzbowski/generator-jekyllrb and if you don't want to use Yeoman then you will at least find some helpful pointers in the Gruntfile https://github.com/robwierzbowski/generator-jekyllrb/blob/master/app/templates/Gruntfile.js

Need to Perform a Grunt Watch Forever

I'm new to Node.js and Grunt... I'm attempting to use Node.js and Grunt on a Windows server to watch my main.less file and do a standard compile and concatinate. I'm able to do this while the command prompt is open, but I need this to run as a daemon while not logged into the server since the .less files get deployed from our CMS that sits in the cloud.
I found promising documentation in Grunt-Forever, but it requires you to point to an application, while I just want to perform the grunt watch task.
Someone else asked a similar question 9 months ago, but nobody gave an answer:
Grunt.js Watch Forever
I tried this from the command line:
FWIW, you can do forever /usr/local/bin/grunt --base . watch to use forever with grunt watch atm.
But, I got errors.
Here is my gruntfile:
module.exports = function(grunt) {
grunt.registerTask('watch', [ 'watch' ]);
grunt.initConfig({
concat: {
js: {
src: [
'js/global.js','js/googlemap.js'
],
dest: 'js/main.min.js'
},
},
uglify: {
options: {
mangle: false
},
js: {
files: {
'js/main.min.js': ['js/main.min.js']
}
}
},
less: {
style: {
files: {
"css/style.css": "less/main.less"
}
}
},
watch: {
js: {
files: ['js/global.js','js/googlemap.js'],
tasks: ['concat:js', 'uglify:js']
},
css: {
files: ['less/*.less'],
tasks: ['less:style']
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
};
Any help is much appreciated!
Use node to call grunt, use PM2 to run and manage node.
Try running the grunt watch task with nohup. Since you mentioned "Windows server" you can check this answer about nohup equivalent in Windows. Then you will have the grunt task running even when you log out of the server.

Grunt SCSS - Not reloading

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

Grunt - lint only modified files using grunt-newer

I'm running a Grunt task that uses Concurrent to run both Nodemon and Watch/Livereload. On default load, I lint and launch Concurrent. I would also like to set up a Watch to lint individual files on change. Currently, all files are linted when any one file is changed.
I have examined a similar question on StackOverflow and decided to go with grunt-newer as a potential solution. In my implementation below, however, the 'newer' prefix doesn't seem to do anything. How can I fix this so that only changed files are linted?
module.exports = function(grunt) {
//load all dependencies
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concurrent: {
dev: {
options: {
logConcurrentOutput: true
},
tasks: ['watch', 'nodemon']
}
},
jshint: {
files: ['Gruntfile.js', 'client/src/*.js', 'server/**/*.js'],
options: {
'-W030': true,
'-W083': true,
globals: {
console: true,
module: true,
document: true
}
}
},
watch: {
all: {
files: ['<%= jshint.files %>'],
tasks: ['newer:jshint']
},
frontend: {
files: ['client/**/*.{css,js,html}'],
options: {
livereload: true
}
}
},
nodemon: {
dev: {
options: {
file: 'server/server.js',
watchedFolders: ['server']
}
}
}
});
grunt.registerTask('test', ['jshint']);
grunt.registerTask('default', ['jshint', 'concurrent']);
};
I was having the same problem and finally figured it out. The solution is hidden deep in the documentation and very misleading with the spawn option in the code sample: https://github.com/gruntjs/grunt-contrib-watch#compiling-files-as-needed
Your config file should remain the same as you have it in your question, but you need to add a listener to the watch event. I recommend the 'robust' option they provide (modified for you specific task config). Place this code just above the call to grunt.initConfig and after you require calls.
var changedFiles = Object.create(null);
var onChange = grunt.util._.debounce(function() {
// Modified to point to jshint.files as per the task example in the question.
grunt.config('jshint.files', Object.keys(changedFiles));
changedFiles = Object.create(null);
}, 200);
grunt.event.on('watch', function(action, filepath) {
changedFiles[filepath] = action;
onChange();
});
Add the nospawn option to the all watch task. This is what is misleading in in the documentation. It mentions it should be disabled if you want dynamically modify your config but basically prevents it from working with newer unless it's set to true:
watch: {
all: {
files: ['<%= jshint.files %>'],
tasks: ['newer:jshint'],
options: {
nospawn: true,
}
},
...
NOTE: If you modify your grunt file while it's running then it will lint all files, not sure why it does this but then it gets stuck and will just keep linting everything for all changes you make. I just took out the 'gruntfile.js' from the list of files that should be linted to avoid it.

Resources