Gulp-nodemon and watch task - node.js

I'm trying to create my build flow using gulp and nodemon. The objective is to watch sass files and compile them to css, and also restart node application when server file changes.
My gulpfile.js:
gulp.task('sass', function(){
return gulp.src(sassFilesTobeProcessed).
pipe(sass()).
pipe(concat('ready_stylesheet.css')).
pipe(gulp.dest('express/public/stylesheets'))
})
gulp.task('watch', function(){
return gulp.watch(allSassFiles, ['sass']);
})
gulp.task('serve', function(){
return nodemon({
script: 'express/app.js',
}).on('start', ['watch'])
.on('change', ['watch'])
.on('restart', function(){
console.log('restarted');
})
})
The watch task is working fine, files are compiled after change. But changes in my app.js server file doesn't trigger server restart. When I comment the .on statements it starts to work fine (server reloads), but then of course sass files are no longer observed. I assume hence, there is some conflict between these two, which I cannot discover. Appreciate any help! My OS - Windows 7, node 4.2.6, nodemon 1.9.1

Use a task dependency instead of .on(event) to start your watch task:
gulp.task('serve', ['watch'], function(){
return nodemon({
script: 'express/app.js',
})
.on('restart', function(){
console.log('restarted');
})
})

emit the restart event with nodemon
const cfg = require('../config')
const gulp = require('gulp')
const nodemon = require('nodemon')
const gnodemon = require('gulp-nodemon')
gulp.task('nodemon', ['ts', 'json'], () => {
gnodemon({
script: cfg.paths.main,
tasks: ['ts', 'json'],
ext: 'js',
watch: [cfg.paths.src],
// para no alterar el entorno de prodicion con test
env: {'NODE_ENV': process.env.NODE_ENV !== 'production'
? process.env.NODE_ENV || 'development' : 'development'}
})
.on('start', ['mocha'])
})
gulp.task('default', ['nodemon'], () => {
gulp.watch(cfg.paths.src, (event) => nodemon.emit('restart'))
})

Related

Gulp won't recompile sass when changes are made

I have created some tasks to recompile the sass with browser-sync whenever changes are made.
My gulp file is as follows:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
gulp.task('sass', function() {
return gulp.src('./css/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function() {
gulp.watch('./css/*.scss', ['sass']);
});
gulp.task('browser-sync', function() {
var files = [
'./*.html',
'./css/*.css',
'./img/*.{png,jpg,gif}',
'./js/*.js'
];
browserSync.init(files, {
server: {
baseDir: "./"
}
});
});
gulp.task('default', gulp.series('browser-sync', function() {
gulp.start('sass:watch');
}));
I am using node version 12.16.1, gulp-sass version 4.1.0, gulp-cli version 2.3.0, gulp local version 4.0.2 and browser-sync version 2.26.7.
Change this
// gulp.task('default', gulp.series('browser-sync', function() {
// gulp.start('sass:watch');
// }));
to
gulp.task('default', gulp.series('browser-sync', 'sass:watch'));
I seriously doubt that gulp v4 supports gulp.start.
Also change to this:
gulp.task('browser-sync', function(done) { // added done here
var files = [
'./*.html',
'./css/*.css',
'./img/*.{png,jpg,gif}',
'./js/*.js'
];
browserSync.init(files, {
server: {
baseDir: "./"
}
});
done(); // called done() here
});
When I ran your code I noticed that the sass:watch task was never starting, hence you were not watching any files at all. Here is what you should have seen in your terminal:
[21:26:21] Using gulpfile ~\OneDrive\Test Bed\simple\gulpfile.js
[21:26:21] Starting 'default'...
[21:26:21] Starting 'browser-sync'...
[21:26:21] Finished 'browser-sync' after 164 ms
[21:26:21] Starting 'sass:watch'... // this line missing when running your code
[Browsersync] Access URLs:
-----------------------------------
Local: http://localhost:3000
External: http://10.0.0.186:3000
-----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
-----------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...
Don't be fooled by the last line, browser-sync always spits that out. The reason why the sass:watch task was not starting was because gulp could never get past the browser-sync task - you have to signal gulp somehow that the task has completed and done is one way to do that. Then gulp can go to the next task, which was sass:watch. See gulp: async completion.
You also needed to make the change you noted in your comment gulp.watch('./css/*.scss', gulp.series('scss'));
There is nothing else wrong with your code - it runs perfectly fine for me.
Your Gulpfile isn't watching the sass files when changes are made. It's only looking for CSS changes. This is part of my Gulp task function to look for SCSS file changes
function serve() {
browserSync.init({
open: false,
port: 8000,
server: {
baseDir: 'src/',
index: 'index.html'
},
});
gulp.watch(paths.scss.src, gulp.series([compileSCSS]));
}
And this is my SCSS compile function
function compileSCSS() {
return gulp
.src('./src/scss/style.scss')
.pipe(plugins.rename('style.css'))
.pipe(gulp.dest('./src/css/'));
}
I have prepared a Gulp function with many required tools. You can check here
https://gist.github.com/choyan/ab034dc0539942ee0d8f0ab9788d790f

How to pass process.env.NODE_ENV from Gulp to Webpack?

I have a gulpfile, where I create a webpackDevServer to live-update my js code. I set a process.env.NODE_ENV variable in gulpfile, but for some reason webpack doesn't see it - it is undefined.
Here's the relevant piece of my gulpfile.js:
gulp.task("watch", ["_set-env:dev"], function() {
// modify default webpack configuration for Development Server
var webpackDevConfig = Object.create(webpackConfig);
webpackDevConfig.devtool = "eval";
webpackDevConfig.debug = "true";
new webpackDevServer(webpack(webpackDevConfig), {
proxy: {
"/api/*": {target: "http://localhost:8000", secure: false},
"/static/*": {target: "http://localhost:8000", secure: false},
"/media/*": {target: "http://localhost:8000", secure: false}
}
}).listen(8001, "localhost", function (err) {
if (err) throw new gutil.PluginError("webpack-dev-server", err);
gutil.log("[webpack-dev-server]", "http://localhost:8001" + webpackDevConfig.output.publicPath);
});
});
gulp.task("_set-env:dev", function() {
gutil.log("set-env", "ENV => development");
genv({
vars: {
NODE_ENV: "development"
}
});
});
Then in webpack I check its value and it is undefined:
const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
...
const environmentsFile = path.join(__dirname, "/environments.json");
const nodeModulesPath = path.join(__dirname, "/node_modules");
const bowerComponentsPath = path.join(__dirname, "/bower_components");
console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
console.log(process.env.NODE_ENV);
const webpackConfig = {
entry: {
app: ["app.js"]
},
And on the console I see:
$ gulp watch
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
undefined
[22:28:34] Using gulpfile ~/Documents/frontend/gulpfile.js
[22:28:34] Starting '_set-env:dev'...
[22:28:34] set-env ENV => development
[22:28:34] Finished '_set-env:dev' after 7.63 ms
[22:28:34] Starting 'watch'...
You probably have something like this close to the top of your gulpfile:
var webpackConfig = require('./webpack.config.js');
That means your webpack configuration is evaluated before the _set-env:dev task even runs. Remember: your gulpfile only defines tasks. The tasks themselves aren't run until after the entire gulpfile has been evaluated.
You need to defer requiring your webpack configuration until after the _set-env:dev task has run by deleting the line at the top of your gulpfile and putting the require() directly into your watch task:
gulp.task("watch", ["_set-env:dev"], function() {
// modify default webpack configuration for Development Server
var webpackDevConfig = Object.create(require('./webpack.config.js'));

React + Gulp + Babelify

I am trying to convert my working app from React and Gulp with ES5 to React + Gulp and ES6.
I only tried to replace reactify with babelify but i am still getting gulp error: Illegal import declaration
Here is my gulpfile.js:
"use strict";
var gulp = require('gulp');
var connect = require('gulp-connect'); //Runs a local dev server
var open = require('gulp-open'); //Open a URL in a web browser
var browserify = require('browserify'); // Bundles JS
var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp
var concat = require('gulp-concat'); //Concatenates files
var lint = require('gulp-eslint'); //Lint JS files, including JSX
var babelify = require("babelify");
var config = {
port: 9005,
devBaseUrl: 'http://localhost',
paths: {
html: './src/*.html',
js: './src/**/*.js',
css: [
'node_modules/bootstrap/dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
'node_modules/toastr/toastr.css'
],
dist: './dist',
mainJs: './src/main.js'
}
}
//Start a local development server
gulp.task('connect', function() {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true
});
});
gulp.task('open', ['connect'], function() {
gulp.src('dist/index.html')
.pipe(open({ uri: config.devBaseUrl + ':' + config.port + '/'}));
});
gulp.task('html', function() {
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload());
});
gulp.task('js', function() {
browserify(config.paths.mainJs)
.transform(babelify)
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.paths.dist + '/scripts'))
.pipe(connect.reload());
});
gulp.task('css', function() {
gulp.src(config.paths.css)
.pipe(concat('bundle.css'))
.pipe(gulp.dest(config.paths.dist + '/css'));
});
gulp.task('lint', function() {
return gulp.src(config.paths.js)
.pipe(lint({config: 'eslint.config.json'}))
.pipe(lint.format());
});
gulp.task('watch', function() {
gulp.watch(config.paths.html, ['html']);
gulp.watch(config.paths.js, ['js', 'lint']);
});
gulp.task('default', ['html', 'js', 'css', 'lint', 'open', 'watch']);
and this is my js file (main.js):
"use strict";
var React = require('react');
var Router = require('react-router');
var routes = require('./routes');
import React from 'react';
Router.run(routes, function(Handler) {
React.render(<Handler/>, document.getElementById('app'));
});
Thanks a lot
You need to install babel preset
npm i babel-preset-es2015 --save-dev
and add config to .babelrc like this
{
"presets": [
"es2015"
]
}
Or it's better to use gulp-babel
$ npm install --save-dev gulp-babel babel-preset-es2015
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', () => {
return gulp.src('src/app.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist'));
});
https://www.npmjs.com/package/gulp-babel

Using browser-sync with node.js app

I have an existing node app. My Node directory structure is setup like this:
./
node_modules/
src/
views/
index.html
...
server.js
test/
gulpfile.js
package.json
I can successfully start my app my running node ./src/server.js from the root shown above. Once started, I can visit "http://localhost:3000" in the browser and see the contents of index.html like I am expecting.
I want to speed up my development and I recently learned about browsersync. In an attempt to include it in my gulp process, I have the following:
var browserSync = require('browser-sync').create();
browserSync.init({
server: {
baseDir: './src/',
server: './src/server.js'
}
});
When I run gulp, I see the following in the command-line:
BS] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://[ip address]:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://[ip address]:3001
--------------------------------------
My browser is then opened and it attempts to load http://localhost:3000. At this point, I see the following error in the browser window:
Cannot GET /
What am I doing wrong? I can successfully visit http://localhost:3000 if I start my app using node ./src/server.js, however, its like its not running with BrowserSync. What am I doing wrong?
You already have a node server so i think what you need is Proxy.
And i would also suggest you to use nodemon for going one step ahead in your speed up development thing. It will automatically restart your node development server in case of any changes. So a sample gulpfile in your case(with nodemon) might look like
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
gulp.task('browser-sync', ['nodemon'], function() {
browserSync.init(null, {
proxy: "http://localhost:3700", // port of node server
});
});
gulp.task('default', ['browser-sync'], function () {
gulp.watch(["./src/views/*.html"], reload);
});
gulp.task('nodemon', function (cb) {
var callbackCalled = false;
return nodemon({script: './src/server.js'}).on('start', function () {
if (!callbackCalled) {
callbackCalled = true;
cb();
}
});
});
~
Why do you want to use the built-in server if you have your own in ./src/server.js ?
Check this, What server in browsersync does is create a static server for basic HTML/JS/CSS websites, so you might need to use the proxy feature as shown here.
This means that you need to run your server as normally and wrap it up in the proxy.
Using the express generator default folder structure with the start script in bin\www, and using the ejs template, this is how i modified my gulpfile.js :
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
gulp.task('browser-sync', ['nodemon'], function() {
browserSync.init(null, {
proxy: "http://localhost:8000", // port of node server
});
});
gulp.task('default', ['browser-sync'], function () {
gulp.watch(["./views/*.ejs"], reload);
});
gulp.task('nodemon', function (cb) {
var callbackCalled = false;
return nodemon({
script: './bin/www',
env: {
PORT: 8000
}}).on('start', function () {
if (!callbackCalled) {
callbackCalled = true;
cb();
}
});
});
Notice that am watching for any files that end in .ejs. I also got a problem when using nodemon with the port in use, so i added an env to pass the port as 8000,
env: { PORT: 8000 }
Since the tag grunt is missing from the question, here's a solution that works using only NPM (package.json):
"scripts": {
"start": "browser-sync start --serveStatic 'src' --serveStatic 'node_modules' --files 'src'"
}
Now all the <script> src attributes can be relative:
<script src="/stats-js/build/stats.min.js"></script>

How to configure port in browser-sync

I have a gulp task running with browser-sync,by default its running on port 3000 of node.js server.I want to change the default port to any other port like 3010.
var gulp = require('gulp'),
connect = require('gulp-connect'),
browserSync = require('browser-sync');
gulp.task('serve', [], function() {
browserSync(
{
server: "../ProviderPortal"
});
});
/*** 8. GULP TASKS **********/
gulp.task('default', ['serve']);
I am using:
browser-sync version-2.6.1
I tried configuring the gulp task like:
gulp.task('serve', [], function() {
browserSync(
{
ui: {
port: 8080
},
server: "../ProviderPortal"
});
});
But it didnot work.
Answer based on the documentation links (link1, link2).
You are using browser-sync version 2.0+, they have a different recommended syntax. Using that syntax your code could be like this:
// require the module as normal
var bs = require("browser-sync").create();
....
gulp.task('serve', [], function() {
// .init starts the server
bs.init({
server: "./app",
port: 3010
});
});
You specify required port directly in configuration object.

Resources