I am trying to use the grunt watch plugin to compile coffeescript and sass. I want to use livereload in addition so that I can instantly see the results. This is my grunt configuration - but it does not actually reload the loaded page when I make a modification. Please help me fix this.
watch:
sass:
files: ['client/**/*.scss']
tasks: ['sass:all']
options:
spawn: false
livereload: true
coffee:
files: ['client/**/*.coffee', 'server/**/*.coffee', 'test/**/*.coffee']
tasks: ['coffee:all']
options:
spawn: false
livereload: true
I'm currently experiencing the same issue. spawn has a default value of true - If you leave it like that it will likely work.
Unfortunately, in my scenario, I require that spawn=false - I'll let you know if I find a fix.
Edit - I did some reading, and it doesn't look like it's possible. If spawn=false the watch task has to exit while it executes the task list for a watch target - After it finishes, watch restarts, but it won't see any files created/updated whilst it wasn't running.
In your situation I'd recommend removing the spawn: false line so that it uses the default value for spawn (which is true).
Related
So consider the following script command to run via npm run: webpack -p --optimize-minimize
Is there any way to say: Keep comments?
webpack version 2 is used.
In most applications you would not want to keep comments, but in this particular case I want to keep them, while still minifying the "script" Is this possible?
Webpack's webpack.optimize.UglifyJsPlugin has a couple of options which might fit your needs.
comments options accepts a regex or function to tell UglifyJs which comment to preserve.
extractComments let you even extract the comments to separate txt files.
Set it up like this:
plugins: [
new webpack.optimize.UglifyJsPlugin({
comments: true, // or function/regex
// Further UglifyJs config
})
],
I have a task :
gulp.task('styles', ['cleanup'], function () {
'use strict';
log('Compiling Less files to :' + config.temp);
return gulp
.src(config.less)
.pipe(less())
.pipe(autoprefixer({browsers: ['last 2 versions', '> 5%']}))
.pipe(gulp.dest(config.temp));
});
This tasks works like it should when I call it manually. It deletes the files in config.temp (not shown in code snippet) and recompiles the less to css and places it again in config.temp directory.
The problem is when I try to run this task inside gulp.watch :
gulp.task('watch', function() {
gulp.watch(config.less, ['styles']);
});
The task doens't work anymore. I can see gulp picking up changes I make in my less files, I see the log output, there are no errors, yet still the task hasn't really happend. My css output remains the same.
Another indication that the tasks aren't really executed, is the time that gulp spend; when I do it manually it takes longer :
then when the gulp watch runs the same task :
I have been following a tutorial that does the exact same thing, and I have some example files that also use gulp.watch and work.
I have seen some mentioning of gulp-watch but I'm not sure that's the same as gulp.watch?
Hope it's some obvious mistake someone can point out to me.
Some things to try:
Try the debugging i mentioned in the comments
Add this in the styles task, right after you pipe in the source code.
.pipe($.plumber()) // exit gracefully if something fails after this
also, make sure you check your version of the gulp.
I wish I could just delete this question because apparently there is nothing wrong: Webstorm was just too bloody slow in refreshing itself, so I always thought the .css file hadn't changed. I just needed to wait approx 45 seconds. Sorry for wasting internet space!
I have a gulp task that performs some pretty common tasks - it runs jshint to validate my code, then concats and minimizes the files and outputs them into single .min.js files.
The task (appears) to execute flawlessly when I run it manually. But the second I try to use it in a $gulp.watch it no longer outputs my file (it still executes and executes jshint though).
The code in my task:
gulp.src(path.join(workingPath, folder, '/*.js'))
.pipe(jshint())
.pipe(jshint.reporter(stylish))
.pipe(jshint.reporter('fail')) //stop build if errors found
.on('error', function() {
console.log("Please review and correct jshint errors.");
this.end();
})
.pipe(order([ //order files before concat - ensure module definitions are first
"*.module.js",
"*.js"
]))
.pipe(concat(filename+'.js'))
.pipe(gulp.dest(destinationPath)) //full combined version
.pipe(uglify())
.pipe(rename(filename+'.min.js'))
.pipe(gulp.dest(destinationPath)) //minified combined version
.on('error',function() {
console.log("An error occurred during Gulp processing.");
this.end();
});
My gulp watch (the task is named 'components'):
gulp.watch(componentsBasePath+"/**/*.js",['components']);
One thing that I've noticed though is at the end of the manual run I see "Process finished with exit code..". And if I kill my gulp.watch it outputs "Process finished with exit code.." - then it DOES creates the output files!
My goal is to have my 'components' task create those output files every time it is triggered by the watch - not just when I kill the watch.
Thank you!
Cliff
Ok so my hacky way to fix the problem with jetbrains (im using phpstorm), you gotta understand 2 things.
gulp watchers act on file save.
jetbrains will not auto update the project files (as you have found out it uses a cache).
To get around this problem i created a macro called saveSync which does the following actions:
Save all
Synchronize
Synchronize
Synchronize
Why did i synchronize 3 times? Because gulp takes a few seconds to finish tasks (compiling, etc) and if you update before they finish obviously the project view doesn't get update properly. I haven't figured out a way to insert a time delay into the macro itself.
After i created the macro, i just rebound ctrl + s from save all to the macro, and it worked.
If there is a 'cleaner' way of doing this i have yet to discover it.
Ran this by someone else and he found the cause of the issue. Though - it's not Gulp related at all it turns out.
The IDE I was using updated the folder and file structure instantly when I manually ran my 'components' task, however it did not do the same when I ran the gulp.watch task. I am happy to report though that the files were being created successfully, they just never appeared in the IDE until I killed the task.
On these days, a good approach to obtain a great performance in SPA application is prepare a gzipped client side bundle from a few gulp tasks.
Based on these, an awful approach to debug is consider the use of a full bundle unminified # dev environment. The question is about possible of use a gulp browserify task and gulp inject to unroll the client bundle in separated files like was developed.
I mean, maybe would be possible inject a bundle or a couple of files with a browserify boilerplate to resolve a bunch of require's and module.exports statements.
Thoughts?
The correct answer is use an option that gulp-browserify provides to run a complete src tree instead use a bundle. just set a optional flag debug: true as follows, in example:
gulp.src('./app/js/app.js'). // this path is the entry point
pipe(browserify({
insertGlobals: true,
debug: true
}));
Is there a way to run a Gulp task on Webstorm launch?
Tried looking through webstorm settings but don't see anything, also Gulp integration is brand new to Webstorm 9.
gulp.task('watch', function () {
gulp.watch(paths.watch.css, function(){ compileLESS(paths.src.css, paths.dest.css, {name: 'Style'}) });
gulp.watch(paths.watch.cssBootstrap, function(){ compileLESS(paths.src.cssBootstrap ,paths.dest.cssBootstrap, {suffix: '.min', name: 'Bootstrap'}) });
gulp.watch(paths.watch.scripts, ['scripts']);
gulp.watch(paths.watch.libraries, ['libraries']);
});
Just want a way to run Gulp 'watch' (if the project has gulp and a task called watch) when ever i start Webstorm.
As of WebStorm 11, this is possible.
Settings > Tools > Startup Tasks
Hit the green plus icon to Add New Configuration
Choose Gulp.js
Choose your tasks that you want to run from the Tasks: dropdown
Done!
No:( WebStorm (as well as other JetBrains IDEs) doesn't support 'on launch' actions - see https://youtrack.jetbrains.com/issue/WEB-11818#comment=27-787220
Best thing to do is set your gulp task (which sets up the watchers) as a 'before launch' task of your main configuration.
Works great for me. I need to start my server before I can start developing, and when I do, I know this will start my watchers and do any necessary processing for the first time.