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
Related
I'm new to Gulp and I found a Gulpfile.js example I wanted to use to livereload my express app's server whenever a change takes place in either my app.js file or ./public directory. Here is the Gulpfile.js code:
var gulp = require('gulp'),
spawn = require('child_process').spawn,
node;
/**
* $ gulp server
* description: Launch the server. If there's a server already running, kill it.
*/
gulp.task('server', function() {
if (node) node.kill()
node = spawn('node', ['app.js'], {stdio: 'inherit'})
node.on('close', function (code) {
if (code === 8) {
gulp.log('Error detected, waiting for changes...');
}
});
})
/**
* $ gulp default
* description: Start the development environment
*/
gulp.task('default', function() {
gulp.run('server')
gulp.watch(['./app.js', './public/'], function() {
gulp.run('server')
})
})
// clean up if an error goes unhandled.
process.on('exit', function() {
if (node) node.kill()
})
In my terminal window I keep getting the following warning:
gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.
Gulp is working and it is livereloading the web application like I want it to but I'd like to fix this issue to future proof my development process, as well as get rid of this annoying warning message.
Thanks for the help!
One option would be to simply replace all occurrences of gulp.run() with gulp.start():
gulp.task('default', function() {
gulp.start('server');
gulp.watch(['./app.js', './public/'], function() {
gulp.start('server');
});
});
However calling a task explicitly using gulp.start() is not the idiomatic way of doing things in gulp (although sometimes it's necessary).
The warning message you receive already hints at the idiomatic way of solving this:
Use task dependencies or gulp.watch task triggering
Task dependencies allow you to run a task before another task. That means you can get rid of the first gulp.run().
Task triggering in gulp.watch() allows you to run a task when a file changes. That means you can get rid of the second gulp.run().
Therefore your default task ends up looking like this:
gulp.task('default', ['server'], function() {
gulp.watch(['./app.js', './public/'], ['server']);
});
I'm trying to create a gulpfile that allows me to compile scss and js files.
Calling webpack from a gulp task seems to work as expected (simply followed the webpack-stream intro.
However, I'm failing setting up watching for files. It's working as expected for scss files, but not for webpack compilation. It occurs once at launch, block the console, but does not recompile files.
Here is my gulpfile:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var webpackConfig = require('./webpack.config.js');
var webpack = require('webpack-stream');
gulp.task('default', function () {
// place code for your default task here
});
gulp.task('watch', ['sass:watch','webpack:watch']);
gulp.task('sass', function () {
return gulp.src('./Styles/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write(".",{ ext: '.map' }))
.pipe(gulp.dest('./wwwroot/styles'));
});
gulp.task('sass:watch', function () {
gulp.watch('./Styles/**/*.scss', ['sass']);
});
gulp.task('webpack', function(){
return gulp.src('App/entry.js')
.pipe(webpack( webpackConfig ))
.pipe(gulp.dest('./'));
});
gulp.task('webpack:watch', function(){
var watch = Object.create(webpackConfig);
watch.watch = true;
return gulp.src('App/entry.js')
.pipe(webpack(webpackConfig))
.pipe(gulp.dest('./'));
});
When I run gulp watch, I get this output:
c:\Data\projets\someproject>gulp watch
[13:30:18] Using gulpfile c:\Data\projets\someproject\gulpfile.js
[13:30:18] Starting 'sass:watch'...
[13:30:18] Finished 'sass:watch' after 13 ms
[13:30:18] Starting 'webpack:watch'...
[13:30:22] Version: webpack 1.12.13
Asset Size Chunks Chunk Names
./wwwroot/dist/bundle.js 498 kB 0 [emitted] main
./wwwroot/dist/bundle.js.map 616 kB 0 [emitted] main
[13:30:22] Finished 'webpack:watch' after 3.92 s
[13:30:22] Starting 'watch'...
[13:30:22] Finished 'watch' after 11 µs
However, even if the console does not returns to the prompt, no bundle file is updated, if I update my sources.
I don't believe the issue is in my webpack.config.js file. If I run webpack --watch --color --progress in the prompt, I see the recompilation of bundle whenever a file is modified.
Thanks for clarification, I'm learning javascript ecosystem the hard way :)
In your console output, you should get 'webpack is watching for changes' if you do everything correctly. You have set watch.watch to true, but in the next step you have referenced to the old webpackConfig, for which the watch parameter is not true. You should use:
return gulp.src('App/entry.js')
.pipe(webpack(watch))
.pipe(gulp.dest('./'));
It worked after this change and the gulp watch polls for both the changes. You will also see in your console 'webpack is watching for changes'.
I hope this solves the issue.
I am trying to create a gulp task that updates all the assets in my project by executing a shell script. The problem is that it executes as expected and then just hangs.
'use-strict';
var gulp = require('gulp'),
gutil = require('gulp-util');
exec = require('child_process').exec;
var foreach = require('gulp-foreach');
gulp.task('update-assets', function () {
exec('./update_assets.sh', {cwd: 'assets'}, function(err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
});
gulp.task('default', ['update-assets'], function() {
gulp.start('update-assets');
});
This is because of the nature of exec(). What exec() does it allows the command you give it to "take over" the current process. What you can do is instead try something like child_process.spawn . If it is a daemon process.
Take a good look at the Child_Process documentation. I think that this should help you get a good start.
Other options that may be helpful include modifying the script to throw exit codes for Gulp to recognize, or using timeouts to know when a gulp task has terminated.
UPDATE: Alternatively, you could use this, which is what I found worked for me when running a web server.
shell.exec('./update_assets.sh', {async:true} );
Before asking here i tried to find similar subject on overstockflow but it didn't help much. So, here is my subject. I'm using browser-sync + gulp and have problems with reload and watch. I have gulpfile and when I run gulp, it should watch and reload the all changes that happens but doesn't. It compiles but stop watching farther and gives me notification. I have to reload my page in browser manually what is not handy, Here is my code:
var gulp = require('gulp'),
jade = require ('gulp-jade'),
stylus = require ('gulp-stylus'),
watch = require ('gulp-watch'),
plumber = require('gulp-plumber'),
browserSync = require ('browser-sync').create(),
poststylus = require ('poststylus'),
lost = require ('lost');
// JADE
gulp.task('jade', function(){
return gulp.src('app/jade/*.jade')
.pipe(plumber())
.pipe(jade({pretty:true}))
.pipe(gulp.dest('build/'))
});
// STYLUS
gulp.task('stylus', function(){
return gulp.src('app/stylus/*.styl')
.pipe(plumber())
.pipe(stylus({use:[poststylus(['lost'])]}))
.pipe(gulp.dest('build/css'))
});
gulp.task('browser-watch', ['jade', 'stylus'], browserSync.reload);
gulp.task('serve', function(){
browserSync({
server: {
baseDir: './'
}
});
gulp.watch('app/jade/*.jade', 'app/stylus/*.styl', ['browser-watch']);
});
// DEFUALT
gulp.task('default', ['browser-watch', 'serve']);
here is notification:
$ gulp
[20:34:23] Using gulpfile c:\Users\Bogdan\Desktop\projects\lost\gulpfile.js
[20:34:23] Starting 'jade'...
[20:34:23] Starting 'stylus'...
[20:34:23] Starting 'serve'...
[20:34:23] 'serve' errored after 239 μs
[20:34:23] TypeError: object is not a function
at Gulp.<anonymous> (c:\Users\Bogdan\Desktop\projects\lost\gulpfile.js:31:2)
at module.exports (c:\Users\Bogdan\Desktop\projects\lost\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (c:\Users\Bogdan\Desktop\projects\lost\node_modules\gulp\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (c:\Users\Bogdan\Desktop\projects\lost\node_modules\gulp\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (c:\Users\Bogdan\Desktop\projects\lost\node_modules\gulp\node_modules\orchestrator\index.js:134:8)
at c:\Users\Bogdan\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
at node.js:814:3
Container#eachAtRule is deprecated. Use Container#walkAtRules instead.
Container#eachDecl is deprecated. Use Container#walkDecls instead.
Node#removeSelf is deprecated. Use Node#remove.
[20:34:23] Finished 'jade' after 412 ms
[20:34:23] Finished 'stylus' after 390 ms
any idea what i'm doing wrong?
Try this: Deprecate container#remove and node#removeSelf. Fixes #191.
I know this part is wrong in your 'serve' task:
gulp.watch('app/jade/*.jade', 'app/stylus/*.styl', ['browser-watch']);
should put the sources in an array to watch 'multiple files'
gulp.watch(['app/jade/*.jade', 'app/stylus/*.styl'], ['browser-watch']);
On another note, I didn't know about 'poststylus'. That looks awesome! Good luck!
The issue is not in poststylus but in lost plugin, its 100%. The version of lost that you use now in your project used deprecated methods of postcss.
Try to delete it from your package and then to add it (or simply update):
sudo npm uninstall --save-dev lost
sudo npm install --save-dev lost
It worked for me - the notification of deprecated removeSelf disappeared.
The issue was solved 2 days ago: https://github.com/corysimmons/lost/pull/169
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).