GruntJS newbie here. I currently have my gruntfile.js using the watch task to look for changes to any .js files in my js/components/ folder and uglify those scripts into a single script.js file.
The issue that I'm having is that these changes cause a full page reload.
Is it possible to only reload the script.js file without also reloading the HTML/CSS? The effect I'm after is the same effect I'm currently getting with SASS/CSS files like so:
watch : {
options: { livereload: true },
sass: {
options: {
livereload: false
},
files: ['css/sass/*.scss'],
tasks: ['compass:dev']
},
css: {
files: ['css/*.css']
}
}
This reloads only my CSS without reloading the entire page, which makes for a much smoother workflow. Is it possible to do the same for JS? If not, why not? My current JS workflow configuration looks like this:
grunt.initConfig({
uglify: {
my_target: {
files: {
'js/script.js' : ['js/components/*.js']
}
}
},
watch : {
options: { livereload: true },
scripts: {
files: ['js/components/*.js'],
tasks: ['uglify']
}
}
});
After reading around I finally wound up on the livereload.js Github page. Under the developer's rundown of the project's current status, "Live JS reloading" is the one remaining to-do item. So it's a planned feature, but not yet implemented. The last commit on the project was 7 months back, so I'm not sure when/if we can anticipate this update.
Related
can you help-me with this problem?
I need run a specific task depending of file modified, for example:
Modifie: _header.scss
Run: sass:header task
Modifie: _footer.scss
Run: sass:footer task
Modifie: _banners.scss
Run: sass:banners task
I've been trying to get the name of the file at save time to use it as a parameter, but I can not figure out ways to do this.
My project allows more people to work simultaneously but the work of defining which component of the project will be exported to CSS is manual, so I am trying to make this process of compiling the final CSS of each module as automatic.
My problem is how I can identify the name of the modified file, not the type of file.
Thank you very much!
It should look like this. When sass files are changed, grunt generates css files and copies (to dist directory) changed files only. Also as far as you can see connect and watch task implement live reload.
connect: {
options: {
port: ...
livereload: 35729,
hostname: '127.0.0.1'
},
livereload: {
options: {
base: [
'some dist'
]
}
}
},
// check that files are changed
watch: {
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'your dist/*.css'
]
},
// when sass file is changed, tasks will run
// newer:copy means that we have to do task copy with changed files only
sass: {
files: ['your dir/*.sass'],
tasks: ['sass', ...some other tasks like cssmin..., 'newer:copy']
}
},
sass: {
dist: {
files: [
...sass to css
]
}
},
copy: {
css: {
....
}
}
Also you can be interested in task like grunt-changed. The task configures another task to run with src files that have been changed. For more information please check the page grunt-changed
I'm using Grunt for livereload only. It works fine, but I noticed that it has high CPU, and when I run it with "--verbose" I see that it's watching the whole "node_modules" folder.
So, I made some research, and tried to ignore this. Unfortunately, with no success.
My watch part of "gruntfile.js" is:
// the watch stuff ..
watch: {
all: {
files: ['!**/node_modules/**', 'js/**/*.js', 'css/**/*.css', 'index.html'],
options: {
interval: 5007,
livereload: true
}
}
},
and basically I'm saying I want grunt to watch all js, css and the index.html file. Explicitly added the code for ignoring "node_modules", but it still says it's watching it and the CPU goes around 30%. (Mac OSx)
==================
One thing I noticed though:
When I make a change in the "gruntfile.js" - for example add one more file to the "files" property of the "watch" task - then it restarts the grunt, and in the console I see it start watching only the files I want, and then CPU goes below 1%. (I guess it's how it should be originally.)
What am I doing wrong?
====================
Edit: Unfortunately, when I change the gruntfile and I see only the files I want are being watched - then the livereload stuff is no longer working.
====================
This is the article I started from:
http://thecrumb.com/2014/03/15/using-grunt-for-live-reload/
Here is my package.json file:
{
"name": "grunt-reload",
"version": "1.0.0",
"devDependencies": {
"grunt": "~0.4.3",
"matchdep": "~0.3.0",
"grunt-express": "~1.2.1",
"grunt-contrib-watch": "~0.6.0",
"grunt-open": "~0.2.3"
}
}
And here is my Gruntfile.js:
module.exports = function(grunt) {
require('matchdep')
.filterDev('grunt-*')
.forEach(grunt.loadNpmTasks);
grunt.initConfig({
// the web server ..
express: {
all: {
options: {
bases: [__dirname],
port: 8888,
hostname: 'localhost',
livereload: true
}
}
},
// the watch stuff ..
watch: {
all: {
files: ['js/**/*.js', 'css/**/*.css', 'index.html'],
options: {
livereload: true
}
}
},
// the automatic opening stuff ..
open: {
all: {
path: 'http://localhost:8888/index.html'
}
}
});
// create the server task ..
grunt.registerTask(
'server',
['express', 'open', 'watch']
);
}; // end of "module.exports" ..
And I start all of this with "grunt server".
edit: After you shared your Gruntfile, the problem became more clearer.
In your grunt-express config, you have set livereload to true and bases to __dirname, which is the folder Gruntfile in ran from.
Now, let's look at the grunt-express documentation:
bases
Type: String|Array Default: null
The bases (or root) directories from which static files will be served. A connect.static() will be generated for each entry of bases. When livereload is set to true (or set to a specific port number), a watch task will be created for you (at runtime) to watch your basePath/**/*.*.
(Emphasis mine)
So in your grunt-express config, you set your livereload to watch all the files in your basepath, which of course includes node_modules.
You have couple of options:
Remove your other watch task and config grunt-expresses basepath accordingly (just copy your other config basically).
Keep both of the watch tasks and just ignore the node_modules in the other grunt-express -> bases config.
Remove the bases and handle livereloading in the other watch task
Where is the node_modules folder located? If it's on root, you can just remove the node_modules parameter altogether as long as there aren't any matching glob patterns:
// the watch stuff ..
watch: {
all: {
files: ['js/**/*.js', 'css/**/*.css', 'index.html'],
options: {
interval: 5007,
livereload: true
}
}
},
Now you are watching: All .js-files under js folder, index.html on root and so on.
However if you have node_modules under js/node_modules, you can the explicitly ignore that folder and the files in it:
files: ['!js/node_modules/**', 'js/**/*.js', 'css/**/*.css', 'index.html'],
Anyway, depending on your Gruntfiles and node_module-folders location your configuration should work just fine anyway.
I have lots of different partials and sass files to generate 11 individual website specific style sheets so if I make a changes in a partial that is being used in all 11 style sheets then I have to wait for grunt to compile all these before I can refresh my browser and see the change, one workaround I have is to use the specify option and change the site ID depending on which site I am working on -
compass: {
dev: {
options: {
sassDir: "assets/sass",
specify: "assets/sass/site_##.scss",
cssDir: "assets/styles",
outputStyle: "expanded",
noLineComments: false,
sourcemap: true
}
}
},
watch: {
css: {
files: 'assets/sass/**/*',
tasks: 'compass',
},
},
Is there a way I could make this dynamic in the watch task, i.e. using an ID appended to the body or something?
My partials -
_reset
_grid
_layout
_variables
_mixins
_brand1
_brand2
_brand3
_summer
_winter
_site_1_specific
_site_2_specific
_site_3_specific
_site_4_specific
_site_5_specific
_site_6_specific
_site_7_specific
_site_7_specific
_site_9_specific
_site_10_specific
_site_11_specific
I then have 11 SCSS files importing a combination of the above partials to make the final style sheets.
You can use grunt-newer, that helps you to execute the compass task only in the file that is changed:
https://github.com/tschaub/grunt-newer
npm install grunt-newer --save-dev
grunt.loadNpmTasks('grunt-newer');
Then, you have to change your watch task:
watch: {
css: {
files: '<%= tui.sass %>/**/*',
tasks: ['newer:compass']
},
},
Hope it helps.
Regards.
This is probably an affect of my inefficient setup and not a problem with grunt/livereload.
Here's my watch test in my grunfile.js:
watch: {
images: {
files: ['images/**/*.{png,jpg,gif}', 'images/*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false
}
},
js: {
files: ['js/*.js','js/**/*.js'],
tasks: ['jshint'],
options: {
spawn: false
}
},
svgs: {
files: ['images/*.svg','images/**/*.svg'],
task: ['svgmin'],
options: {
span: false
}
},
scss: {
files: ['sass/*.scss', 'sass/**/*.scss'],
tasks: ['sass','autoprefixer'],
sourceComments: 'normal',
options: {
nospawn: true,
livereload: true
}
}
},
This will recompile my SASS and the reload the page, but it takes 5-6 seconds to complete the CSS compilation, then it does a full page refresh, instead of just reloading the CSS file that changed.
So my questions are this:
How do I keep it from taking so long to compile the SASS and refresh the page, or am I just being to picky, and this is an inherit part of grunt?
How keep if from reloading the entire page, and just reload the CSS file that changed from my SASS compilation?
Check my other answer: Fastest way to compile SCSS (Compass) + refresh the browser?
grunt-contrib-sass uses Ruby sass which is very slow, it has nothing to do with grunt itself.
Use grunt-sass instead, it uses libsass which is lighting fast c implementation of sass.
Read this article:
http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/
The best solution is to move from grunt-contrib-sass to grunt-sass, but if you don't have much time to fix this, i think, you should move your 'autoprefixer' task from watch section to deploy section.
scss: {
files: ['sass/*.scss', 'sass/**/*.scss'],
tasks: ['sass',
sourceComments: 'normal',
options: {
nospawn: true,
livereload: true
}
}
In my project this trick help me, because 'autoprefixer' task works very slowly
Or you could use a live reloader tool, like fast-live-reload, in combination with the ruby sass compiler.
Note that they offer their own watcher that is very fast (e.g. for compass run: compass watch).
Disclaimer: I am the creator of fast-live-reload.
I want to use watch mode in my development environment. It works fine with single less file. But I have so many less files which are imported to app.less. My app.less looks
#import "variables";
#import "mixins";
It seems I can not use watch mode in this setting. Is there any other ways?
Upd. This syntax is for old grunt versions so it should not be used.
You need to use LiveReload app for this. Or maybe another software that can reload page with LiveReload browser extension (maybe Sublime Text editor with a plugin).
Possible setup is Node.js with Grunt which has grunt-contrib-less and grunt-reload modules installed.
Your grunt.js config should look like this:
module.exports = function(grunt) {
grunt.initConfig({
// Start LiveReload server
reload: {
port: 35729,
liveReload: {}
},
// Simple css compilation
less: {
src: 'less/app.less',
dest: 'css/app.css'
},
// Reload files on change
watch: {
less: {
files: ['less/*.less'],
tasks: 'less'
},
reload: {
files: ['*.html',
'css/app.css',
'js/*.js'],
tasks: 'reload'
}
}
});
// Third party modules
grunt.loadNpmTasks('grunt-reload');
grunt.loadNpmTasks('grunt-contrib-less');
// Register default task
grunt.registerTask('default', 'less');
};
Then you need to run
$ grunt watch:less
and
$ grunt watch:reload
in two separate terminal windows.
I'm totally agree with this comment
Refresh less css which has other imported less files without page load .
Thanks, thevasya.
But there's no need to start several terminals.
watch: {
less: {
files: ['less/*.less'],
tasks: 'less'
},
reload: {
files: ['*.html',
'css/app.css',
'js/*.js'],
tasks: 'reload'
}
}
after that you can start watching by
$ grunt watch
and that's it. If you change any less file, it will start only less task.
P.S.: This answer was updated for proper work with grunt 0.4.