\Hey guys I'm totally stuck with this one.
Basically I want on my local dev to be able to have gulp watch my src js files files and transform them with babel and output them to my dist folder and then after that's done have pm2 restart node to load the latest changes.
The problem I'm having is I can't for the life of me figure out how to add a callback to watch so that the call to restart pm2 only happens after babel has done its magic transforming the files.
var gulp = require("gulp");
var babel = require("gulp-babel");
var pm2 = require("pm2");
var watch = require("gulp-watch");
var plumber = require("gulp-plumber");
var SRC = "src/**/*js";
var DIST = "dist/";
function restartPM2() {
//restart pm2 code in here
}
gulp.task("default", function () {
return gulp.src(SRC)
.pipe(watch(SRC))
.pipe(plumber())
.pipe(babel())
.pipe(plumber.stop())
.pipe(gulp.dest(DIST));
// somewhere in here need a call back after babel has transformed
// the code and saved it to dist/ to then call restartPM2
});
Any help would be greatly appreciated!
First, you're not watching the right way. Then, you should keep things separated. That's how I'd do:
var paths = {
babel: './somedir'
}
//basic babel task
gulp.task('babel', function() {
return gulp.src(paths.babel)
.pipe(babel())
.pipe(gulp.dest('./'))
})
//see below for some links about programmatic pm2
gulp.task('pm2', function(cb) {
pm2.connect(function() {
pm2.restart('echo', function() {
return cb()
})
})
})
gulp.task('default', ['babel']) //I don't restart pm2 with the default task but you could
//the watch task
gulp.task('watch', function() {
//their could be more watchers here ofc
gulp.watch(paths.babel, ['babel', 'pm2'])
})
If you launch gulp watch, it'll watch the paths.babel and, on change, execute both tasks (babel, pm2).
If you only execute gulp (or gulp babel in this example), it'll launch the appropriate task. You'd be able to launch gulp pm2 too.
Ressources:
pm2 programmatic doc
gulp doc
Related
I am super new to using Node.js, NPM and all these modern tools for better productivity and workflow.
So here are the details:
Node version - v8.10.0
Gulp CLI version - 2.0.1
Gulp Local version - 3.9.1
NPM version - 5.6.0
Windows 7
Node.js installed in D:/ProgramFiles
I've tried using gulp and it does work wonderfully with this script
var gulp = require('gulp'),
watch = require('gulp-watch');
gulp.task('default',function(){
console.log('Gulp task created');
});
gulp.task('html' , function() {
console.log('Something useful here');
});
gulp.task('watch', function() {
watch('/app/index.html', function() {
gulp.start('html');
});
});
So typing gulp does respond with the default task message. Typing gulp html does respond too with a console message. However, when i type gulp watch, it does work with following output.
Starting 'watch'...
Finished 'watch' after 7.99 ms
But whenever i make changes and save the index file, the cmd doesn't update. I've tried using Git Bash and other terminals. I've even installed previous node versions and tried solving this issue using those but no luck so far.
I tried editing the dependencies to an older version but that doesn't work too.
If anyone of you can help, I'll be thankful.
Updated with callback method to end process for a graceful exit and not use CTRL-C.
gulp.task('watch',function(){
gulp.watch('./data/index.html', function(){
gulp.start(['someOtherGulpTask']);
});
});
gulp.task('someOtherGulpTask', function () {
gulp.src('./test/sometest.js')
.pipe(gulpmocha(),setTimeout(function() {
cb();
}, 5000))
});
function cb(){
process.exit(1);
}
Original answer below
The order of execution of gulp tasks are -
the default task gets executed and then the subsequent ones unless the task
to be executed is specifically mentioned in the cmdline call to gulp as you
have mentioned - "gulp watch".
you can specify the order in the beginning of the gulpfile like
gulp.task('default', ['watch']);
or, you can start a task explicitly like so,
gulp.task('default',function(done){
console.log('Gulp task created');
gulp.start('watch');
done();
});
done is the callback that allows your waiting task to complete which is missing in your gulp file. Below is the complete gulp file that you can use to execute the watch task as you require.
var gulp = require('gulp'),
watch = require('gulp-watch');
gulp.task('default',function(done){
console.log('Gulp task created');
gulp.start('watch');
done();
});
gulp.task('html' , function() {
console.log('Something useful here');
});
gulp.task('watch', function() {
watch('./data/index.html', function() {
console.log('Some changes done');
});
});
gulp.task('watch', function () {
gulp.watch('./data/index.html', ['html']);
});
Avoid gulp.start, it is not documented or recommended.
I have following directory structure
workspace
|--dev
|--proj
|--css
|--style.css
|--js
|--app.js
|index.php
|something.html
|gulpfile.js
|package.json
I had installed vhost named as dev.local on ...workspace\dev. As you can see I have created a gulpfile.js in my proj directory.
Now if I run gulp browser-sync command my browser window is open showing following url http://dev.local:3000/proj/. It perfectly opens my index.php page but if I do any modification in my files they are not monitored and are not injected into my page. So there is no auto reload of my page.
Here is my gulpfile.js
var gulp = require('gulp');
var bs = require('browser-sync').create(); // create a browser sync instance.
gulp.task('browser-sync', function() {
bs.init({
open: 'external',
host: 'dev.local',
proxy: 'dev.local/proj'
});
});
gulp.task('watch', ['browser-sync'], function () {
gulp.watch("*.html,*.php,css/*.css,js/*.js").on('change', bs.reload);
});
Here is the output of my terminal
gulp browser-sync
[12:14:12] Using gulpfile ~/Documents/workspace/dev/proj/gulpfile.js
[12:14:12] Starting 'browser-sync'...
[12:14:12] Finished 'browser-sync' after 15 ms
[BS] Proxying: http://dev.local
[BS] Access URLs:
------------------------------------------------
Local: http://localhost:3000/proj
External: http://dev.local:3000/proj
------------------------------------------------
UI: http://localhost:3001
UI External: http://dev.local:3001
------------------------------------------------
I had already searched SO for various solutions but of no avail. Please help I am stuck.
UPDATE
I am using BrowserSync version 2.18.8 and gulp version 3.9.1
First of i would suggest to split the watching tasks into multiple, makes it easier to maintain and update. By reading your comments i can suggest to reverse the chain of gulp.tasks. You are currently loading 'browser-sync' from your watch task, but you can load your 'watch' task from your browser-sync task.
var gulp = require('gulp');
var bs = require('browser-sync').create(); // create a browser sync instance.
gulp.task('serve', function() {
bs.init({
open: 'external',
host: 'dev.local',
proxy: 'dev.local/proj'
});
});
gulp.task('watch', function () {
gulp.watch("*.html").on('change', bs.reload);
gulp.watch("*.php").on('change', bs.reload);
gulp.watch("./css/*.css").on('change', bs.reload);
gulp.watch("./js/*.js").on('change', bs.reload);
});
gulp.task('default', ['serve', 'watch']);
Also modifying css files can be streamed by browser-sync,
gulp.watch("css/*.css").on('change', bs.stream);
Next i would suggest to test weather or not the files are actually beeing monitored, and change the path of the gulp.watch tasks accordingly.
If you need help with this comment below.
Can you try this way? This is what I implemented in my application to finding the new uploaded images and resize and move to another folder.
This gulp code is watching new images from folder and reduce image size and move to scaled folder.
Probably it may helpful to you.
// include gulp
var gulp = require('gulp');
// include plug-ins
var imagemin = require('gulp-imagemin');
var watch = require("gulp-watch");
var newer = require("gulp-newer");
var gulpgm = require("gulp-gm");
//var imgSource = './app/client/media/site/max/*';
//var imgDestination = './app/client/media/site/min';
var imgSource = [
'./app/client/media/**/*.png',
'./app/client/media/**/*.jpg',
'./app/client/media/**/*.jpeg',
'./app/client/media/**/*.gif',
'./app/client/media/**/**/*.png',
'./app/client/media/**/**/*.jpg',
'./app/client/media/**/**/*.jpeg',
'./app/client/media/**/**/*.gif',
'./app/client/media/**/**/**/*.png',
'./app/client/media/**/**/**/*.jpg',
'./app/client/media/**/**/**/*.jpeg',
'./app/client/media/**/**/**/*.gif',
];
var imgDestination = './app/client/scaled/';
gulp
.task('imagemin', function () {
console.log("image min called");
return gulp.src(imgSource)
.pipe(watch(imgSource))
.pipe(newer(imgDestination))
.pipe(gulpgm(function (gmFile) {
return gmFile.minify();
}))
.pipe(gulp.dest(imgDestination));
});
gulp
.task("default", ["imagemin", "watch"]);
gulp
.task("watch", function () {
watch(imgSource, ["imagemin"]);
});
I have a problem running gulp watch on huge number of files (>=40000). I have latest gulp (3.9.1), node (6.4.0), npm (3.10.3).
To replicate error you have to create sample files
mkdir test && cd test && for i in {1..40000}; do echo "tt" >> test$i; done
gulpfile.js
var gulp = require('gulp')
var src = './**/*';
// works normally
//var src = './*';
gulp.task('watch', function () {
gulp.watch(src, {read: false}).on('change', function(file) {
console.log('watch running');
});
});
gulp.task('default', ['watch']);
Running watch on directory with that many files just fails without any error. Is there any way to make it work?
I have the snippet below that runs my tasks:
gulp.task('default', ['js', 'css', 'test'], function() {
process.exit();
});
When not using the process.exit(); line it works, and I see the app-xxxxxx.js in my build folder. Here's an abbreviated version of my js task (logic remains the same in the others but has a different responsibility):
gulp.task('js', function(cb) {
var scripts = ['script1.js', 'etcetc.js'];
var g = gulp.src(javascripts)
.pipe(concat('app-xxxxx.js'))
.pipe(gulp.dest('public/build')); //the file isn't in public/build
setTimeout(cb, 100);
return g;
});
My goal is to make sure all of my tasks finish, and when they do finish properly, exit gulp. What's the problem with the snippets above?
i hope to help, you do not need process.exit() because tasks gulp finish always if you use 'concat' your file should look this:
var gulp = require('gulp');
concat = require('concat');
gulp.task('task', function() {
gulp.src('js/*.js')
.pipe(concat('newFile.js', {newLine: ';'}))
.pipe(gulp.dest('js/build/'))
});
And finally write gulp task
I need to minify automatically all files when some change occurs in my js or less files.
I have some Tasks for Minify my less files and js files called 'styles','services' and 'controlles'.
For minify this files i just execute this task and everything forks fine:
gulp.task('minify', ['styles', 'services','controllers']);
Instead run this task manually i want to do automatic in development mode. How i can do this?
What you need to do is run your project with nodemon
nodemon = require('gulp-nodemon');
Nodemon runs your code and automatically restart when your code changes.
So, for automatic minification use this Gulp Task:
gulp.task('watch', function() {
gulp.watch(pathLess, ['styles']);
gulp.watch(pathJs.services, ['services']);
gulp.watch(pathJs.controllers, ['controllers']);
});
And then setup nodemon for run your project
gulp.task('nodemon', function () {
nodemon({ script: 'server.js'})
.on('start', ['watch'], function () {
console.log('start!');
})
.on('change', ['watch'], function () {
console.log('change!');
})
.on('restart', function () {
console.log('restarted!');
});
})
Now if you type in prompt : gulp nodemon your server.js will run, and you will be able to develop with automatic minification.
I hope it helps