I need help with my gulp project. Drops me error in terminal: TypeError: parallel is not a function Already searched information whole internet. Answer is to update Gulp version to 4.0.. Already updated. still shows the "parallel function" issue
My file:
const { src, dest, parallel, series, watch } = import('gulp');
const twig = import('gulp-twig');
const sass = import('gulp-sass');
const prefix = import('gulp-autoprefixer');
const data = import('gulp-data');
const sourcemaps = import('gulp-sourcemaps');
const concat = import('gulp-concat');
const plumber = import('gulp-plumber');
const browsersync = import('browser-sync');
const gulpcopy = import('gulp-copy');
const fs = import('fs');
const del = import('del');
const path = import('path');
var paths = {
build: {
html: 'dist/',
js: 'dist/assets/js/',
css: 'dist/assets/css/',
img: 'dist/assets/img/',
fonts: 'dist/assets/fonts/',
icons: 'dist/assets/icons/',
json: 'dist/assets/'
},
src: {
html: 'src/*.{htm,html,php}',
js: 'src/assets/js/*.js',
css: 'src/assets/sass/style.scss',
img: 'src/assets/img/**/*.*',
fonts: 'src/assets/fonts/**/*.*',
icons: 'src/assets/icons/**/*.*',
json: 'src/assets/*.json'
},
watch: {
html: 'src/**/*.{htm,html,php}',
js: 'src/assets/js/**/*.js',
css: 'src/assets/sass/**/*.scss',
img: 'src/assets/img/**/*.*',
fonts: 'src/assets/fonts/**/*.*',
icons: 'src/assets/icons/**/*.*',
json: 'src/assets/*.json'
},
clean: './dist'
};
// SCSS bundled into CSS task
function css() {
return src('client/scss/vendors/*.scss')
.pipe(sourcemaps.init())
// Stay live and reload on error
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sass({
includePaths: [paths.src.css + 'vendors/'],
outputStyle: 'compressed'
}).on('error', function (err) {
console.log(err.message);
// sass.logError
this.emit('end');
}))
.pipe(prefix(['last 15 versions','> 1%','ie 8','ie 7','iOS >= 9','Safari >= 9','Android >= 4.4','Opera >= 30'], {
cascade: true
}))
//.pipe(minifyCSS())
.pipe(concat('bootstrap.min.css'))
.pipe(sourcemaps.write('.'))
.pipe(dest('build/assets/css'));
}
// JS bundled into min.js task
function js() {
return src('dist/js/*.js')
.pipe(sourcemaps.init())
.pipe(concat('scripts.min.js'))
.pipe(sourcemaps.write('.'))
.pipe(dest('build/assets/js'));
}
function twigTpl () {
return src(['./dist/templates/*.twig'])
// Stay live and reload on error
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
// Load template pages json data
.pipe(data(function (file) {
return JSON.parse(fs.readFileSync(paths.data + path.basename(file.path) + '.json'));
}).on('error', function (err) {
process.stderr.write(err.message + '\n');
this.emit('end');
})
)
// Load default json data
.pipe(data(function () {
return JSON.parse(fs.readFileSync(paths.data + path.basename('default.twig.json')));
}).on('error', function (err) {
process.stderr.write(err.message + '\n');
this.emit('end');
})
)
// Twig compiled
.pipe(twig()
.on('error', function (err) {
process.stderr.write(err.message + '\n');
this.emit('end');
})
)
.pipe(dest(paths.build));
}
function copyAssets() {
// Copy assets
return src(['./dist/assets/**/*.*','!./dist/assets/**/*.psd','!./dist/assets/**/*.*.map'],
del(paths.build + 'assets/**/*')
)
.pipe(gulpcopy(paths.build + 'assets', { prefix: 2 }));
}
// BrowserSync
function browserSync() {
browsersync({
server: {
baseDir: paths.build
},
notify: false,
browser: "google chrome",
// proxy: "0.0.0.0:5000"
});
}
// BrowserSync reload
function browserReload () {
return browsersync.reload;
}
// Watch files
function watchFiles() {
// Watch SCSS changes
watch(paths.scss + '**/*.scss', parallel(css))
.on('change', browserReload());
// Watch javascripts changes
watch(paths.js + '*.js', parallel(js))
.on('change', browserReload());
// Watch template changes
watch(['dist/templates/**/*.twig','dist/data/*.twig.json'], parallel(twigTpl))
.on('change', browserReload());
// Assets Watch and copy to build in some file changes
watch('dist/assets/**/*')
.on('change', series(copyAssets, css, css_vendors, js, browserReload()));
}
const watching = parallel(watchFiles, browserSync);
exports.js = js;
exports.css = css;
exports.default = parallel(copyAssets, css, js, twigTpl);
exports.watch = watching;
My gulp version:
"node": "18.12.1"
"gulp": "^4.0.2",
On terminal when i write gulp -v it shows:
CLI version: 2.3.0
Local version: 4.0.2
Expecting professional help
Since your gulpfile is a CommonJS module, use require instead of import:
const { src, dest, parallel, series, watch } = require('gulp');
const twig = require('gulp-twig');
const sass = require('gulp-sass');
const prefix = require('gulp-autoprefixer');
const data = require('gulp-data');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const plumber = require('gulp-plumber');
const browsersync = require('browser-sync');
const gulpcopy = require('gulp-copy');
const fs = require('fs');
const del = require('del');
const path = require('path');
Using an ESM style gulpfile is also an option, but it's not as simple as just replacing require with import (btw the syntax is import sass from 'gulp-sass';...), you will also need to rename the file to "gulpfile.mjs", change the style of your exports, and probably more.
I migrated gulp from 3.9.1 to Gulp 4.0.2. Converted all the task as per Gulp 4 guidelines, however when I run 'gulp' from command line, all the tasks until 'nodemon'
starts and finishes, but when it is about to start 'nodemon',
it tries to start and then again continue loading the processing again and again. Might have missed some config, due to which it is causing issue.
Sharing new (v4.0.2) Gulpfile for reference along with GulpVariables, along with start console log.
New File
var gulp = require('gulp'); // Include gulp
var runsequence = require('run-sequence'); // used to run the different gulp task in a sequence
var deleteFiles = require('del'); // used to delete the files in dist folder for every build
var inject = require('gulp-inject'); // used to inject js and css files to index.html
var nodemon = require('gulp-nodemon'); // used to start the node server and watch for changes
var sourcemaps = require('gulp-sourcemaps'); // used to hold information about original files after minify
var concat = require('gulp-concat'); // used to append a file
var uglify = require('gulp-uglify'); // used to minify the js file
var cleancss = require('gulp-clean-css'); // used to clean up the css file
var obfuscate = require('gulp-js-obfuscator'); // used to obfuscate js file
//var git = require('gulp-git'); // used to work with git repo from gulp
var replacePaths = require('gulp-replace-path'); // used to change the src path for cloned repo
var jshint = require('gulp-jshint'); // used to check js files for errors and warnings
var jshintReporter = require('gulp-jshint-html-reporter'); // reporter to view the errors and warnings
var babel = require('gulp-babel'); // used to convert ES6 to ES5 because ES6 is not supported by uglify
var minifyImages = require('gulp-imagemin'); // used to minify images
var minifyejs = require('gulp-minify-ejs'); // used to minify mail templates which is in .ejs format
var liveReload = require('gulp-livereload'); // used to auromatically reload the browser when we change code
var gulpIf = require('gulp-if'); // execute a function based on a condition
var cache = require('gulp-cached'); // used to perform task only on changed files while watching
var chug = require('gulp-chug'); // used to run external gulpfile in case of remote build
var merge = require('merge-stream'); // used to have multiple source in single task
var rename = require('gulp-rename'); // used to have multiple source in single task
var gulpVariables = require('./gulpVariables.json'); // external file that contains directory path and other variables for the build
// removes the old files from the directory so that we get a clean build each time
function clean() {
return deleteFiles([gulpVariables.dist, gulpVariables.clone, gulpVariables.codeReviewReportName]); // delete the directory
};
//task to clone from remote repo
function cloneRepo() {
return git.clone(gulpVariables.remoteRepoUrl,{args: './'+gulpVariables.clone}, function (err) {
if (err) throw err;
process.chdir(gulpVariables.clone);
});
};
//task to checkout branch in local repo cloned from remote
function checkoutRepo() {
return git.checkout(gulpVariables.repoBranchName, function (err) {
if (err) throw err;
process.chdir('..');
});
};
function runGulpfileInsideClone() {
return gulp.src(gulpVariables.clone+'/gulpfile.js',{read:false})
.pipe(chug());
};
//review all js files for error
function staticCodeReview() {
return gulp.src([
gulpVariables.src + '/*.js',
gulpVariables.apiSrc + '/*.js',
gulpVariables.jsSrc + '/*.js',
gulpVariables.jsSrc + '/**/*.js',
gulpVariables.schedulerSrc + '/*.js'
])
.pipe(jshint())
.pipe(jshint.reporter(jshintReporter, {
filename: gulpVariables.codeReviewReportName
})
);
};
//copy src files without the nodeserver.js and folders to dist
function copySourceFoldersWithoutJSFiles() {
//Pass in all files in the root w/ no subdirectories to dist
//dot:true to make sure to copy .cfignore file
//.cfignore contains files to ignore to deploy in bluemix
var src = gulp.src([gulpVariables.src + '*','!'+gulpVariables.src +'*.js'], {dot: true});
var dest = gulp.dest(gulpVariables.dist);
return src.pipe(dest);
};
// copy vendor css files to dist
function copyVendorCSSFiles() {
return gulp.src(gulpVariables.vendorCSSSrc + '/**/*.css')
.pipe(concat(gulpVariables.combinedVendorCSSFileName))
.pipe(gulp.dest(gulpVariables.cssDest));
};
copyVendorCSSFiles.description = 'copy vendor css files to dist';
// optimise vendor css files in dist
async function optimiseVendorCSSFiles() {
if(gulpVariables.isOptimiseCSS) {
return gulp.src(gulpVariables.cssDest + '/' + gulpVariables.combinedVendorCSSFileName)
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.init()))
.pipe(cleancss())
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.write()))
.pipe(gulp.dest(gulpVariables.cssDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
}
};
optimiseVendorCSSFiles.description = 'optimise vendor css files in dist';
// copy vendor images to dist
function copyVendorImages() {
return gulp.src(gulpVariables.vendorImgSrc + '/**/*')
.pipe(gulp.dest(gulpVariables.imgDest));
};
// optimise vendor images in dist
async function optimiseVendorImages() {
if(gulpVariables.isOptimiseImages) {
return gulp.src(gulpVariables.vendorImgDest)
.pipe(minifyImages())
.pipe(gulp.dest(gulpVariables.vendorImgDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
}
};
// copy vendor js files to dist
function copyVendorJSFiles() {
var vendorJSWithoutPDFWorker = gulp.src([
gulpVariables.vendorJSSrc + '/**/angular.js', // this must be first
gulpVariables.vendorJSSrc + '/**/*.js', // all other files
'!' + gulpVariables.vendorJSSrc + '/**/pdf.worker.js'
])
.pipe(concat(gulpVariables.combinedVendorJSFileName))
.pipe(gulp.dest(gulpVariables.jsDest));
// ignoring the pdf.worker.js in the concatenated vendor file because for the PDF view it searches file with name pdf.worker.js
var PDFWorkerJS =gulp.src(gulpVariables.vendorJSSrc + '/vendor/pdf.worker.js')
.pipe(rename('vendor.min.worker.js'))
.pipe(gulp.dest(gulpVariables.jsDest));
return merge(vendorJSWithoutPDFWorker, PDFWorkerJS);
};
// optimise vendor js files in dist
async function optimiseVendorJSFiles() {
if(gulpVariables.isOptimiseJS) {
return gulp.src(gulpVariables.jsDest + '/' + gulpVariables.combinedVendorJSFileName)
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.init()))
.pipe(uglify())
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.write()))
.pipe(gulp.dest(gulpVariables.jsDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
}
};
// copy external css to dist
function copyCSSFiles() {
return gulp.src(gulpVariables.cssSrc + '/*.css')
.pipe(concat(gulpVariables.combinedAppCSSFileName))
.pipe(gulp.dest(gulpVariables.cssDest));
};
// optimise external css in dist
async function optimiseCSSFiles() {
if(gulpVariables.isOptimiseCSS){
return gulp.src(gulpVariables.cssDest + '/' + gulpVariables.combinedAppCSSFileName)
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.init()))
.pipe(cleancss())
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.write()))
.pipe(gulp.dest(gulpVariables.cssDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
}
};
// copy images to dist
function copyImages() {
return gulp.src(gulpVariables.imgSrc + '/*')
.pipe(gulp.dest(gulpVariables.imgDest));
};
// optimise images in dist
async function optimiseImages() {
if(gulpVariables.isOptimiseImages){
return gulp.src(gulpVariables.imgDest + '/*')
.pipe(minifyImages())
.pipe(gulp.dest(gulpVariables.imgDest))
.pipe(gulpIf(gulpVariables.env == 'dev', liveReload()));
}
};
// copy js files to dist
function copyJSFiles() {
return gulp.src([
gulpVariables.jsSrc + '/app.js', // this must be first
gulpVariables.jsSrc + '/**/*.js' // all other files
])
.pipe(concat(gulpVariables.combinedAppJSFileName))
.pipe(gulp.dest(gulpVariables.jsDest));
};
// optimise js files in dist
async function optimiseJSFiles() {
if(gulpVariables.isOptimiseJS) {
return gulp.src(gulpVariables.jsDest + '/' + gulpVariables.combinedAppJSFileName)
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.init()))
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(obfuscate())
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.write()))
.pipe(gulp.dest(gulpVariables.jsDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
}
};
// copy nodeserver.js to dist
function copyNodeServerFile() {
return gulp.src(gulpVariables.src + '*.js')
.pipe(gulp.dest(gulpVariables.dist));
};
// optimise nodeserver.js in dist
async function optimiseNodeServerFile() {
if(gulpVariables.isOptimiseJS) {
return gulp.src(gulpVariables.dist + '/*.js')
.pipe(gulpIf(gulpVariables.env == 'prod',babel({
presets: ['es2015']
})))
.pipe(gulpIf(gulpVariables.env == 'prod',uglify()))
.pipe(gulpIf(gulpVariables.env == 'prod',obfuscate()))
.pipe(gulp.dest(gulpVariables.dist));
}
};
// copy api files to dist
function copyApiFiles() {
return gulp.src(gulpVariables.apiSrc + '/**/*.js')
.pipe(gulp.dest(gulpVariables.apiDest));
};
// optimise api files in dist
async function optimiseApiFiles() {
if(gulpVariables.isOptimiseJS) {
return gulp.src(gulpVariables.apiDest + '/**/*.js')
.pipe(cache())
.pipe(gulpIf(gulpVariables.env == 'prod',babel({
presets: ['es2015']
})))
.pipe(gulpIf(gulpVariables.env == 'prod', uglify()))
.pipe(gulpIf(gulpVariables.env == 'prod', obfuscate()))
.pipe(gulp.dest(gulpVariables.apiDest));
}
};
// copy mail templates to dist
function copyMailTemplates() {
return gulp.src(gulpVariables.mailTemplateSrc + '/**')
.pipe(gulp.dest(gulpVariables.mailTemplateDest));
};
// optimise mail templates in dist
async function optimiseMailTemplates() {
if(gulpVariables.isOptimiseJS) {
gulp.src(gulpVariables.mailTemplateDest + '/**')
.pipe(minifyejs())
.pipe(gulp.dest(gulpVariables.mailTemplateDest));
}
};
// copy scheduler to dist
function copySchedulerFiles() {
return gulp.src(gulpVariables.schedulerSrc + '/*.js')
.pipe(gulp.dest(gulpVariables.schedulerDest));
};
// optimise scheduler in dist
async function optimiseSchedulerFiles() {
if(gulpVariables.isOptimiseJS) {
return gulp.src(gulpVariables.schedulerDest + '/*.js')
.pipe(gulpIf(gulpVariables.env == 'prod', babel({
presets: ['es2015']
})))
.pipe(gulpIf(gulpVariables.env == 'prod', uglify()))
.pipe(gulpIf(gulpVariables.env == 'prod', obfuscate()))
.pipe(gulp.dest(gulpVariables.schedulerDest));
}
};
// group all vendor copy tasks
const copyAndOptimiseVendorCSSFiles = gulp.series(copyVendorCSSFiles, optimiseVendorCSSFiles);
const copyAndOptimiseVendorImages = gulp.series(copyVendorImages, optimiseVendorImages);
const copyAndOptimiseVendorJSFiles = gulp.series(copyVendorJSFiles, optimiseVendorJSFiles);
const copyAndOptimiseVendorFiles = gulp.series(gulp.parallel(copyAndOptimiseVendorCSSFiles, copyAndOptimiseVendorImages, copyAndOptimiseVendorJSFiles));
const copyAndOptimiseCSSFiles = gulp.series(copyCSSFiles, optimiseCSSFiles);
const copyAndOptimiseImages = gulp.series(copyImages, optimiseImages);
// copy html files to dist
function copyHtmlFiles() {
return gulp.src(gulpVariables.htmlSrc + '/**')
.pipe(cache())
.pipe(gulp.dest(gulpVariables.htmlDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
};
const copyAndOptimiseJSFiles = gulp.series(copyJSFiles, optimiseJSFiles);
// group all client side app files copy tasks
const copyAndOptimiseClientSideAppFiles = gulp.series(gulp.parallel(copyAndOptimiseCSSFiles, copyAndOptimiseImages, copyHtmlFiles, copyAndOptimiseJSFiles));
const copyAndOptimiseNodeServerFile = gulp.series(copyNodeServerFile, optimiseNodeServerFile);
const copyAndOptimiseApiFiles = gulp.series(copyApiFiles, optimiseApiFiles);
const copyAndOptimiseMailTemplates = gulp.series(copyMailTemplates, optimiseMailTemplates);
const copyAndOptimiseSchedulerFiles = gulp.series(copySchedulerFiles, optimiseSchedulerFiles);
// group all server side app files copy tasks
const copyAndOptimiseServerSideAppFiles = gulp.series(gulp.parallel(copyAndOptimiseNodeServerFile, copyAndOptimiseApiFiles, copyAndOptimiseMailTemplates, copyAndOptimiseSchedulerFiles));
function copyCertificates(){
return gulp.src(gulpVariables.certSrc + '/*.*')
.pipe(gulp.dest(gulpVariables.certDest));
};
// copy index html file to dist
function injectIndexFile() {
var jsSrc,cssSrc,injectSrc;
jsSrc = [
gulpVariables.jsDest + '/vendor.min.js',
gulpVariables.jsDest + '/vendor.min.worker.js',
gulpVariables.jsDest + '/' + gulpVariables.combinedAppJSFileName
];
cssSrc = [
gulpVariables.cssDest + '/' + gulpVariables.combinedVendorCSSFileName,
gulpVariables.cssDest + '/' + gulpVariables.combinedAppCSSFileName
];
injectSrc = jsSrc.concat(cssSrc);
gulp.src(gulpVariables.indexSrc + '/index.html')
.pipe(inject(gulp.src(injectSrc),
{ignorePath: 'dist/public', addRootSlash: false}
))
.pipe(gulp.dest(gulpVariables.indexDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
};
function injectIndexFileVanillaCopy() {
return gulp.src(gulpVariables.indexSrc + '/index.html')
.pipe(gulp.dest(gulpVariables.indexDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
};
// nodemon to start the server
function nodemon() {
if(gulpVariables.env == 'dev') {
nodemon({
script: gulpVariables.dist + '/' + gulpVariables.nodeServerFileName,
ext: 'js',
delay: "10000",
watch:[gulpVariables.apiDest, gulpVariables.dist + gulpVariables.nodeServerFileName, gulpVariables.schedulerDest]
});
}
};
// Watch Files For Changes and calls the gulp task if any change happens
function watch() {
if(gulpVariables.env == 'dev') {
liveReload.listen();
watch([gulpVariables.src + '*','!'+gulpVariables.src +'*.js'], copySourceFoldersWithoutJSFiles);
watch(gulpVariables.src + '*.js', copyAndOptimiseNodeServerFile);
watch(gulpVariables.apiSrc + '/**/*.js', copyAndOptimiseApiFiles);
watch(gulpVariables.mailTemplateSrc + '/**', copyAndOptimiseMailTemplates);
watch(gulpVariables.schedulerSrc + '/*.js', copyAndOptimiseSchedulerFiles);
watch(gulpVariables.cssSrc + '/*.css', copyAndOptimiseCSSFiles);
watch(gulpVariables.imgSrc + '/*', copyAndOptimiseImages);
watch(gulpVariables.htmlSrc + '/**', copyHtmlFiles);
watch(gulpVariables.jsSrc + '/**', copyAndOptimiseJSFiles);
watch(gulpVariables.indexSrc + '/index.html', injectIndexFileVanillaCopy);
watch(gulpVariables.vendorCSSSrc + '/**', copyAndOptimiseVendorCSSFiles);
watch(gulpVariables.vendorImgSrc + '/**', copyAndOptimiseVendorImages);
watch(gulpVariables.vendorJSSrc + '/**', copyAndOptimiseVendorJSFiles);
}
};
/*
* Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
*/
var build = gulp.series(clean, copySourceFoldersWithoutJSFiles, copyAndOptimiseVendorFiles, copyAndOptimiseClientSideAppFiles, copyAndOptimiseServerSideAppFiles, copyCertificates, injectIndexFileVanillaCopy, nodemon);
//var build = gulp.series(server, watch);
/*
* You can use CommonJS `exports` module notation to declare tasks
*/
/*exports.clean = clean;
exports.cloneRepo = cloneRepo;
exports.staticCodeReview = staticCodeReview;
exports.checkoutRepo = checkoutRepo;
exports.copySourceFoldersWithoutJSFiles = copySourceFoldersWithoutJSFiles;
exports.copyVendorCSSFiles = copyVendorCSSFiles;
exports.optimiseVendorCSSFiles = optimiseVendorCSSFiles;
exports.copyAndOptimiseVendorCSSFiles = copyAndOptimiseVendorCSSFiles;
exports.copyVendorImages = copyVendorImages
exports.optimiseVendorImages = optimiseVendorImages;
exports.copyAndOptimiseVendorImages = copyAndOptimiseVendorImages;
exports.copyVendorJSFiles = copyVendorJSFiles;
exports.optimiseVendorJSFiles = optimiseVendorJSFiles;
exports.copyAndOptimiseVendorJSFiles = copyAndOptimiseVendorJSFiles;
exports.copyAndOptimiseVendorFiles = copyAndOptimiseVendorFiles;
exports.copyCSSFiles = copyCSSFiles;
exports.optimiseCSSFiles = optimiseCSSFiles;
exports.copyAndOptimiseCSSFiles = copyAndOptimiseCSSFiles;
exports.copyImages = copyImages;
exports.optimiseImages = optimiseImages;
exports.copyAndOptimiseImages = copyAndOptimiseImages
exports.copyHtmlFiles = copyHtmlFiles;
exports.copyJSFiles = copyJSFiles;
exports.optimiseJSFiles = optimiseJSFiles;
exports.copyAndOptimiseJSFiles = copyAndOptimiseJSFiles;
exports.copyAndOptimiseClientSideAppFiles = copyAndOptimiseClientSideAppFiles;
exports.copyNodeServerFile = copyNodeServerFile;
exports.optimiseNodeServerFile = optimiseNodeServerFile;
exports.copyAndOptimiseNodeServerFile = copyAndOptimiseNodeServerFile;
exports.copyApiFiles = copyApiFiles;
exports.optimiseApiFiles = optimiseApiFiles;
exports.copyAndOptimiseApiFiles = copyAndOptimiseApiFiles;
exports.copyMailTemplates = copyMailTemplates;
exports.optimiseMailTemplates = optimiseMailTemplates;
exports.copyAndOptimiseMailTemplates = copyAndOptimiseMailTemplates;
exports.copySchedulerFiles = copySchedulerFiles;
exports.optimiseSchedulerFiles = optimiseSchedulerFiles;
exports.copyAndOptimiseSchedulerFiles = copyAndOptimiseSchedulerFiles;
exports.copyAndOptimiseServerSideAppFiles = copyAndOptimiseServerSideAppFiles;
exports.copyCertificates = copyCertificates;
exports.injectIndexFileVanillaCopy = injectIndexFileVanillaCopy;
exports.nodemon = nodemon;
exports.watch = watch;*/
/*
* Define default task that can be called by just running `gulp` from cli
*/
exports.default = build;
Gulp Variables File
{
"src": "src/",
"dist": "dist",
"apiSrc": "src/api",
"apiDest": "dist/api",
"certSrc": "src/certificate",
"certDest": "dist/certificate",
"mailTemplateSrc": "src/mailTemplates",
"mailTemplateDest": "dist/mailTemplates",
"schedulerSrc": "src/scheduler",
"schedulerDest": "dist/scheduler",
"cssSrc": "src/public/css",
"cssDest": "dist/public/css",
"imgSrc": "src/public/images",
"imgDest": "dist/public/images",
"vendorImgDest": "dist/public/images/vendor",
"htmlSrc": "src/public/html",
"htmlDest": "dist/public/html",
"jsSrc": "src/public/js",
"jsDest": "dist/public/js",
"vendorCSSSrc": "vendor/css",
"vendorImgSrc": "vendor/images",
"vendorJSSrc": "vendor/js",
"indexSrc": "src/public",
"indexDest": "dist/public",
"isRemoteBuild" : false,
"clone": "clone",
"remoteRepoUrl" : "",
"repoBranchName" : "dev",
"codeReviewReportName" : "codeReviewReport.html",
"env": "dev",
"combinedAppJSFileName":"app.min.js",
"combinedVendorJSFileName":"vendor.min.js",
"combinedAppCSSFileName":"app.min.css",
"combinedVendorCSSFileName":"vendor.min.css",
"combinedApiFileName":"api.min.js",
"nodeServerFileName":"nodeServer.js",
"isOptimiseCSS": false,
"isOptimiseJS":false,
"isOptimiseImages":false
}
When I run gulp on command line, it all works fine (appears to be) till function/task - injectIndexFileVanillaCopy. Moment I add nodemon function/task, it tries to start the process and then again restarts it again and again as seen in below image/console output
Converted gulpfile from v 3.9.1 to v4.0.2, using series & parallel api with on change in execution order. Expecting to run/start the process cleanly, but server/node/process going in loop. Might be some config issue with watch and nodemon, unable to figure that out. Have gone thru multiple links, but not able to root cause
I have spent nearly 4-5 days screening through multiple topics, links for Gulp 3 --> Gulp 4 migration, but couldn't find any good/working solution that is fully utilizing Gulp 4 capabilities like, creating/exporting task, creating/using functions, using series/parallel, watch, run-sequence and nodemon features and lastly function callbacks.
Eventually after multiple trial and error, I got the gulp 3.9.1 gulpfile to gulp 4.0.2 version.
Sharing few things below from my learning, may be some of these are already in public domain.
Callback - If function is return ing, then no need to explicitly use done()
Not every function need to be a task and hence need to be exported (registered)
If you are using run-sequence npm module, convert it to series
if you have gulp 3.x task created as below, possible suggestion is to convert it to parallel
OLD
gulp.task('copyAndOptimiseVendorFiles', ['copyAndOptimiseVendorCSSFiles','copyAndOptimiseVendorImages','copyAndOptimiseVendorJSFiles']);
NEW
const copyAndOptimiseVendorFiles = parallel(copyAndOptimiseVendorCSSFiles, copyAndOptimiseVendorImages, copyAndOptimiseVendorJSFiles);
If you have watch items define as below, then again a suggestion is to convert it like the one given as NEW approach.
OLD
gulp.watch([gulpVariables.src + '*','!'+gulpVariables.src +'*.js'], ['copySourceFoldersWithoutJSFiles']);
NEW
watch([gulpVariables.src + '*','!'+gulpVariables.src +'*.js'], series(copySourceFoldersWithoutJSFiles));
While you upgrade gulp 3.x to 4.x, you might have few other node module, that are old, old as per current version of respective module. Please don't upgrade them to current version blindly. Run npm outdated command to get the snapshot of what is outdated and needs to be updated.
Updated only those outdated npm modules to 'Wanted' version instead of 'Latest' one.
Few keywords like watch, nodemon, are actually keywords and might create a problem in gulp 4.x. What I mean here is, you gulp 3.x will work with below function definition
gulp.task('nodemon', function() {....})
gulp.task('watch', function() {....})
but it might create problem in gulp 4.x. Please use different names for functions or task, as you would see in working version below.
I definitely found few URLs (stackoverflow, youtube) useful in order to build understanding about this migration and get it to work state. Can shore those if someone is really interested and curious.
Lastly sharing the working version, which I was hoping for when I posted this question.
Working gulpfile
//var gulp = require('gulp'); // Include gulp
var deleteFiles = require('del'); // used to delete the files in dist folder for every build
var inject = require('gulp-inject'); // used to inject js and css files to index.html
var nodemon = require('gulp-nodemon'); // used to start the node server and watch for changes
var sourcemaps = require('gulp-sourcemaps'); // used to hold information about original files after minify
var concat = require('gulp-concat'); // used to append a file
var uglify = require('gulp-uglify'); // used to minify the js file
var cleancss = require('gulp-clean-css'); // used to clean up the css file
var obfuscate = require('gulp-js-obfuscator'); // used to obfuscate js file
//var git = require('gulp-git'); // used to work with git repo from gulp
var replacePaths = require('gulp-replace-path'); // used to change the src path for cloned repo
var jshint = require('gulp-jshint'); // used to check js files for errors and warnings
var jshintReporter = require('gulp-jshint-html-reporter'); // reporter to view the errors and warnings
var babel = require('gulp-babel'); // used to convert ES6 to ES5 because ES6 is not supported by uglify
var minifyImages = require('gulp-imagemin'); // used to minify images
var minifyejs = require('gulp-minify-ejs'); // used to minify mail templates which is in .ejs format
var liveReload = require('gulp-livereload'); // used to auromatically reload the browser when we change code
var gulpIf = require('gulp-if'); // execute a function based on a condition
var cache = require('gulp-cached'); // used to perform task only on changed files while watching
var chug = require('gulp-chug'); // used to run external gulpfile in case of remote build
var merge = require('merge-stream'); // used to have multiple source in single task
var rename = require('gulp-rename'); // used to have multiple source in single task
var gulpVariables = require('./gulpVariables.json'); // external file that contains directory path and other variables for the build
const { src, dest, task, watch, series, parallel } = require('gulp');
// removes the old files from the directory so that we get a clean build each time
function clean() {
return deleteFiles([gulpVariables.dist, gulpVariables.clone, gulpVariables.codeReviewReportName]); // delete the directory
};
//task to clone from remote repo
function cloneRepo() {
return git.clone(gulpVariables.remoteRepoUrl,{args: './'+gulpVariables.clone}, function (err) {
if (err) throw err;
process.chdir(gulpVariables.clone);
});
};
//task to checkout branch in local repo cloned from remote
function checkoutRepo() {
return git.checkout(gulpVariables.repoBranchName, function (err) {
if (err) throw err;
process.chdir('..');
});
};
function runGulpfileInsideClone() {
return src(gulpVariables.clone+'/gulpfile.js',{read:false})
.pipe(chug());
};
//review all js files for error
function staticCodeReview() {
return src([
gulpVariables.src + '/*.js',
gulpVariables.apiSrc + '/*.js',
gulpVariables.jsSrc + '/*.js',
gulpVariables.jsSrc + '/**/*.js',
gulpVariables.schedulerSrc + '/*.js'
])
.pipe(jshint())
.pipe(jshint.reporter(jshintReporter, {
filename: gulpVariables.codeReviewReportName
})
);
};
//copy src files without the nodeserver.js and folders to dist
function copySourceFoldersWithoutJSFiles() {
//Pass in all files in the root w/ no subdirectories to dist
//dot:true to make sure to copy .cfignore file
//.cfignore contains files to ignore to deploy in bluemix
var source = src([gulpVariables.src + '*','!'+gulpVariables.src +'*.js'], {dot: true});
var destination = dest(gulpVariables.dist);
return source.pipe(destination);
};
// copy vendor css files to dist
function copyVendorCSSFiles() {
return src(gulpVariables.vendorCSSSrc + '/**/*.css')
.pipe(concat(gulpVariables.combinedVendorCSSFileName))
.pipe(dest(gulpVariables.cssDest));
};
copyVendorCSSFiles.description = 'copy vendor css files to dist';
// optimise vendor css files in dist
function optimiseVendorCSSFiles(done) {
if(gulpVariables.isOptimiseCSS) {
return src(gulpVariables.cssDest + '/' + gulpVariables.combinedVendorCSSFileName)
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.init()))
.pipe(cleancss())
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.write()))
.pipe(dest(gulpVariables.cssDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
}
else {
done();
}
};
optimiseVendorCSSFiles.description = 'optimise vendor css files in dist';
// copy vendor images to dist
function copyVendorImages() {
return src(gulpVariables.vendorImgSrc + '/**/*')
.pipe(dest(gulpVariables.imgDest));
};
// optimise vendor images in dist
function optimiseVendorImages(done) {
if(gulpVariables.isOptimiseImages) {
return src(gulpVariables.vendorImgDest)
.pipe(minifyImages())
.pipe(dest(gulpVariables.vendorImgDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
} else {
done();
}
};
// copy vendor js files to dist
function copyVendorJSFiles() {
var vendorJSWithoutPDFWorker = src([
gulpVariables.vendorJSSrc + '/**/angular.js', // this must be first
gulpVariables.vendorJSSrc + '/**/*.js', // all other files
'!' + gulpVariables.vendorJSSrc + '/**/pdf.worker.js'
])
.pipe(concat(gulpVariables.combinedVendorJSFileName))
.pipe(dest(gulpVariables.jsDest));
// ignoring the pdf.worker.js in the concatenated vendor file because for the PDF view it searches file with name pdf.worker.js
var PDFWorkerJS =src(gulpVariables.vendorJSSrc + '/vendor/pdf.worker.js')
.pipe(rename('vendor.min.worker.js'))
.pipe(dest(gulpVariables.jsDest));
return merge(vendorJSWithoutPDFWorker, PDFWorkerJS);
};
// optimise vendor js files in dist
function optimiseVendorJSFiles(done) {
if(gulpVariables.isOptimiseJS) {
return src(gulpVariables.jsDest + '/' + gulpVariables.combinedVendorJSFileName)
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.init()))
.pipe(uglify())
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.write()))
.pipe(dest(gulpVariables.jsDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
} else {
done();
}
};
// copy external css to dist
function copyCSSFiles() {
return src(gulpVariables.cssSrc + '/*.css')
.pipe(concat(gulpVariables.combinedAppCSSFileName))
.pipe(dest(gulpVariables.cssDest));
};
// optimise external css in dist
function optimiseCSSFiles(done) {
if(gulpVariables.isOptimiseCSS){
return src(gulpVariables.cssDest + '/' + gulpVariables.combinedAppCSSFileName)
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.init()))
.pipe(cleancss())
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.write()))
.pipe(dest(gulpVariables.cssDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
} else {
done();
}
};
// copy images to dist
function copyImages() {
return src(gulpVariables.imgSrc + '/*')
.pipe(dest(gulpVariables.imgDest));
};
// optimise images in dist
function optimiseImages(done) {
if(gulpVariables.isOptimiseImages){
return src(gulpVariables.imgDest + '/*')
.pipe(minifyImages())
.pipe(dest(gulpVariables.imgDest))
.pipe(gulpIf(gulpVariables.env == 'dev', liveReload()));
} else {
done();
}
};
// copy js files to dist
function copyJSFiles() {
return src([
gulpVariables.jsSrc + '/app.js', // this must be first
gulpVariables.jsSrc + '/**/*.js' // all other files
])
.pipe(concat(gulpVariables.combinedAppJSFileName))
.pipe(dest(gulpVariables.jsDest));
};
// optimise js files in dist
function optimiseJSFiles(done) {
if(gulpVariables.isOptimiseJS) {
return src(gulpVariables.jsDest + '/' + gulpVariables.combinedAppJSFileName)
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.init()))
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(obfuscate())
.pipe(gulpIf(gulpVariables.env == 'dev',sourcemaps.write()))
.pipe(dest(gulpVariables.jsDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
} else {
done();
}
};
// copy nodeserver.js to dist
function copyNodeServerFile() {
return src(gulpVariables.src + '*.js')
.pipe(dest(gulpVariables.dist));
};
// optimise nodeserver.js in dist
function optimiseNodeServerFile(done) {
if(gulpVariables.isOptimiseJS) {
return src(gulpVariables.dist + '/*.js')
.pipe(gulpIf(gulpVariables.env == 'prod',babel({
presets: ['es2015']
})))
.pipe(gulpIf(gulpVariables.env == 'prod',uglify()))
.pipe(gulpIf(gulpVariables.env == 'prod',obfuscate()))
.pipe(dest(gulpVariables.dist));
} else {
done();
}
};
// copy api files to dist
function copyApiFiles() {
return src(gulpVariables.apiSrc + '/**/*.js')
.pipe(dest(gulpVariables.apiDest));
};
// optimise api files in dist
function optimiseApiFiles(done) {
if(gulpVariables.isOptimiseJS) {
return src(gulpVariables.apiDest + '/**/*.js')
.pipe(cache())
.pipe(gulpIf(gulpVariables.env == 'prod',babel({
presets: ['es2015']
})))
.pipe(gulpIf(gulpVariables.env == 'prod', uglify()))
.pipe(gulpIf(gulpVariables.env == 'prod', obfuscate()))
.pipe(dest(gulpVariables.apiDest));
} else {
done();
}
};
// copy mail templates to dist
function copyMailTemplates() {
return src(gulpVariables.mailTemplateSrc + '/**')
.pipe(dest(gulpVariables.mailTemplateDest));
};
// optimise mail templates in dist
function optimiseMailTemplates(done) {
if(gulpVariables.isOptimiseJS) {
return src(gulpVariables.mailTemplateDest + '/**')
.pipe(minifyejs())
.pipe(dest(gulpVariables.mailTemplateDest));
} else {
done();
}
};
// copy scheduler to dist
function copySchedulerFiles() {
return src(gulpVariables.schedulerSrc + '/*.js')
.pipe(dest(gulpVariables.schedulerDest));
};
// optimise scheduler in dist
function optimiseSchedulerFiles(done) {
if(gulpVariables.isOptimiseJS) {
return src(gulpVariables.schedulerDest + '/*.js')
.pipe(gulpIf(gulpVariables.env == 'prod', babel({
presets: ['es2015']
})))
.pipe(gulpIf(gulpVariables.env == 'prod', uglify()))
.pipe(gulpIf(gulpVariables.env == 'prod', obfuscate()))
.pipe(dest(gulpVariables.schedulerDest));
} else {
done();
}
};
// group all vendor copy tasks
const copyAndOptimiseVendorCSSFiles = parallel(copyVendorCSSFiles, optimiseVendorCSSFiles);
const copyAndOptimiseVendorImages = parallel(copyVendorImages, optimiseVendorImages);
const copyAndOptimiseVendorJSFiles = parallel(copyVendorJSFiles, optimiseVendorJSFiles);
const copyAndOptimiseVendorFiles = parallel(copyAndOptimiseVendorCSSFiles, copyAndOptimiseVendorImages, copyAndOptimiseVendorJSFiles);
const copyAndOptimiseCSSFiles = parallel(copyCSSFiles, optimiseCSSFiles);
const copyAndOptimiseImages = parallel(copyImages, optimiseImages);
// copy html files to dist
function copyHtmlFiles() {
return src(gulpVariables.htmlSrc + '/**')
.pipe(cache())
.pipe(dest(gulpVariables.htmlDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
};
const copyAndOptimiseJSFiles = parallel(copyJSFiles, optimiseJSFiles);
// group all client side app files copy tasks
const copyAndOptimiseClientSideAppFiles = parallel(copyAndOptimiseCSSFiles, copyAndOptimiseImages, copyHtmlFiles, copyAndOptimiseJSFiles);
const copyAndOptimiseNodeServerFile = parallel(copyNodeServerFile, optimiseNodeServerFile);
const copyAndOptimiseApiFiles = parallel(copyApiFiles, optimiseApiFiles);
const copyAndOptimiseMailTemplates = parallel(copyMailTemplates, optimiseMailTemplates);
const copyAndOptimiseSchedulerFiles = parallel(copySchedulerFiles, optimiseSchedulerFiles);
// group all server side app files copy tasks
const copyAndOptimiseServerSideAppFiles = parallel(copyAndOptimiseNodeServerFile, copyAndOptimiseApiFiles, copyAndOptimiseMailTemplates, copyAndOptimiseSchedulerFiles);
function copyCertificates(){
return src(gulpVariables.certSrc + '/*.*')
.pipe(dest(gulpVariables.certDest));
};
// copy index html file to dist
function injectIndexFile() {
var jsSrc,cssSrc,injectSrc;
jsSrc = [
gulpVariables.jsDest + '/vendor.min.js',
gulpVariables.jsDest + '/vendor.min.worker.js',
gulpVariables.jsDest + '/' + gulpVariables.combinedAppJSFileName
];
cssSrc = [
gulpVariables.cssDest + '/' + gulpVariables.combinedVendorCSSFileName,
gulpVariables.cssDest + '/' + gulpVariables.combinedAppCSSFileName
];
injectSrc = jsSrc.concat(cssSrc);
return src(gulpVariables.indexSrc + '/index.html')
.pipe(inject(src(injectSrc),
{ignorePath: 'dist/public', addRootSlash: false}
))
.pipe(dest(gulpVariables.indexDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
};
function injectIndexFileVanillaCopy() {
return src(gulpVariables.indexSrc + '/index.html')
.pipe(dest(gulpVariables.indexDest))
.pipe(gulpIf(gulpVariables.env == 'dev',liveReload()));
};
// nodemon to start the server
function node_server(done) {
if(gulpVariables.env == 'dev') {
nodemon({
script: gulpVariables.dist + '/' + gulpVariables.nodeServerFileName,
ext: 'js',
delay: "10000",
watch:[gulpVariables.apiDest, gulpVariables.dist + gulpVariables.nodeServerFileName, gulpVariables.schedulerDest],
done: done
});
} else {
done();
}
};
// Watch Files For Changes and calls the gulp task if any change happens
function watchFiles(done) {
if(gulpVariables.env == 'dev') {
liveReload.listen();
watch([gulpVariables.src + '*','!'+gulpVariables.src +'*.js'], series(copySourceFoldersWithoutJSFiles));
watch(gulpVariables.src + '*.js', series(copyAndOptimiseNodeServerFile));
watch(gulpVariables.apiSrc + '/**/*.js', series(copyAndOptimiseApiFiles));
watch(gulpVariables.mailTemplateSrc + '/**', series(copyAndOptimiseMailTemplates));
watch(gulpVariables.schedulerSrc + '/*.js', series(copyAndOptimiseSchedulerFiles));
watch(gulpVariables.cssSrc + '/*.css', series(copyAndOptimiseCSSFiles));
watch(gulpVariables.imgSrc + '/*', series(copyAndOptimiseImages));
watch(gulpVariables.htmlSrc + '/**', series(copyHtmlFiles));
watch(gulpVariables.jsSrc + '/**', series(copyAndOptimiseJSFiles));
watch(gulpVariables.indexSrc + '/index.html', series(injectIndexFileVanillaCopy));
watch(gulpVariables.vendorCSSSrc + '/**', series(copyAndOptimiseVendorCSSFiles));
watch(gulpVariables.vendorImgSrc + '/**', series(copyAndOptimiseVendorImages));
watch(gulpVariables.vendorJSSrc + '/**', series(copyAndOptimiseVendorJSFiles));
done();
}
};
/*
* Specify if tasks run in series or parallel using `series` and `parallel`
*/
const compile = series(clean, copySourceFoldersWithoutJSFiles, copyAndOptimiseVendorFiles, copyAndOptimiseClientSideAppFiles, copyAndOptimiseServerSideAppFiles, copyCertificates, injectIndexFileVanillaCopy) ;
const serve = series(compile, node_server);
serve.description = 'serve compiled source on local server at port 3000'
const watcher = parallel(serve, watchFiles)
//watcher.description = 'watch for changes to all source'
const defaultTasks = watcher;
/*
* You can use CommonJS `exports` module notation to declare tasks
*/
exports.clean = clean;
exports.cloneRepo = cloneRepo;
exports.staticCodeReview = staticCodeReview;
exports.checkoutRepo = checkoutRepo;
exports.copySourceFoldersWithoutJSFiles = copySourceFoldersWithoutJSFiles;
exports.copyVendorCSSFiles = copyVendorCSSFiles;
exports.optimiseVendorCSSFiles = optimiseVendorCSSFiles;
exports.copyAndOptimiseVendorCSSFiles = copyAndOptimiseVendorCSSFiles;
exports.copyVendorImages = copyVendorImages
exports.optimiseVendorImages = optimiseVendorImages;
exports.copyAndOptimiseVendorImages = copyAndOptimiseVendorImages;
exports.copyVendorJSFiles = copyVendorJSFiles;
exports.optimiseVendorJSFiles = optimiseVendorJSFiles;
exports.copyAndOptimiseVendorJSFiles = copyAndOptimiseVendorJSFiles;
exports.copyAndOptimiseVendorFiles = copyAndOptimiseVendorFiles;
exports.copyCSSFiles = copyCSSFiles;
exports.optimiseCSSFiles = optimiseCSSFiles;
exports.copyAndOptimiseCSSFiles = copyAndOptimiseCSSFiles;
exports.copyImages = copyImages;
exports.optimiseImages = optimiseImages;
exports.copyAndOptimiseImages = copyAndOptimiseImages
exports.copyHtmlFiles = copyHtmlFiles;
exports.copyJSFiles = copyJSFiles;
exports.optimiseJSFiles = optimiseJSFiles;
exports.copyAndOptimiseJSFiles = copyAndOptimiseJSFiles;
exports.copyAndOptimiseClientSideAppFiles = copyAndOptimiseClientSideAppFiles;
exports.copyNodeServerFile = copyNodeServerFile;
exports.optimiseNodeServerFile = optimiseNodeServerFile;
exports.copyAndOptimiseNodeServerFile = copyAndOptimiseNodeServerFile;
exports.copyApiFiles = copyApiFiles;
exports.optimiseApiFiles = optimiseApiFiles;
exports.copyAndOptimiseApiFiles = copyAndOptimiseApiFiles;
exports.copyMailTemplates = copyMailTemplates;
exports.optimiseMailTemplates = optimiseMailTemplates;
exports.copyAndOptimiseMailTemplates = copyAndOptimiseMailTemplates;
exports.copySchedulerFiles = copySchedulerFiles;
exports.optimiseSchedulerFiles = optimiseSchedulerFiles;
exports.copyAndOptimiseSchedulerFiles = copyAndOptimiseSchedulerFiles;
exports.copyAndOptimiseServerSideAppFiles = copyAndOptimiseServerSideAppFiles;
exports.copyCertificates = copyCertificates;
exports.injectIndexFileVanillaCopy = injectIndexFileVanillaCopy;
/*
* Define default task that can be called by just running `gulp` from cli
*/
exports.default = defaultTasks;
I am trying to zip a single file using the Archiver npm package located: https://www.npmjs.com/package/archiver
I have been able to use the following to zip a directory:
archive.directory(folderName, false);
But when I try to use either of these nothing seems to happen (ie: no zip is generated, file never finishes zipping):
archive.file(folderName, { name: 'file4.txt' });
archive.file(fs.createReadStream(path.resolve(file)), {name: 'File' + singleFileCheck});
Has anyone run into this issue before? Please let me know what I am doing wrong. Thank you in advance!
edit:
module.exports = async function zipper(user, pass, orgid, s4url, apiToken, newOrgName, file) {
const s4 = require('../testcli/s4');
const fs = require('fs');
const archiver = require('archiver');
const path = require('path');
var parentDirect;
if(file == "./"){
parentDirect = "..";
}else{
parentDirect = path.basename(path.dirname(file));
}
const newZipFile = parentDirect + '/s4.zip';
var folderName = file;
//Checks for existence of infinite loop
if(path.resolve(parentDirect).length > path.resolve(folderName).length){
console.log(folderName.search(parentDirect));
console.error('\x1b[36m%s\x1b[0m', 'ERROR!!!! : Please adjust where your console is pointed, this will result in an infinite loop. Exiting.');
return;
}
var P = ['\\', '|', '/', '-'];
var x = 0;
var output = fs.createWriteStream(newZipFile);
var archive = archiver('zip');
scansdisplayinterval = setInterval(function () {
twrl();
}, 250);
// listen for all archive data to be written
output.on('close', function () {
console.log('\x1b[36m%s\x1b[0m', archive.pointer() + ' total bytes');
console.log('\x1b[36m%s\x1b[0m', 'archiver has been finalized and the output file descriptor has closed.');
try {
process.stdout.write(newZipFile);
clearInterval(scansdisplayinterval);
s4(user, pass, newZipFile, orgid, s4url, apiToken, newOrgName);
} catch (e) {
console.log(e);
}
});
// good practice to catch this error explicitly
archive.on('error', function (err) {
throw err;
});
// good practice to catch warnings (ie stat failures and other non-blocking errors)
archive.on('warning', function(err) {
throw err;
});
// This event is fired when the data source is drained no matter what was the data source.
output.on('end', function() {
console.log('\x1b[36m%s\x1b[0m', 'Data has been drained');
});
// pipe archive data to the file
archive.pipe(output);
//Checks -f for file extension
let singleFileCheck = path.extname(file);
//If file has extension
if(singleFileCheck.length <= 4 && singleFileCheck != ''){
//Append single file
console.log('singleFile', path.resolve(file));
archive.file(path.resolve(file), { name: 'file4.txt' });
// archive.append(fs.createReadStream(path.resolve(file)), {name: 'File' + singleFileCheck});
//Else = folder
}else{
// append files from a sub-directory, putting its contents at the root of archive
archive.directory(folderName, false);
}
// archive.directory(folderName, false);
console.log('\x1b[36m%s\x1b[0m', "Zipping: " + folderName + " To: " + newZipFile);
console.log('\x1b[36m%s\x1b[0m', "Zipping To: " + path.resolve(newZipFile));
archive.finalize();
function twrl() {
process.stdout.write('\rZipping Folder ... ' + P[x++]);
x &= 3;
}
return(newZipFile);
};
The issue came from how I was defining the parentDirect var.
Solution:
let singleFileCheck = path.extname(file);
if(file == "./" || singleFileCheck.length <= 4 && singleFileCheck != ''){
parentDirect = "..";
}else{
parentDirect = path.basename(path.dirname(file));
}
I have created gulp tasks scheduler for JavaScript minification and image resizing. All things work nicely when I executes command manually.
Command:
gulp
But when I include gulp-livereload module to perform operation automatically, Command line watch continuously when I upload images, it does not resize.
Just cursor is blinking. When uploads an image, no activities display in command watch list.
gulpfile.js
// include gulp
var gulp = require('gulp');
// include plug-ins
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
var imageresize = require('gulp-image-resize');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var liveReload = require("gulp-livereload");
// JS hint task
gulp.task('jshint', function () {
gulp.src([
'./app/client/app.js',
'./app/client/app.routes.js',
'./app/client/modules/**/controllers/*.js',
'./app/client/modules/**/directives/*.js',
'./app/client/modules/**/services/*.js',
'./app/client/services/*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(liveReload());
});
gulp.task('jsminification', function () {
gulp.src([
'./app/client/app.js',
'./app/client/app.routes.js',
'./app/client/modules/**/controllers/*.js',
'./app/client/modules/**/directives/*.js',
'./app/client/modules/**/services/*.js',
'./app/client/modules/**/filter/*.js',
'./app/client/services/*.js'])
.pipe(concat('script.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./app/build/scripts/'))
.pipe(liveReload());
});
gulp.task('resize', function () {
// set the folder name and the relative paths
// in the example the images are in ./assets/images
// and the public directory is ../public
var paths = {
folder: 'media/',
src: './app/client/',
dest: './app/client/resize/'
};
// create an array of image groups (see comments above)
// specifying the folder name, the ouput dimensions and
// whether or not to crop the images
var images = [
// {folder: 'bg', width: 1200, crop: false},
{folder: 'photo', width: 120, height: 120, crop: true},
//{folder: 'projects', width: 800, height: 500, crop: true}
];
console.log("resize called");
// loop through image groups
images.forEach(function (type) {
console.log(type);
var source_ = paths.src + paths.folder + type.folder + '/*';
var scale_ = type.width + "x" + type.height + "/";
//var destination_ = paths.dest + paths.folder + scale_ + type.folder;
var destination_ = paths.dest + scale_ + type.folder;
console.log(">source:" + source_);
console.log(">scale:" + scale_);
console.log(">destination:" + destination_);
// build the resize object
var resize_settings = {
width: type.width,
crop: type.crop,
// never increase image dimensions
upscale: false
}
// only specify the height if it exists
if (type.hasOwnProperty("height")) {
resize_settings.height = type.height;
}
gulp
// grab all images from the folder
.src(source_)
// resize them according to the width/height settings
.pipe(imageresize(resize_settings))
// output each image to the dest path
// maintaining the folder structure
.pipe(gulp.dest(destination_))
.pipe(liveReload());
});
});
gulp.task('watch', function () {
liveReload.listen({host: process.env['HOST'], port: process.env['PORT']});
gulp.watch('./app/client/media/photo/*.{png,jpg,jpeg}', ['resize']);
});
gulp.task('default', ['jshint', 'jsminification', 'resize', 'watch']);
I want to resize image automatically as new image uploads in photo folder.
After some R&D I have found following solution using "gulp-watch" module and it works fine.
// include gulp
var gulp = require('gulp');
// include plug-ins
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var imageresize = require('gulp-image-resize');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var watch = require("gulp-watch");
var newer = require("gulp-newer");
var paths = {
folder: 'media/',
src: './app/client/',
dest: './app/client/resize/'
}
var images = [
{folder: 'photo', width: 120, height: 120, crop: true},
];
// JS hint task
gulp.task('jshint', function () {
gulp.src([
'./app/client/app.js',
'./app/client/app.routes.js',
'./app/client/modules/**/controllers/*.js',
'./app/client/modules/**/directives/*.js',
'./app/client/modules/**/services/*.js',
'./app/client/services/*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// JS minification task
gulp.task('jsminification', function () {
gulp.src([
'./app/client/app.js',
'./app/client/app.routes.js',
'./app/client/modules/**/controllers/*.js',
'./app/client/modules/**/directives/*.js',
'./app/client/modules/**/services/*.js',
'./app/client/modules/**/filter/*.js',
'./app/client/services/*.js'])
.pipe(concat('script.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./app/build/scripts/'));
});
// image resize
gulp.task('resize', function () {
// loop through image groups
images.forEach(function (type) {
var source_ = paths.src + paths.folder + type.folder + '/*';
var scale_ = type.width + "x" + type.height + "/";
//var destination_ = paths.dest + paths.folder + scale_ + type.folder;
var destination_ = paths.dest + scale_ + type.folder;
// build the resize object
var resize_settings = {
width: type.width,
crop: type.crop,
// never increase image dimensions
upscale: false
}
// only specify the height if it exists
if (type.hasOwnProperty("height")) {
resize_settings.height = type.height;
}
gulp
// grab all images from the folder
.src(source_)
.pipe(newer(destination_))
// resize them according to the width/height settings
.pipe(imageresize(resize_settings))
// optimize the images
.pipe(imagemin({
progressive: true,
// set this if you are using svg images
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
// output each image to the dest path
// maintaining the folder structure
.pipe(gulp.dest(destination_));
});
});
// Gulp default task
gulp.task('default', ['jshint', 'jsminification', 'resize'], function () {});
// Gulp watch for new image resizing
watch('./app/client/media/photo/*.+(png|jpg|jpeg|gif)', function () {
gulp.run('resize');
});