Gulp Error Spawn EN0ENT - node.js

It is my goal to create a set of files and packages to easily share among my team. Currently I have GulpJs setup on my local Mac 10.9.2, and it compiles correctly. However, when I share my setup with my two colleagues, and they run the gulp command there is an error:
events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:998:11)
at Process.ChildProcess._handle.onexit (child_process.js:789:34)
The follow is my package.json file:
{
"name": "MyApp",
"version": "0.0.1",
"description": "Name build process for responsive development frameworks",
"author": "My Name",
"devDependencies": {
"gulp-util": "^2.2.14",
"gulp": "^3.6.2",
"gulp-compass": "^1.1.8",
"gulp-concat": "^2.2.0",
"gulp-uglify": "^0.2.1",
"gulp-livereload": "^1.2.0",
"tiny-lr": "0.0.5",
"gulp-jshint": "^1.5.3",
"gulp-minify-html": "^0.1.1",
"gulp-minify-css": "^0.3.0",
"image-min": "^0.4.5",
"gulp-imagemin": "^0.5.0",
"gulp-newer": "^0.3.0"
}
}
Then I have my gulpfile.js setup as such:
// include gulp
var gulp = require('gulp'),
gutil = require('gulp-util');
// include plug-ins
var compass = require('gulp-compass'),
jshint = require('gulp-jshint'),
imagemin = require('gulp-imagemin'),
newer = require('gulp-newer'),
minifyHTML = require('gulp-minify-html'),
minifyCSS = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
reload = require('gulp-livereload'),
lr = require('tiny-lr'),
server = lr();
var paths = {
jsSrc: [
'./src/js/vendor/jquery.js',
'./src/js/vendor/fastclick.js',
'./src/js/vendor/foundation.js'
],
ieJsSrc: [
'./src/js/vendor/foundation-ie/jquery.js',
'./src/js/vendor/foundation-ie/jquery.foundation.buttons.js',
'./src/js/vendor/foundation-ie/jquery.foundation.clearing.js',
'./src/js/vendor/foundation-ie/jquery.foundation.forms.js',
'./src/js/vendor/foundation-ie/jquery.foundation.reveal.js',
'./src/js/vendor/foundation-ie/jquery.foundation.tabs.js',
'./src/js/vendor/foundation-ie/jquery.foundation.tooltips.js'
],
jsDst: './src/js',
jsBuild: './build/common/js',
imgSrc: './src/img/*',
imgDst: './build/common/img',
imgBgSrc: './src/img/bg/*',
imgPhotoSrc: './src/img/photos/*',
imgBgDst: './build/common/img/bg',
imgPhotoDst: './build/common/img/photos',
htmlSrc: './src/**/*.html',
htmlDst: './build',
scssSrc: [
'./src/_scss/utsw.scss',
'./src/_scss/utsw-ie.scss',
'./src/_scss/themes/**/*.scss'
],
scssDst: './src/common/css/',
cssMedSrc: './src/css/themes/root/*.css',
cssMedDst: './src/root/css/',
cssMedBuild: './build/root/css/',
cssEaSrc: './src/css/themes/sites/early-access/*.css',
cssEaDst: './src/sites/early-access/css',
cssEaBuild: './build/sites/early-access/css',
cssProSrc: './src/css/themes/profile/*.css',
cssProDst: './src/profile/css/',
cssProBuild: './build/profile/css/',
cssNetSrc: './src/css/themes/intranet/*.css',
cssNetDst: './src/intranet/css/',
cssNetBuild: './build/intranet/css/'
};
// JS hint task
gulp.task('jshint', function() {
return gulp.src(paths.jsSrc)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// minify new or changed HTML pages
gulp.task('html', function() {
return gulp.src(paths.htmlSrc)
.pipe(gulp.dest(paths.htmlDst));
});
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
return gulp.src(paths.jsSrc)
.pipe(concat('vendor.min.js'))
.pipe(gulp.dest(paths.jsDst))
.pipe(uglify())
.pipe(gulp.dest(paths.jsBuild));
});
gulp.task('ieScripts', function() {
return gulp.src(paths.ieJsSrc)
.pipe(concat('ie-vendor.min.js'))
.pipe(gulp.dest(paths.jsDst))
.pipe(uglify())
.pipe(gulp.dest(paths.jsBuild));
});
// Minify any new images
gulp.task('images', function() {
return gulp.src(paths.imgSrc)
.pipe(newer(paths.imgDst))
.pipe(imagemin({optimizationLevel: 5}))
.pipe(gulp.dest(paths.imgDst));
});
// Minify any new images
gulp.task('bg', function() {
// Add the newer pipe to pass through newer images only
return gulp.src(paths.imgBgSrc)
.pipe(newer(paths.imgBgDst))
.pipe(imagemin({optimizationLevel: 5}))
.pipe(gulp.dest(paths.imgBgDst));
});
// Minify any new images
gulp.task('photos', function() {
// Add the newer pipe to pass through newer images only
return gulp.src(paths.imgPhotoSrc)
.pipe(newer(paths.imgPhotoDst))
.pipe(imagemin({optimizationLevel: 5}))
.pipe(gulp.dest(paths.imgPhotoDst));
});
gulp.task('compass', function() {
return gulp.src(paths.scssSrc)
.pipe(compass({
sass: './src/_scss',
css: './src/css',
image: './src/img'
}))
.on('error', function(err) {
// Would like to catch the error here
})
.pipe(gulp.dest('./src/temp'));
});
gulp.task('rootCSS', function() {
return gulp.src(paths.cssMedSrc)
.pipe(gulp.dest(paths.cssMedDst))
.pipe(minifyCSS())
.pipe(gulp.dest(paths.cssMedBuild));
});
gulp.task('eaCSS', function() {
return gulp.src(paths.cssEaSrc)
.pipe(gulp.dest(paths.cssEaDst))
.pipe(minifyCSS())
.pipe(gulp.dest(paths.cssEaBuild));
});
gulp.task('proCSS', function() {
return gulp.src(paths.cssProSrc)
.pipe(gulp.dest(paths.cssProDst))
.pipe(minifyCSS())
.pipe(gulp.dest(paths.cssProBuild));
});
gulp.task('netCSS', function() {
return gulp.src(paths.cssNetSrc)
.pipe(gulp.dest(paths.cssNetDst))
.pipe(minifyCSS())
.pipe(gulp.dest(paths.cssNetBuild));
});
// Rerun the task when a file changes
gulp.task('watch', function() {
var server = reload();
gulp.watch(paths.htmlSrc, ['html']);
gulp.watch(paths.jsSrc, ['scripts']);
gulp.watch(paths.ieJsSrc, ['ieScripts']);
gulp.watch(paths.imgSrc, ['images']);
gulp.watch(paths.imgBgSrc, ['bg']);
gulp.watch(paths.imgPhotoSrc, ['photos']);
gulp.watch(paths.scssSrc, ['compass']);
gulp.watch(paths.cssMedSrc, ['rootCSS']);
gulp.watch(paths.cssEaSrc, ['eaCSS']);
gulp.watch(paths.cssProSrc, ['proCSS']);
gulp.watch(paths.cssNetSrc, ['netCSS']);
gulp.watch(['./src/*.html', './src/js/', './src/css/*.css'], function(e) {
server.changed(e.path);
});
});
// The default task (called when you run `gulp` from cli)
gulp.task('default', [
'html',
'scripts',
'ieScripts',
'images',
'bg',
'photos',
'compass',
'rootCSS',
'eaCSS',
'proCSS',
'netCSS',
'watch'
]);
Any suggestions on how to get my colleagues setup using the same src and gulpfile.js would be awesome.

Related

Gulp project running locally but unable to build

I am trying building a website with a clone from https://github.com/cssninjaStudio/krypton.
I can run the project locally with yarn run dev command working properly, but when i try to build the app to host in a VPS with yarn build or yarn run prod giving an error
Task never defined: prod
Here is my gulp.js
const del = require('del');
const options = require("./config");
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const bourbon = require('node-bourbon').includePaths;
const postcss = require('gulp-postcss');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');
const cleanCSS = require('gulp-clean-css');
const purgecss = require('gulp-purgecss');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const panini = require('panini');
const browserify = require("browserify");
const babelify = require("babelify");
const source = require("vinyl-source-stream");
const nodepath = 'node_modules/';
sass.compiler = require('sass');
//Note : Webp still not supported in major browsers including forefox
//const webp = require('gulp-webp'); //For converting images to WebP format
//const replace = require('gulp-replace'); //For Replacing img formats to webp in html
const logSymbols = require('log-symbols'); //For Symbolic Console logs :) :P
//Load Previews on Browser on dev
function livePreview(done) {
browserSync.init({
server: {
baseDir: options.paths.dist.base
},
port: options.config.port || 5000
});
done();
}
//Copy latest installed Bulma
function setupBulma() {
console.log("\n\t" + logSymbols.info, "Installing Bulma Files..\n");
return src([nodepath + 'bulma/*.sass', nodepath + 'bulma/**/*.sass'])
.pipe(dest('src/sass/'));
}
//Compile Sass code
function compileSASS() {
console.log("\n\t" + logSymbols.info, "Compiling Bulma Sass..\n");
return src(['src/sass/bulma.sass'])
.pipe(sass({
outputStyle: 'compressed',
sourceComments: 'map',
sourceMap: 'sass',
includePaths: bourbon
}).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(dest('dist/assets/css'))
.pipe(browserSync.stream());
}
//Compile Scss code
function compileSCSS() {
console.log("\n\t" + logSymbols.info, "Compiling App SCSS..\n");
return src(['src/scss/main.scss'])
.pipe(sass({
outputStyle: 'compressed',
sourceComments: 'map',
sourceMap: 'scss',
includePaths: bourbon
}).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(dest('dist/css'))
.pipe(browserSync.stream());
}
//Compile HTML partials with Panini
function compileHTML() {
console.log("\n\t" + logSymbols.info, "Compiling HTML..\n");
panini.refresh();
return src('src/pages/**/*.html')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
helpers: 'src/helpers/',
data: 'src/data/'
}))
.pipe(dest('dist'))
.pipe(browserSync.stream());
}
//Concat CSS Plugins
function concatCssPlugins() {
console.log("\n\t" + logSymbols.info, "Compiling Plugin styles..\n");
return src([
nodepath + 'simplebar/dist/simplebar.min.css',
nodepath + 'plyr/dist/plyr.css',
nodepath + 'codemirror/lib/codemirror.css',
nodepath + 'codemirror/theme/shadowfox.css',
'src/vendor/css/*',
])
.pipe(sourcemaps.init())
.pipe(concat('app.css'))
.pipe(sourcemaps.write('./'))
.pipe(dest('dist/css'))
.pipe(browserSync.stream());
}
//Reset Panini Cache
function resetPages(done) {
console.log("\n\t" + logSymbols.info, "Clearing Panini Cache..\n");
panini.refresh();
done();
}
//Triggers Browser reload
function previewReload(done) {
console.log("\n\t" + logSymbols.info, "Reloading Browser Preview.\n");
browserSync.reload();
done();
}
//Development Tasks
function devHTML() {
return src(`${options.paths.src.base}/**/*.html`).pipe(dest(options.paths.dist.base));
}
//Optimize images
function devImages() {
return src(`${options.paths.src.img}/**/*`).pipe(dest(options.paths.dist.img));
}
// Let's write our task in a function to keep things clean
function javascriptBuild() {
// Start by calling browserify with our entry pointing to our main javascript file
return (
browserify({
entries: [`${options.paths.src.js}/main.js`],
// Pass babelify as a transform and set its preset to #babel/preset-env
transform: [babelify.configure({ presets: ["#babel/preset-env"] })]
})
// Bundle it all up!
.bundle()
// Source the bundle
.pipe(source("bundle.js"))
// Then write the resulting files to a folder
.pipe(dest(`dist/js`))
);
}
function copyFonts() {
console.log("\n\t" + logSymbols.info, "Copying fonts to dist folder.\n");
return src([
'src/fonts/*',
])
.pipe(dest('dist/fonts'))
.pipe(browserSync.stream());
}
//Copy data files
function copyData() {
console.log("\n\t" + logSymbols.info, "Copying data files..\n");
return src([
'src/data/**/*',
])
.pipe(dest('dist/data'))
.pipe(browserSync.stream());
}
function watchFiles() {
//watch('src/**/*.html', compileHTML);
watch(`${options.paths.src.base}/**/*.html`, series(compileHTML, previewReload));
watch(['src/scss/**/*', 'src/scss/*'], compileSCSS);
watch(`${options.paths.src.js}/**/*.js`, series(javascriptBuild, previewReload));
watch(`${options.paths.src.img}/**/*`, series(devImages, previewReload));
console.log("\n\t" + logSymbols.info, "Watching for Changes..\n");
}
function devClean() {
console.log("\n\t" + logSymbols.info, "Cleaning dist folder for fresh start.\n");
return del([options.paths.dist.base]);
}
exports.setup = series(setupBulma);
exports.default = series(
devClean, // Clean Dist Folder
resetPages,
parallel(copyFonts, concatCssPlugins, compileSCSS, javascriptBuild, devImages, compileHTML),
livePreview, // Live Preview Build
watchFiles // Watch for Live Changes
);
Need some help to build this website and host it in VPS
Many Thanks in Advance
The prod task is not define within the Gulp file. The dev task is, because it is calling the default gulp task (gulp with no arg is calling the default which is found at the end of the gulp file
exports.default = series(
devClean, // Clean Dist Folder
resetPages,
parallel(copyFonts, concatCssPlugins, compileSCSS, javascriptBuild, devImages, compileHTML),
livePreview, // Live Preview Build
watchFiles // Watch for Live Changes
);
Take a look at your package.json file, this is were the script name are define (such as dev and prod.)
"scripts": {
"dev": "gulp",
"build": "gulp prod",
"prod": "gulp prod",
"preinstall": "npx npm-force-resolutions"
},
So you should create a prod method in your gulp.js and should only call usefull method for prod env (remove livePreview and watch, you are most likely only build and deploy.)
I prefer to task definition like this,
gulp.task("prod", function (callback) {
config.runCleanBuilds = true;
return runSequence(
"taskA",
"taskB",
"taskC",
callback);
});
but you could do it the same way they do in their gulp file I guess
exports.prod = series(
devClean, // Clean Dist Folder
resetPages,
parallel(copyFonts, concatCssPlugins, compileSCSS, javascriptBuild, devImages, compileHTML)
);

After upgrade to Gulp 4 default task is not detecting default changes for JS & Scss

I upgraded the gulp to 4.0.2 from Gulp version 3. it will not detect changes when the tracked JSa and SCSS file is changed.
Gulp version I am using :-
CLI version: 2.3.0
Local version: 4.0.2
gulpfile.js
'use strict';
var gulp = require('gulp'),
sass = require('gulp-sass'),
del = require('del'),
jshint = require('gulp-jshint'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
strip = require('gulp-strip-comments'),
livereload = require('gulp-livereload'),
http = require('http'),
st = require('st'),
sourcemaps = require('gulp-sourcemaps'),
ngAnnotate = require('gulp-ng-annotate'),
babel = require('gulp-babel'),
uglifycss = require('gulp-uglifycss'),
browserSync = require('browser-sync').create();
//Rerun the task when a file changes
var watch_hintJs = ['./global/util/*.js', './global/util/**/*.js', './modules/**/*Service.js', './modules/**/*Directive.js', './modules/**/*Controller.js', './modules/**/*Constant.js'];
var watch_hintscss = ['./global/scss/*.scss', './modules/**/*.scss'];
// This method is used to delete the files
gulp.task('clean', ()=> {
return del(['./assets/css']);
});
var globalCSS = ['./assets/libs/css/**','./assets/libs/css/*.css'];
gulp.task('css', ()=> {
return gulp.src(globalCSS)
.pipe(concat('myapp-main-libs.css'))
.pipe(uglifycss({
"uglyComments": true
}))
.pipe(gulp.dest('./assets/css/'));
});
/* SASS TO CSS CONVERSION*/
gulp.task('sass', ()=> {
return gulp.src(['./global/scss/*.scss', './global/scss/lib/*.scss', './modules/**/*.scss'])
.pipe(sass().on('error', sass.logError))
.pipe(sass())
.pipe(concat('myapp-main.css'))
//.pipe(strip())
.pipe(uglifycss({
"uglyComments": true
}))
.pipe(gulp.dest('./assets/css/'));
});
//This method is converting all JS files to Single file//
var jsFiles = ['./global/util/*.js', './global/util/lib/*.js', './global/util/components/*.js',
'./modules/**/*Service.js', './modules/**/*Directive.js', './modules/**/*Controller.js', './modules/**/*Constant.js'],
jsDest = './assets/js/',
jsLibs = [
'assets/libs/js/tether.min.js',
'assets/libs/js/jquery.min.js',
'assets/libs/js/jquery-ui-min.js',
'assets/libs/js/bootstrap.min.js',
'assets/libs/js/angular.min.js',
'assets/libs/js/angular-ui-router.min.js',
'assets/libs/js/ui-grid-min.js',
'assets/libs/js/html2canvas.js',
'assets/libs/js/ui-bootstrap-tpls-2.5.0.min.js',
'assets/libs/js/accordian.js',
'assets/libs/js/angularResizable.js',
'assets/libs/js/angular-animate.min.js',
'assets/libs/js/ngToast.js',
'assets/libs/js/angular-sanitize.js',
'assets/libs/js/pubsub.js',
'assets/libs/js/angular-environment.js',
'assets/libs/js/deferred-with-update.js',
'assets/libs/js/multiselect.js',
'assets/libs/js/angular-chart.min.js',
'assets/libs/js/common.js',
'assets/libs/js/bootstrap-colorpicker-module.min.js',
'assets/libs/js/dom-to-image.js',
'assets/libs/js/alasql.min.js',
'assets/libs/js/xlsx.core.min.js',
'node_modules/babel-polyfill/dist/polyfill.min.js',
'assets/libs/js/jquery.csv.js',
'assets/libs/js/z-worker.js',
'assets/libs/js/zip.js'
];
gulp.task('libs', ()=> {
return gulp.src(jsLibs)
.pipe(strip())
.pipe(concat('myapp-lib-scripts.js'))
.pipe(gulp.dest(jsDest));
});
var minify = require('gulp-minify');
gulp.task('scripts', ()=> {
return gulp.src(jsFiles)
.pipe(jshint())
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['es2015', 'stage-3'],
"plugins": ["transform-async-to-generator"]
}))
.pipe(concat('myapp-scripts.js'))
.pipe(uglify({
mangle: false
}))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(jsDest))
.pipe(livereload());
});
/*jshint, watch, browserify*/
// configure the jshint task
gulp.task('jshint', ()=> {
return gulp.src(watch_hintJs)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});
gulp.task('browser-sync', gulp.series('sass', ()=> {
browserSync.init({
server: {
injectChanges: true,
baseDir: "./"
},
browser: ["chrome.exe"]
});
}));
gulp.task('js-watch', gulp.series('scripts', () =>{
console.log('you changed the JS');
return browserSync.reload();
}));
gulp.task('css-watch', gulp.series('sass', ()=> {
console.log('you changed the css');
return browserSync.reload();
}));
gulp.task('watch', gulp.series('browser-sync', ()=> {
console.log('you reach watch');
gulp.watch(watch_hintJs, ['js-watch']);
gulp.watch(watch_hintscss, ['css-watch']);
gulp.watch(watch_hintJs, browserSync.reload());
return livereload.listen();
}));
gulp.task('server', (done)=> {
return http.createServer(
st({
path: __dirname + '/',
index: 'index.html',
cache: false
})
).listen(8080, done);
});
var revts = require('gulp-rev-timestamp');
gulp.task('rev-timestamp', ()=> {
return gulp.src("./index.html")
.pipe(revts())
.pipe(gulp.dest('.'));
});
gulp.task('default', gulp.series('clean', 'css', 'sass', 'libs', 'scripts', 'rev-timestamp', 'watch'));
gulp.task('prod', gulp.series('clean', 'css', 'sass', 'libs', 'scripts', 'jshint', 'rev-timestamp'));
Note: Style task is working correctly and moving all .scss files from source to destination.
I really appreciate any help since I am running out of ideas
Finally, I found the solution as below:-
gulp.task('watch', ()=> {
console.log('you reach watch');
gulp.watch(watch_hintJs).on('change',gulp.parallel('js-watch'));
gulp.watch(watch_hintscss).on('change',gulp.parallel('css-watch'));
return livereload.listen();
});

Gulp Browsersync is not working for scripts.js file

I am new to Gulp watch and I'm facing the issue of Browsersync that is only refreshed for first time only when I run the "gulp watch" command and it only works for HTML,CSS files but not for scripts.js files.
I made this change on glop-watcher/index file
function onChange() {
console.log("onChange running: ", running); // custom changing
if (running) {
if (opt.queue) {
queued = true;
}
// custom changing
setTimeout(() => {
runComplete({msg: "custom code is working"});
}, 2000);
return;
}
now its refreshed the HTML,CSS file but still not working for scripts.js file at all even if refresh manually. Please help
Here is my gulpfile.js file
var gulp = require('gulp'),
settings = require('./settings'),
webpack = require('webpack'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
rgba = require('postcss-hexrgba'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
colorFunctions = require('postcss-color-function');
gulp.task('styles', function() {
return gulp.src(settings.themeLocation + 'css/style.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
.on('error', (error) => console.log(error.toString()))
.pipe(gulp.dest(settings.themeLocation));
});
gulp.task('scripts', function(callback) {
webpack(require('./webpack.config.js'), function(err, stats) {
if (err) {
console.log(err.toString());
}
console.log(stats.toString());
callback();
});
});
gulp.task('watch', function() {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});
gulp.watch('./**/*.php', function() {
browserSync.reload();
});
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.parallel('waitForScripts'));
});
gulp.task('waitForStyles', gulp.series('styles', function() {
return gulp.src(settings.themeLocation + 'style.css')
.pipe(browserSync.stream());
}))
gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
browserSync.reload();
cb()
}))
Finally, after 2 weeks of drilling into gulp I found the problem and solution too.
Here is the path of my .js files that gulp is watching
" .\myProject\wp-content\themes\myProject-theme\js "
but for gulp watch the path should be like this
" ./wp-content/themes/myProject-theme/js/*.js "
It does not include the main folder name/ root folder name. In my case the root folder where all my wordpress files lives is " myProject " and I mistakenly wrote it in gulp path that trouble me so much.
So be sure about your paths and also add this in onChange() function of glop-watcher/index file that is in the node_modules folder.
function onChange() {
console.log("onChange running: ", running);
if (running) {
if (opt.queue) {
queued = true;
}
// Add this code
setTimeout(() => {
runComplete({msg: "custom code is working"});
}, 2000);
return;
}

MakeCallback DeprecationWarning error when running Foundation for Emails build process

I'm using Foundation for Emails Sass Version to generate HTML emails. I have made a few small changes to the gulpfile and package.json, but for the most part it is exactly what is given on the Foundation for Emails repo.
I'm getting an error when I try to run npm run build. It seems to be something I have added to my template code but I am not sure what it could be.
Here is the error:
[13:48:22] Using gulpfile ~/Development/Work/foundation-email-stack-sass-workflow/gulpfile.babel.js
[13:48:22] Starting 'default'...
[13:48:22] Starting 'build'...
[13:48:22] Starting 'clean'...
[13:48:22] Finished 'clean' after 11 ms
[13:48:22] Starting 'pages'...
[13:48:23] Finished 'pages' after 525 ms
[13:48:23] Starting 'sass'...
[13:48:35] Finished 'sass' after 12 s
[13:48:35] Starting 'images'...
[13:48:39] gulp-imagemin: Minified 27 images (saved 46.34 kB - 1.1%)
[13:48:39] Finished 'images' after 4.04 s
[13:48:39] Starting 'inline'...
(node:35425) [DEP0097] DeprecationWarning: Using a domain property in MakeCallback is deprecated. Use the async_context variant of MakeCallback or the AsyncResource class instead.
[13:48:41] The following tasks did not complete: default, build, inline
[13:48:41] Did you forget to signal async completion?
Here is my gulpfile:
import gulp from 'gulp';
import plugins from 'gulp-load-plugins';
import browser from 'browser-sync';
import rimraf from 'rimraf';
import panini from 'panini';
import yargs from 'yargs';
import lazypipe from 'lazypipe';
import inky from 'inky';
import fs from 'fs';
import siphon from 'siphon-media-query';
import path from 'path';
import merge from 'merge-stream';
import beep from 'beepbeep';
import colors from 'colors';
var helpers = require('handlebars-helpers')();
var ext_replace = require('gulp-ext-replace');
const $ = plugins();
// Look for the --production flag
const PRODUCTION = !!(yargs.argv.production);
const EMAIL = yargs.argv.to;
// Declar var so that both AWS and Litmus task can use it.
var CONFIG;
// Build the "dist" folder by running all of the below tasks
gulp.task('build',
gulp.series(clean, pages, sass, images, inline));
// Build emails, run the server, and watch for file changes
gulp.task('default',
gulp.series('build', server, watch));
// Build emails, then send to litmus
gulp.task('litmus',
gulp.series('build', creds, aws, litmus));
// Build emails, then send to EMAIL
gulp.task('mail',
gulp.series('build', creds, aws, mail));
// Build emails, then zip
gulp.task('zip',
gulp.series('build', zip));
// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf('dist', done);
}
// Compile layouts, pages, and partials into flat HTML files
// Then parse using Inky templates
function pages() {
return gulp.src(['src/pages/**/*.{html,hbs,handlebars}', '!src/pages/archive/**/*.{html,hbs,handlebars}'])
.pipe(panini({
root: 'src/pages',
layouts: 'src/layouts',
partials: 'src/partials',
helpers: 'src/helpers'
}))
.pipe(inky())
.pipe(ext_replace('.html'))
.pipe(gulp.dest('dist'));
}
// Reset Panini's cache of layouts and partials
function resetPages(done) {
panini.refresh();
done();
}
// Compile Sass into CSS
function sass() {
return gulp.src('src/assets/scss/**/*.scss')
.pipe($.if(!PRODUCTION, $.sourcemaps.init()))
.pipe($.sass({
includePaths: ['node_modules/foundation-emails/scss']
}).on('error', $.sass.logError))
.pipe($.if(PRODUCTION, $.uncss(
{
html: ['dist/**/*.html']
})))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest('dist/css'));
}
// Copy and compress images
function images() {
return gulp.src(['src/assets/img/**/*', '!src/assets/img/archive/**/*'])
.pipe($.imagemin())
.pipe(gulp.dest('./dist/assets/img'));
}
// Inline CSS and minify HTML
function inline() {
return gulp.src('dist/**/*.html')
.pipe($.if(PRODUCTION, inliner('dist/css/app.css')))
.pipe(gulp.dest('dist'));
}
// Start a server with LiveReload to preview the site in
function server(done) {
browser.init({
server: 'dist'
});
done();
}
// Watch for file changes
function watch() {
gulp.watch('src/pages/**/*.{html,hbs,handlebars}').on('all', gulp.series(pages, inline, browser.reload));
gulp.watch(['src/layouts/**/*', 'src/partials/**/*']).on('all', gulp.series(resetPages, pages, inline, browser.reload));
gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss']).on('all', gulp.series(resetPages, sass, pages, inline, browser.reload));
gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
}
// Inlines CSS into HTML, adds media query CSS into the <style> tag of the email, and compresses the HTML
function inliner(css) {
var css = fs.readFileSync(css).toString();
var mqCss = siphon(css);
var pipe = lazypipe()
.pipe($.inlineCss, {
applyStyleTags: false,
removeStyleTags: true,
preserveMediaQueries: true,
removeLinkTags: false
})
.pipe($.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
.pipe($.replace, '<link rel="stylesheet" type="text/css" href="css/app.css">', '')
.pipe($.htmlmin, {
collapseWhitespace: true,
minifyCSS: true
});
return pipe();
}
// Ensure creds for Litmus are at least there.
function creds(done) {
var configPath = './config.json';
try { CONFIG = JSON.parse(fs.readFileSync(configPath)); }
catch(e) {
beep();
console.log('[AWS]'.bold.red + ' Sorry, there was an issue locating your config.json. Please see README.md');
process.exit();
}
done();
}
// Post images to AWS S3 so they are accessible to Litmus and manual test
function aws() {
var publisher = !!CONFIG.aws ? $.awspublish.create(CONFIG.aws) : $.awspublish.create();
var headers = {
'Cache-Control': 'max-age=315360000, no-transform, public'
};
return gulp.src('./dist/assets/img/*')
// publisher will add Content-Length, Content-Type and headers specified above
// If not specified it will set x-amz-acl to public-read by default
.pipe(publisher.publish(headers))
// create a cache file to speed up consecutive uploads
//.pipe(publisher.cache())
// print upload updates to console
.pipe($.awspublish.reporter());
}
// Send email to Litmus for testing. If no AWS creds then do not replace img urls.
function litmus() {
var awsURL = !!CONFIG && !!CONFIG.aws && !!CONFIG.aws.url ? CONFIG.aws.url : false;
return gulp.src('dist/**/*.html')
.pipe($.if(!!awsURL, $.replace(/=('|")(\/?assets\/img)/g, "=$1"+ awsURL)))
.pipe($.litmus(CONFIG.litmus))
.pipe(gulp.dest('dist'));
}
// Send email to specified email for testing. If no AWS creds then do not replace img urls.
function mail() {
var awsURL = !!CONFIG && !!CONFIG.aws && !!CONFIG.aws.url ? CONFIG.aws.url : false;
if (EMAIL) {
CONFIG.mail.to = [EMAIL];
}
return gulp.src('dist/**/*.html')
.pipe($.if(!!awsURL, $.replace(/=('|")(\/?assets\/img)/g, "=$1"+ awsURL)))
.pipe($.mail(CONFIG.mail))
.pipe(gulp.dest('dist'));
}
// Copy and compress into Zip
function zip() {
var dist = 'dist';
var ext = '.html';
function getHtmlFiles(dir) {
return fs.readdirSync(dir)
.filter(function(file) {
var fileExt = path.join(dir, file);
var isHtml = path.extname(fileExt) == ext;
return fs.statSync(fileExt).isFile() && isHtml;
});
}
var htmlFiles = getHtmlFiles(dist);
var moveTasks = htmlFiles.map(function(file){
var sourcePath = path.join(dist, file);
var fileName = path.basename(sourcePath, ext);
var moveHTML = gulp.src(sourcePath)
.pipe($.rename(function (path) {
path.dirname = fileName;
return path;
}));
var moveImages = gulp.src(sourcePath)
.pipe($.htmlSrc({ selector: 'img'}))
.pipe($.rename(function (path) {
path.dirname = fileName + path.dirname.replace('dist', '');
return path;
}));
return merge(moveHTML, moveImages)
.pipe($.zip(fileName+ '.zip'))
.pipe(gulp.dest('dist'));
});
return merge(moveTasks);
}
And my package.json:
{
"name": "foundation-emails-template",
"version": "1.0.0",
"description": "Basic template for a Foundation for Emails project.",
"repository": "zurb/foundation-emails-template",
"main": "gulpfile.babel.js",
"scripts": {
"start": "gulp",
"build": "gulp --production",
"zip": "gulp zip --production",
"litmus": "gulp litmus --production",
"mail": "gulp mail --production"
},
"author": "ZURB <foundation#zurb.com>",
"license": "MIT",
"dependencies": {
"foundation-emails": "^2.2.1",
"handlebars-helpers": "^0.10.0"
},
"devDependencies": {
"babel-core": "^6.3.26",
"babel-preset-es2015": "^6.3.13",
"babel-register": "^6.7.2",
"beepbeep": "^1.2.0",
"browser-sync": "^2.11.0",
"colors": "^1.1.2",
"gulp": ">=4.0",
"gulp-awspublish": "^3.0.1",
"gulp-cli": "^1.1.0",
"gulp-ext-replace": "^0.3.0",
"gulp-html-src": "^1.0.0",
"gulp-htmlmin": "^1.1.1",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^2.4.0",
"gulp-inline-css": "^3.0.0",
"gulp-litmus": "0.0.7",
"gulp-load-plugins": "^1.1.0",
"gulp-mail": "^0.1.1",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-uncss": "^1.0.1",
"gulp-zip": "^3.2.0",
"inky": "^1.3.6",
"lazypipe": "^1.0.1",
"merge-stream": "^1.0.0",
"panini": "^1.3.0",
"rimraf": "^2.3.3",
"siphon-media-query": "^1.0.0",
"yargs": "^4.1.0"
},
"babel": {
"presets": [
"es2015"
]
}
}
Suggestions?
so, I added a custom helper:
module.exports = function( content ) {
var devmode = content;
if( devmode === true ) {
return "/";
} else {
return "http:*****";
}
}
which used a value in the pages front matter to change URLs:
---
devmode: true
devmode: false
---
to insert a value into pages:
{{#remoteurl devmode}}{{/remoteurl}}
The build process did not like that I was passing an unquoted true/false value. Quoting the devmode value in front matter fixed the problem:
---
devmode: "true"
---

Getting error event.js:174 throw er; everytime I save any scss file

Here's a Screen Shot of the error event.js:174
I did a lot of research and googled a lot. I tried uninstalling and re-installing everything. Made new files again but still no luck. I tried on my laptop and it works smoothly without any errors. I am using Windows 7 64 bit desktop.
Am I doing anything wrong in Gulp? Here's the gulp code:
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const minify = require('gulp-minify');
const rename = require('gulp-rename');
const imagemin = require('gulp-imagemin');
const sourcemaps = require('gulp-sourcemaps');
const postcss = require('gulp-postcss');
//const webp = require('gulp-webp');
const log = require('fancy-log');
const g = require("gulp-load-plugins")();
const purgecss = require('gulp-purgecss');
const critical = require('critical').stream;
gulp.task('purgecss', () => {
return gulp.src('./dist/css/*.css')
.pipe(purgecss({
content: ["./dist/*.html"]
}))
.pipe(gulp.dest('./dist/css/purged'))
})
// Extract Media Queries & Make Seperate CSS Files
gulp.task("extractmedia", function() {
gulp.src("./dist/css/*.css")
.pipe(g.extractMediaQueries())
.pipe(gulp.dest("./dist/css/"));
});
// CSS Tasks
gulp.task('css-compile', function() {
gulp.src('scss/**/*.scss')
.pipe(sass({outputStyle: 'nested'}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions'],
cascade: false
}))
.pipe(gulp.dest('./dist/css/'));
});
gulp.task('minify-css', function() {
gulp.src(['./dist/css/*.css', '!dist/css/*.min.css'])
.pipe(cleanCSS())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./dist/css'))
});
// JavaScript Tasks
gulp.task('js-build', function() {
const plugins = getJSModules();
return gulp.src(plugins.modules)
.pipe(concat('modules.js'))
.pipe(gulp.dest('./dist/js/'));
});
gulp.task('js-minify', function() {
gulp.src(['./dist/js/*.js', '!dist/js/*.min.js'])
.pipe(minify({
ext:{
src:'.js',
min:'.min.js'
},
noSource: true,
}))
.pipe(gulp.dest('./dist/js'));
});
// Image Compression
gulp.task('img-compression', function() {
gulp.src('./img/*')
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
})
]))
//.pipe(webp())
.pipe(gulp.dest('./dist/img'));
});
// Generate & Inline Critical-path CSS
gulp.task('critical', function () {
return gulp.src('./dist/*.html')
.pipe(critical({base: './dist/', inline: true, css: ['./dist/css/app.min.css']}))
.on('error', function(err) { log.error(err.message); })
.pipe(gulp.dest('./dist/'));
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("dist/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("dist/css"))
.pipe(browserSync.stream({match: '**/*.css'}))
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss([ autoprefixer({ browsers: [
'Chrome >= 35',
'Firefox >= 38',
'Edge >= 12',
'Explorer >= 10',
'iOS >= 8',
'Safari >= 8',
'Android 2.3',
'Android >= 4',
'Opera >= 12']})]))
.pipe(sourcemaps.write())
.pipe(gulp.dest('css/'))
.pipe(cleanCSS())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('css/'))
});
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
injectChanges: true,
server: "./dist"
});
gulp.watch("dist/scss/*.scss", ['sass']);
gulp.watch("dist/*.html").on('change', browserSync.reload);
});
gulp.task('default', ['serve'], function() {
gulp.watch("scss/**/*.scss", ['css-compile']);
gulp.watch(["dist/css/*.css", "!dist/css/*.min.css"], ['minify-css']);
gulp.watch("js/**/*.js", ['js-build']);
gulp.watch(["dist/js/*.js", "!dist/js/*.min.js"], ['js-minify']);
gulp.watch("**/*", {cwd: './img/'}, ['img-compression']);
});
function getJSModules() {
delete require.cache[require.resolve('./js/modules.js')];
return require('./js/modules');
}
Please Help I am Stuck. As every time I save scss file I get this error all of a sudden which sucks hell lot of time for me to develop further. Sometimes it works fine but after 3-4 save file it crashes.
Found the Solution: It was all about the Folder Permissions. Hope this helps someone.

Resources