My goal is to run gulp LiveReload with PhpStorm (LiveEdit is not good for me since I use complex framework)
I have created this gulpfile.js
var gulp = require('gulp'),
livereload = require('gulp-livereload');
gulp.task('watch', function() {
livereload.listen();
gulp.watch('*', function() {
livereload();
console.log('changed !')
});
});
I run it in PhpStorm
[02:20:02] Starting 'watch'...
I've installed the LiveReload Chrome plugin and connected it: (it says connected)
Any time I make a change on a file, I got a 'changed' message in PhpStorm's terminal. But browser is not refreshed automatically.
Related
Using gulp and the new Microsoft bash shell, I am trying to set up a gulp watch to compile my scss into css, in a way that the watch doesn't stop when there is an error compiling it.
I've set up a gulp task called sass to do this, and I can run it fine from the command line with gulp sass, but when I try to run my gulp watch command with gulp watch I get an EPERM error which I've been unable to fix in a way to get my gulp.watch working. Here is the error messages output to the command line, below.
I've tried changing permissions on my node_modules folder, as well using sudo to do, but I still get this error. Help would be greatly appreciated.
var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
gulp.task('watch', ['sass'], function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
})
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(customPlumber('Error Running Sass'))
.pipe(sass())
.pipe(gulp.dest('app/css'))
})
function customPlumber(errTitle){
return plumber({
//use notify plugin to report error as windows toaster message
errorHandler:notify.onError({
//Customizing error title
title:errTitle || "Error running Gulp",
message: "Error: <%= error.message %>",
})
});
}
WSL doesn't support FS notify syscalls in Slow/Preview/Production rings. In the Fast ring, it supports tracking changes made inside WSL. Devs promise support for tracking changes made in Windows will be added soon enough.
Related links:
GitHub issue
UserVoice ticket
I've got liveReload working fine with scss and js, but not with html. here are my tasks...
var gulp = require('gulp'),
liveReload = require('gulp-livereload');
gulp.task('watchFiles', function () {
liveReload.listen();
gulp.watch('src/**/*.scss', ['compileSass']);
gulp.watch('src/**/*.html', ['watchHtmlFiles']);
gulp.watch('src/**/*.js', ['bundle-app']);
});
I needed to use run-sequence to assure my templates were built before bundling..and replaceIndex is a simple pipe for index.html over from 'src' to 'dist'
var gulp = require('gulp'),
runSequence = require('run-sequence'),
liveReload = require('gulp-livereload');
gulp.task('watchHtmlFiles', function (callback) {
runSequence('templates', 'bundle-app', 'replaceIndex', callback);
});
I get an error if I include ".pipe(liveReload())" as part of the callback...so I added it to the bundle-app and replaceIndex tasks. But this doesn't work....
this is now working, with no additional changes! The only thing I can attribute this sudden shift is that I was running another angular project with karma running. When that was shut down, live Reload for html files works fine....
Short of it: started using Gulp recently (convert from Grunt), and am trying to use both Gulp's default watch task (not gulp-watch from npm) for SASS/JS/HTML and gulp-nodemon (from npm) to restart an Express server upon changes. When running just gulp watch, it works fine; and when running gulp server (for nodemon) that works fine. However, using both together (shown below in the configuration of the default task), the watch stuff isn't working. The task is running, and on the CLI gulp shows 'Starting' and 'Finished' for the watch tasks, but the files don't update.
Relevant task configurations:
Concat javascript:
gulp.task('js:app', function(){
return gulp.src([
pathSource('js/application/modules/**/*.js'),
pathSource('js/application/_main.js')
])
.pipe(concat('application.js'))
.pipe(gulp.dest('./build/assets/js')).on('error', utils.log);
});
Nodemon, restart on changes to express app:
gulp.task('express', function(){
return nodemon({script:'server.js', ext:'js', cwd: __dirname + '/express', legacyWatch: true})
.on('restart', function(){
//gulp.run('watch'); // doesn't work :(
});
});
Watch javascript changes, and run js:app for concat'ing.
gulp.task('watch', function(){
gulp.watch(pathSource('js/application/**/*.js'), ['js:app']);
});
Default task, to initialize gulp watch and nodemon simultaneously:
gulp.task('default', ['watch', 'express']);
If anyone has any ideas, thanks in advance!
gulp.run calls have been deprecated, so I'd try a different approach. Since you're already using gulp, may I suggest giving gulp-nodemon a try?
As per gulp-nodemon documentation, you can pass it an array of tasks to execute:
UPDATE: Here's the full gulpfile.js file, together with a working sample on github.
'use strict';
// Main dependencies and plugins
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var nodemon = require('gulp-nodemon');
var assets = 'assets/js/**/*.js';
var publicDir = 'public/javascripts';
// Lint Task
gulp.task('lint', function () {
return gulp.src(assets)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});
// Concatenate and minify all JS files
gulp.task('scripts', function () {
return gulp.src(assets)
.pipe(concat('global.js'))
.pipe(gulp.dest(publicDir))
.pipe(rename('global.min.js'))
.pipe(uglify())
.pipe(gulp.dest(publicDir));
});
// Watch Files For Changes
gulp.task('watch', function () {
gulp.watch(assets, ['lint', 'scripts']);
});
gulp.task('demon', function () {
nodemon({
script: 'server.js',
ext: 'js',
env: {
'NODE_ENV': 'development'
}
})
.on('start', ['watch'])
.on('change', ['watch'])
.on('restart', function () {
console.log('restarted!');
});
});
// Default Task
gulp.task('default', ['demon']);
This way, you spawn the watch task upon nodemon's start and ensure that the watch task is again triggered whenever nodemon restarts your app.
EDIT: seems you should be calling the on-change event from gulp-nodemon, which will handle compile tasks before the restart event triggers.
EDIT: It seems nodemon's on('change', callback) is removed from their API
FWIW, it seems that using the cwd parameter on gulp-nodemon's configuration actually sets the entire gulp cwd to that directory. This means future tasks will be executed in the wrong directory.
I had this problem when running gulp watch tasks on my frontend server at the same time as nodemon tasks on my backend server (in the same gulpfile), there was a race condition wherein if the nodemon command was executed first, the frontend stuff would actually build into (Home)/backend/frontend instead of (Home)/frontend, and everything would go pearshaped from there.
I found that using watch and script params on gulp-nodemon worked around this (although it still looks like nodemon is watching my entire project for changes rather than the built backend directory).
Building myself a gulpfile.js for a WordPress theme. Currently all the JS and CSS is working perfectly, and livereload is reloading on css/js change.
But I also want to refresh the browser whenever a PHP file is changed. I did some searching and found the following snipped which I'm using within my gulpfile.js
gulp.task('watch', function(){
// Listen on port 35729 for LiveReload
server.listen(35729, function (err) {if (err) {return console.log(err) };
gulp.watch("assets/scss/**/*.scss", ['sass']); // Watch and run sass on changes
gulp.watch("assets/js/_*.js", ['javascripts']); // Watch and run javascripts on changes
gulp.watch("assets/img/*", ['imagemin', 'svgmin']); // Watch and minify images on changes
gulp.watch('**/*.php').on('change', function(file) {
util.log('PHP FILES CHANGED!');
server.changed(file.path);
});
});
});
Whenever I change a PHP file I can see "PHP FILES CHANGED!" in the console, but livereload does not update the browser. What am I missing?
Did some further research and testing, and it turns there's no point in using tiny-lr since gulp-livereload does everything. So I changed my tasks to do the reloading by .pipe(livereload()); – and changed my watch task to the following:
gulp.task('watch', function(){
var server = livereload();
gulp.watch('**/*.php').on('change', function(file) {
server.changed(file.path);
util.log(util.colors.yellow('PHP file changed' + ' (' + file.path + ')'));
});
gulp.watch("assets/scss/**/*.scss", ['sass']); // Watch and run sass on changes
gulp.watch("assets/js/_*.js", ['javascripts']); // Watch and run javascripts on changes
gulp.watch("assets/img/*", ['imagemin', 'svgmin']); // Watch and minify images on changes
});
There's a shorter solution that maybe useful to those using gulp-livereload. There's a reload method that can be triggered. Like so:
gulp.task('watch', function(){
livereload.listen();
gulp.watch('source/*.php', livereload.reload);
});
I have a very minimal gulpfile as follows, with a watch task registered:
var gulp = require("gulp");
var jshint = require("gulp-jshint");
gulp.task("lint", function() {
gulp.src("app/assets/**/*.js")
.pipe(jshint())
.pipe(jshint.reporter("default"));
});
gulp.task('watch', function() {
gulp.watch("app/assets/**/*.js", ["lint"]);
});
I cannot get the watch task to run continuously. As soon as I run gulp watch, it terminates immediately.
I've cleared my npm cache, reinstalled dependencies etc, but no dice.
$ gulp watch
[gulp] Using gulpfile gulpfile.js
[gulp] Starting 'watch'...
[gulp] Finished 'watch' after 23 ms
It's not exiting, per se, it's running the task synchronously.
You need to return the stream from the lint task, otherwise gulp doesn't know when that task has completed.
gulp.task("lint", function() {
return gulp.src("./src/*.js")
^^^^^^
.pipe(jshint())
.pipe(jshint.reporter("default"));
});
Also, you might not want to use gulp.watch and a task for this sort of watch. It probably makes more sense to use the gulp-watch plugin so you can only process changed files, sort of like this:
var watch = require('gulp-watch');
gulp.task('watch', function() {
watch({glob: "app/assets/**/*.js"})
.pipe(jshint())
.pipe(jshint.reporter("default"));
});
This task will not only lint when a file changes, but also any new files that are added will be linted as well.
To add to OverZealous' answer which is correct.
gulp.watch now allows you to pass a string array as the callback so you can have two separate tasks. For example, hint:watch and 'hint'.
You can then do something like the following.
gulp.task('hint', function(event){
return gulp.src(sources.hint)
.pipe(plumber())
.pipe(hint())
.pipe(jshint.reporter("default"));
})
gulp.task('hint:watch', function(event) {
gulp.watch(sources.hint, ['hint']);
})
This is only an example though and ideally you'd define this to run on say a concatted dist file.