In an AngularJS 1.7 project, I've managed to migrate my gulp configuration files from 3.9 to 4.0.2, but the http server won't start with a "gulp serve"
I've :
Converted all the dependencies to a "series" task. I used series everywhere, as I think it's safer (and slower) than using parallel execution.
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
to
gulp.task('default', gulp.series(['clean']), function () {
gulp.start('build');
});
Reorder the require('./gulp/somefile.js') manually so that tasks are defined before being called. (before it was loaded by a loop)
within each files put the function definition before the task call them
When I do a "gulp serve", I can see the build output showing the same 'normal' errors I had before migration (non angularjs lib added manually), and some new warning from bootstrap-sass about deprecated division.
After the build part, I would expect a local server to start on port 3000, Chrome being launched with the web UI i'm developping being displayed and my REST call being proxied to a local apache/php server, but well, it doesn't start, no error/warning, nothing.
[00:41:33] Finished 'styles' after 1.6 s
[00:41:33] Finished 'inject' after 2.31 s
[00:41:33] Finished 'watch' after 2.31 s
[00:41:33] Finished 'serve' after 2.31 s
The configuration files are here : https://github.com/dev-mansonthomas/RedCrossQuest/tree/ComposerLibUpdate/client
gulp.js
and then all files in the gulp sub directory.
gulp.start was never really intended for end users and is unneccesary with gulp.series. I wouldn't doubt support for it was removed from v4. Just use:
gulp.task('default', gulp.series('clean', 'build'));
Related
I am trying to make my processes (webpack, nodemon-restart) work with a single gulp command. This works well enough. However, webpack builds only once if its task is tied to gulp's default task (together with nodemon), or embedded withing nodemon's gulp task.
Then I decided to tie both webpack build task and nodemon restart task to gulp's watch command and this works just the way I wanted, except that if you make changes and save them more than twice, the app nodemon crashed and prints this error in the console
"/home/nnanyielugo/Workspace/activity-calendar/node_modules/nodemon/lib/monitor/match.js:132
var rules = monitor.sort(function (a, b) {
^
TypeError: Cannot read property 'sort' of undefined"
As a solution, i tried to tie the webpack build task to the nodemon restart using the .on() method, and instead got an infinite loop of restarting an rebuilding (nodemon restarts first, webpack builds, nodemon restarts again, webpack rebuilds, and on and on).
Does anyone have a solution please?`
Here is a sample of my code `
var gulp = require('gulp'),
nodemon = require('gulp-nodemon'),
webpack = require('webpack-stream');
gulp.task('default', ['watch']);
gulp.task('webpack', function() {
return gulp.src('src/entry.js')
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('./public'));
});
gulp.task('nodemon', function () {
return nodemon({
script: 'app.js'
, ext: 'js html'
, env: { 'NODE_ENV': 'development' }
})
})
gulp.task('watch', function(){
gulp.watch(['./api/**/*.js', './server/**/*.js', './*.js'], ['webpack', 'nodemon']);
})`
I guess, your nodemon and gulp's watch task collides with each other. Either you should get ride of using nodemon and to rely upon gulp to start your application.
Or else, you can get rid of your gulp's watch task and add the relevant script in your nodemon's restart method like this,
nodemon({
// script goes here.
}).on('restart', your_reload_logic)
Hope this helps!
I have inherited a project running gulp+nodejs. I am trying to use IntelliJ in Windows as my IDE.
If I set my runtime configuration to use "node.js" as its type, I have no problem hitting breakpoints and debugging. However, if I use "gulp.js" as the run type, breakpoints are ignored (and I can essentially never debug). I also tried using Node.js configuration and setting the JS file to node_modules/gulp/bin/gulp.js instead of server/run.js . This seems to have the exact same problem.
Any thoughts on how I could fix this?
Gulp run configuration is not supposed to be used for Node application debugging - it was designed to run/debug Gulp tasks. To debug your Node.js application, you need to create a Node.js Run configuration and specify the .js file generated by Gulp build as a file to debug.
If you still prefer using Gulp to start your server, make sure that it is started with -debug-brk and then use Node.js Remote run configuration to attach the debugger.
Like:
var gulp = require('gulp');
var exec = require('child_process').exec;
gulp.task('server', function (cb) {
exec('node --debug-brk=5858 app.js', function (err, stdout, stderr) {
...
run your server task, then create Node.js Remote run configuration and hit Debug
Similar to other questions, in this very watered-down snippet, running the default gulp task (via npm start which runs gulp); this snippet creates an infinite loop running the scripts task over and over. Here is the gulpfile.js (literally the whole thing at the moment):
'use strict';
const gulp = require('gulp');
// COPY SCRIPTS TO BUILD FOLDER
gulp.task('scripts', function() {
return gulp.src('./scripts/**/*.js')
.pipe(gulp.dest('build/scripts'))
});
// WATCH FILES
gulp.task('watch', function() {
gulp.watch('./scripts/**/*.js', ['scripts']);
});
// DEFAULT
gulp.task('default', ['watch']);
The extra odd thing is that whether the build folder is built anew or not, the scripts task will be executed immediately after calling npm start! And the loop begins.
In case you're curious, here is the pasted (and only) scripts object in my package.json:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "gulp"
},
The only other thing in my directory is a scripts folder with an app.js and an home.js file in it. Obviously once this task is run, the build folder is created (if it wasn't already there yet) and the two aforementioned files are copied into it.
You can see I'm only looking for scripts in the root directory's first level folder called scripts, so I shouldn't have an infinite loop by referencing changes on the same set of scripts. Also, even if I'm explicit, and point to exactly one particular file with a relative path such as ./scripts/home.js this still happens.
I'm anticipating being embarrassed, but I'm utterly confused.
A few things I've picked up on which could be causing some errors.
EDIT -
Try the watch plugin npm install --save-dev gulp-watch
// Try and declare your plugins like this for now.
var gulp = require('gulp'),
watch = require('gulp-watch');
// Provide a callback, cb
gulp.task('scripts', function(cb) {
// Dont use ./ on your src as watch can have a problem with this
return gulp.src('scripts/**/*.js')
.pipe(gulp.dest('./build/scripts'), cb); // call cb and dont forget ;
});
// remove ./ on watch
gulp.task('watch', function() {
gulp.watch('scripts/**/*.js', ['scripts']);
});
gulp.task('default', ['watch']);
So that is pretty weird behaviour but this should do the trick.
The only time I use ./ within gulp is on my dest.
Also just remember that gulpfile is just a JS so remember your semicolon, etc.
I cannot guarantee the resolution here, but I had a two variables that changed when this was resolved:
I upgraded my Parallels VM application (on an Apple PowerBook) from
version 10 -> 11.
I reinstalled Windows 10 using another license for a current version
(the previous one was a licensed dev or early release version).
My code, Node version, devDependencies and versions were identical.
I've installed nodejs and gulp to auto compile the bootstrap less file (v 3.3.5) with gulp-watch-less module.
Everything is working fine expect one thing: I have to stop and start gulp to regenerate bootstrap.css.
For information, Gulp is detecting that a .less file included in bootstrap.less is modified, I have the following message:
[23:14:40] Starting 'default'...
[23:14:42] Finished 'default' after 2.04 s
[23:16:42] LESS saw variable-overrides.less was changed
[23:16:42] LESS saw variable-overrides.less was changed
[23:16:42] LESS saw bootstrap.less was changed:by:import
[23:16:42] LESS saw bootstrap.less was changed:by:import
But when I open the bootstrap.css file i don’t see the changes until I stop and start gulp again.
Here is the content of my gulpfile.js:
var gulp = require('gulp');
var watchLess = require('gulp-watch-less');
var less = require('gulp-less');
gulp.task('default', function () {
return gulp.src('./../../../../drupal8/sandbox/felicity/themes/octogone/less/bootstrap.less')
.pipe(watchLess('./../../../../drupal8/sandbox/felicity/themes/octogone/less/bootstrap.less'))
.pipe(less())
.pipe(gulp.dest('./../../../../drupal8/sandbox/felicity/themes/octogone/css'));
});
This code is from gulp-watch-less page
Can some one explain me why the bootstrap.css is not auto-re-generated?
I've solved the problem by using gulp-watch-less2
Gulp-watch-less wasn't compatible with gulp 3.9
In the JHipster gulpfile.js, there is a watch task set up for JS files which attempts to call a 'browserify' task. However, there is no 'browserify' task defined. If you are running 'gulp server' during development, the process will terminate as soon as you modify one of your JS files.
[11:43:19] Server started
[11:43:19] LiveReload started on port 35729
[11:43:19] Finished 'server' after 52 ms
**[11:52:14] Task 'browserify' is not in your gulpfile**
[11:52:14] Please check the documentation for proper gulpfile formatting
Is this a bug? I don't see why we would need to call to browserify with the current setup.
Yes it looks like a bug:https://github.com/jhipster/generator-jhipster/issues/367
The Gulp option is a community effort, and is less stable than the Grunt option.
However, of course, our goal is to have a correct and stable Gulp option for our soon-to-be-released 1.0 version.
Can you add your comments and feedback to the opened bug?