Bundling javascript files to watch with Gulp and Nodeman - gulp

I have the start and deploy tasks working the way I want them to but I am trying to figure out how to update public/js/bundle.js when I make a change in app.js so that it can be watched.
Here's what I got so far:
var gulp = require('gulp');
var streamify = require('gulp-streamify');
var uglify = require('gulp-uglify');
var transform = require('vinyl-source-stream');
var browserify = require('browserify');
var rename = require('gulp-rename');
var nodemon = require('gulp-nodemon');
var ios = browserify({
entries:['app.js']
});
const bundle = () => {
process.env.NODE_ENV = 'production';
ios.require('./app-ios.js', {expose:'appalias'})
.bundle()
.pipe(transform('bundle-ios.js'))
.pipe(gulp.dest('./public/js'))
.pipe(streamify(uglify()))
.pipe(rename('bundle-ios.min.js'))
.pipe(gulp.dest('./public/js'));
return ios;
}
const start = () => {
return nodemon({
script: 'server.js',
watch: ['server.js', 'public/js/*', 'public/index.html', 'public/css/*'],
ext: 'js html css',
env: { 'NODE_ENV': 'development' },
});
}
// Start local server and watch bundles.
gulp.task('start', start);
// Build minified versions for prod.
gulp.task('deploy', bundle);

The fix was to watch all the individual javascript component and model files and add a compile task to the start task.
// Bundle and minify for development, use development version of libraries.
const compile = () => {
process.env.NODE_ENV = 'development';
const bundleAndroidDev = ios.require('./app-ios.js', {expose:'appalias'})
.bundle()
.pipe(transform('bundle-ios.js'))
.pipe(gulp.dest('./public/js'));
return bundleIosDev;
}
// Start local server and watch for changes in compiled bundles.
const start = () => {
return nodemon({
script: 'server.js',
watch: ['server.js', 'apps/appName/components/*', 'apps/appName/models/*', 'public/index.html', 'public/css/*'],
ext: 'js html css',
tasks: ['compile'],
env: { 'NODE_ENV': 'development' }
});
}
// Compile bundle's on save.
gulp.task('compile', compile);

Related

SCSS to Style.css

Long story story, the main developer that worked on this is no longer with the company and I have to take over the project that they built out - So all help would be appreciated with this.
I'm not too familiar with WordPress nor SCSS/Foundation so this will be a learning process. I need to make a css change and deploy it, but it's not showing the changes on my local environment at all.
Here is the knowledge that I have:
- Foundation was used to build this
- SCSS is being converted to Style.css
- https://cdn.site.pl/wp-content/themes/sites/style.css?ver=4.9.10 - There is a version being applied to the end of style.css
Here are the tasks that are in my gulpfile.js:
Here is his documentation:
The default gulp task runs both gulp scripts and gulp styles. To run
this task, navigate in Terminal to the project's htdocs directory, and
type:
gulp
I get this in response:
[14:00:37] Task never defined: default
[14:00:37] To list available tasks, try running: gulp --tasks
Below, I will be providing the whole gulpfile.js file
const argv = require('yargs').argv;
const {
src,
dest,
parallel,
series,
watch
} = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const concat = require('gulp-concat');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
// Usage in gulp: gulp task-name --theme=theme-name
// Default value is 'f-sites'
const themeName = argv.theme ? argv.theme : 'f-sites';
// GULP CONFIG
const config = {
themeName: themeName,
themeDirectory: `wp-content/themes/${themeName}`
};
// GULP TASKS
// SCSS/CSS TASKS
//==================================================
function sassToCss() {
const nodeModulesSassPaths = [
'node_modules/foundation-sites/scss',
'node_modules/slick-carousel/slick',
'node_modules/jquery-fancybox/source/scss',
'node_modules/font-awesome/scss'
];
const srcPaths = [
`${config.themeDirectory}/scss/theme.scss`,
`${config.themeDirectory}/scss/theme-rtl.scss`
];
return src(srcPaths, { sourcemaps: true })
.pipe(sass({ includePaths: nodeModulesSassPaths }).on('error', sass.logError))
.pipe(autoprefixer({ browsers: ['last 2 versions', 'ie >= 10'] }))
.pipe(dest(`${config.themeDirectory}/css`, { sourcemaps: true }));
}
function cssConcatLTR() {
const srcFiles = [
`${config.themeDirectory}/css/wordpress.css`,
'./node_modules/animate.css/animate.css',
`${config.themeDirectory}/css/theme.css`,
];
return src(srcFiles, { sourcemaps: true })
.pipe(concat('project.css'))
.pipe(dest(`${config.themeDirectory}/css`, { sourcemaps: true }));
}
function cssConcatRTL() {
const srcFiles = [
config.themeDirectory + '/css/wordpress.css',
'./node_modules/animate.css/animate.css',
config.themeDirectory + '/css/theme-rtl.css'
];
return src(srcFiles, { sourcemaps: true })
.pipe(concat('project-rtl.css'))
.pipe(dest(`${config.themeDirectory}/css`, { sourcemaps: true }));
}
function cssMinifyLTR() {
const plugins = [cssnano()];
return src(`${config.themeDirectory}/css/project.css`)
.pipe(postcss(plugins))
.pipe(rename('style.css'))
.pipe(dest(config.themeDirectory));
}
function cssMinifyRTL() {
const plugins = [cssnano()];
return src(`${config.themeDirectory}/css/project-rtl.css`)
.pipe(postcss(plugins))
.pipe(rename('style-rtl.css'))
.pipe(dest(config.themeDirectory));
}
exports.default = parallel(
series(
sassToCss,
parallel(cssConcatLTR, cssConcatRTL),
parallel(cssMinifyLTR, cssMinifyRTL)
),
series(jsConcat, jsMinify)
);
exports.styles = series(
sassToCss,
parallel(cssConcatLTR, cssConcatRTL),
parallel(cssMinifyLTR, cssMinifyRTL)
);
exports.scripts = series(jsConcat, jsMinify);
This may be caused by the version of gulp-cli, you can try to upgrade it.
Relevant issues:
https://github.com/gulpjs/gulp-cli/issues/191
https://github.com/gulpjs/gulp/issues/1634

how to add browser-sync in gulp-4

//Importing gulp files to variables
const { src , dest , watch , series , parallel } = require('gulp');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const concat = require('gulp-concat');
const postcss = require('gulp-postcss');
const replace = require('gulp-replace');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const browserSync = require ('browser-sync').create();
// File path variables in my projects folder
const files = {
scsspath:'assets/scss/**/*.scss' ,
jspath:'assets/js/**/*.js'}
//Sass Task
function scssTask(){
return src(files.scsspath)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(sourcemaps.write('.'))
.pipe(dest('assets/css'))
.pipe(browsersync.stream());}
//JsTask
function jsTask(){
return src(files.jspath)
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(dest('assets/js')).pipe(browsersync.stream());}
//WatchTask
function watchTask(){
watch([files.scsspath , files.jspath], parallel(scssTask,jsTask));}
//DefaultTask
//I don't know how to use browser-sync in gulp-4
exports.default = series(parallel(scssTask,jsTask) , cashBustTask ,
watchTask,browsersync);
Create a separate task for browser-sync. Here's an example of how I've set this up:
const bs = require('browser-sync').create();
// Other inputs used with browser-sync
const { src, dest, watch } = require('gulp');
const sass = require('gulp-sass');
function browserSync() {
// Run serveSass function when starting the dev server to make sure the SCSS & dev CSS are the same
serveSass();
bs.init({
// Dev server will run at localhost:8080
port: 8080,
server: {
// I'm using 'src' as my base directory
baseDir: 'src',
},
});
// These watch for changes to files and reload in the browser
watch('src/*.html').on('change', bs.reload);
watch('src/scss/*.scss', serveSass);
watch('src/js/*.js').on('change', bs.reload);
}
// This compiles Sass when running browser-sync and reloads the CSS
function serveSass() {
// My dev Sass files are found in 'src/scss/'
return src('src/scss/*.scss')
.pipe(sass())
// My dev CSS files are found in 'src/css/'
.pipe(dest('src/css))
.pipe(bs.stream());
}
// Then I run 'gulp serve' in the terminal to start browser-sync and my dev server
exports.serve = browserSync;
My full Gulp setup is here if you want more context.
Quick solution:
Add a function to trigger BrowserSync:
function reload(){
browserSync.reload();
}
Modify your watchTask() function to:
function watchTask(){
browserSync.init({
server: { baseDir: "./dist" }
});
gulp.watch([files.scsspath , files.jspath], parallel(scssTask,jsTask,reload));
}
Modify your exports to:
exports.default = watchTask;
I found this guide to upgrade gulp 4, that explains that gulp.series or gulp.parallel needs to be used. Example:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('browserSyncReload', gulp.series( function(done) {
browserSync.reload();
done();
}));
gulp.task('default', gulp.series( function(done) {
browserSync.init({
notify: false,
proxy: "127.0.0.1:5003/nl"
});
gulp.watch("app/templates/**/*.", gulp.series('browserSyncReload'));
gulp.watch("app/static/**/*.*", gulp.series('browserSyncReload'));
done();
}));

gulp browserify does not exit

Following is the code I inherited for gulp and browserify
'use strict';
var gulp = require('gulp'),
browserify = require('browserify'),
glob = require('glob'),
path = require('path'),
source = require('vinyl-source-stream'),
notifier = require('node-notifier'),
_ = require('underscore'),
watchify = require('watchify'),
jshint = require('gulp-jshint'),
chalk = require('chalk'),
del = require('del'),
webserver = require('gulp-webserver'),
cleanCSS = require('gulp-clean-css'),
babelify = require("babelify"),
jasmine = require('gulp-jasmine');
var browserifyables = './web-app/**/*-browserify.js';
function logError(error){
/* jshint validthis: true */
notifier.notify({
title: 'Browserify compilation error',
message: error.toString()
});
console.error(chalk.red(error.toString()));
this.emit('end');
}
function bundleShare(b, config) {
b.bundle()
.on('error', logError)
.pipe(source(config.destFilename))
.pipe(gulp.dest(config.destDir));
}
function browserifyShare(config, watch) {
var browserifyConfig = {
cache: {},
packageCache: {},
fullPaths: true,
insertGlobals: true
};
if(process.env.NODE_ENV !== 'production'){
browserifyConfig.debug = true;
}
var b = browserify(browserifyConfig);
b.transform('browserify-css', {});
b.transform(babelify, {presets: ["es2015"]});
// Need to fix dollar sign getting effed in angular when it gets minified before we can enable
if(process.env.NODE_ENV === 'production'){
b.transform('uglifyify', {global: true});
}
if(watch) {
// if watch is enable, wrap this bundle inside watchify
b = watchify(b);
b.on('update', function(ids) {
ids.forEach(function(id){
console.log(chalk.green(id + ' finished compiling'));
});
bundleShare(b, config);
});
b.on('log', function(message){
console.log(chalk.magenta(message));
});
}
// source to watch
b.add(config.sourceFile);
bundleShare(b, config);
}
gulp.task('minify-css', function() {
var minifyConfig = {compatibility: 'ie8'};
if(process.env.NODE_ENV !== 'production'){
minifyConfig.debug = true;
}
return gulp.src('./web-app/css/*/*.css')
.pipe(cleanCSS(minifyConfig))
.pipe(gulp.dest('./web-app/css'))
;
});
gulp.task('browserify', ['minify-css'], function(){
glob(browserifyables, {}, function(err, files){
_.each(files, function(file){
browserifyShare({
sourceFile: file,
destDir: path.dirname(file),
destFilename: path.basename(file).replace('-browserify', '')
});
});
});
});
I run the gulp task using
NODE_ENV='production' gulp browserify
The gulp tasks complete but does not terminate. The following is the output
[22:40:57] Using gulpfile ~/some/dir/Gulpfile.js
[22:40:57] Starting 'minify-css'...
[22:40:58] Finished 'minify-css' after 565 ms
[22:40:58] Starting 'browserify'...
[22:40:58] Finished 'browserify' after 2.12 ms
This slows down my build on jenkins considerably.
However if i comment out this line:
b.add(config.sourceFile);
The tasks exit but then it does not work ( for obvious reasons ).
So not sure what I am missing here. I need to figure out what prevents the task from exiting.

node-hbsfy not compiling templates with Gulp

I'm simply trying to compile hbs templates via Browserify and Gulp, but the compilation process fails as soon as any HTML markup is encountered from my hbs file.
I've confirmed this by removing the HTML code within the hbs file, at which point Browserify runs as expected.
Here is a simplified version of my Gulp task:
const _gulp = require('gulp');
const _browserify = require('browserify');
const _remapify = require('remapify');
const _hbsfy = require('hbsfy');
const _vinylSourceStream = require('vinyl-source-stream');
const _vinylBuffer = require('vinyl-buffer');
_gulp.task('js:dev', () => {
return _browserify({entries: './src/js/app.js', debug: true})
.plugin(_remapify, [
{
src: '**/*.hbs', // glob for the files to remap
cwd: './src/markup/components',
expose: 'components' // this will expose './src/markup/components' as 'components'
}
])
.transform(_hbsfy)
.bundle()
.pipe(_vinylSourceStream('app.js'))
.pipe(_vinylBuffer())
.pipe(_gulp.dest('dist'))
});
The hbs template:
<div class="menu"> </div>
The main JS file:
(function (){
const _handlebars = require('hbsfy/runtime');
function init () {
_handlebars.registerPartial('menu', require('components/menu.hbs'));
}
document.addEventListener('DOMContentLoaded', init);
})();
What could be going wrong? It's as if the hbsfy transform isn't running properly...
It seems this issue is actually caused by the remapify plugin. Compilation works as expected using pathmodify instead.
Here is my updated Gulp file:
const _gulp = require('gulp');
const _browserify = require('browserify');
const _pathmodify = require('pathmodify');
const _hbsfy = require('hbsfy');
const _vinylSourceStream = require('vinyl-source-stream');
const _vinylBuffer = require('vinyl-buffer');
_gulp.task('js:dev', () => {
return _browserify({entries: './src/js/app.js', debug: true})
.plugin(_pathmodify, {
mods: [
_pathmodify.mod.dir('components', process.cwd() + '/src/markup/partials/components')
]
})
.transform(_hbsfy)
.bundle()
.pipe(_vinylSourceStream('app.js'))
.pipe(_vinylBuffer())
.pipe(_gulp.dest('dist'))
});

Start hexo to generate a watch in a gulpfile.js?

I have the following gulpfile.js
var gulp = require('gulp'),
browserSync = require('browser-sync'),
sass = require('gulp-sass'),
bower = require('gulp-bower'),
notify = require('gulp-notify'),
reload = browserSync.reload,
bs = require("browser-sync").create(),
Hexo = require('hexo'),
hexo = new Hexo(process.cwd(), {});
var src = {
scss: './scss/',
css: './source/css',
ejs: 'layout'
},
watchFiles = [
'./scss/*.scss',
'*/*.ejs'
];
// Static Server + watching scss/html files
gulp.task('serve', ['sass:watch'], function() {
// init starts the server
bs.init(watchFiles, {
server: {
baseDir: "../../public"
},
logLevel: "debug"
});
hexo.init();
hexo.call('generate', {}, function(){
console.log('Started Hexo Server');
})
});
How does one start hexo in a watch in a gulpfile?
The rest of the gulpfile is here:
https://github.com/chrisjlee/hexo-theme-zurb-foundation/blob/master/gulpfile.js
The hexo index file takes in arguments here; but i couldn't figure out the arguments;
https://github.com/hexojs/hexo/blob/master/lib/hexo/index.js
You can pass arguments in the second parameter. For example:
hexo.init().then(function(){
return hexo.call('generate', {watch: true});
}).catch(function(err){
console.log(err);
});