Skip to content

Instantly share code, notes, and snippets.

@yofisim
Created November 11, 2021 13:50
Show Gist options
  • Save yofisim/5ecdaaef6198aa4be4d0222404248d64 to your computer and use it in GitHub Desktop.
Save yofisim/5ecdaaef6198aa4be4d0222404248d64 to your computer and use it in GitHub Desktop.
Gulp 4 + nodemon + livereload for AngularJS and legacy monolithic apps
'use strict'
require('custom-env').env(); //Load .env file
const { src, dest, watch } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const uglify = require('gulp-uglify-es').default;
const browserify = require('browserify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const nodemon = require('gulp-nodemon');
const livereload = require('gulp-livereload');
const notify = require('gulp-notify');
const compileSass = () => {
return src('./app/app.scss')
.pipe(autoprefixer())
.pipe(
sass({
'outputStyle': 'compressed'
})
.on('error', sass.logError))
.pipe(dest('./app/build'))
.pipe(livereload())
.pipe(notify('CSS Reloaded'));
};
const watchSass = () => {
return watch([
'./app/Components/**/**/*.scss',
'./app/Directives/**/*.scss',
'./app/app.scss'
], compileSass);
};
const compileJs = async () => {
let b = browserify({
entries: './app/app.js',
});
return b.bundle()
.pipe(source('app.js'))
.pipe(buffer())
.pipe(uglify({
ecma: 5,
keep_fnames: true,
keep_classnames: true,
mangle: false
}).on('error', function (e) {
console.log(e)
}))
.pipe(dest('./app/build'))
.pipe(livereload())
.pipe(notify('JS Reloaded'));
};
const watchJs = async () => {
return watch([
'./app/Components/**/**/*.js',
'./app/Directives/**/*.js',
'./app/Services/*.js',
'./app/app.js'
], compileJs);
}
const compileHtml = (file) => {
return src(file)
.pipe(livereload())
.pipe(notify('HTML Reloaded'));
}
const watchHtml = async () => {
return watch('./app/Components/**/**/*.html').on('change', (file) => {
compileHtml(file);
});
}
const nodemonServer = async (cb) => {
livereload.listen();
nodemon({
script: 'server.js',
env: {'NODE_ENV': 'dev'},
ignore: [
'/app/',
'/app/build/',
'/app/Components/',
'/app/Directives/',
'/app/Services/',
]
}).on('start', () => {
})
.on('restart', (files) => {
livereload.changed(files);
});
await Promise.resolve(cb);
}
const start = async () => {
watchHtml();
watchSass();
watchJs();
nodemonServer();
}
exports.compileSass = compileSass;
exports.compileJs = compileJs;
exports.watchSass = watchSass;
exports.watchJs = watchJs;
exports.start = start;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment