So, I recently had to update Gulp to version 4 with a bunch of code that has been running for years. The code simply adds together a bunch of files to build an angularJS app. I made a bunch of changes to rearrange the code and to add in the series command where needed. Now, the code runs without an error, but the scripts where the compiled code is to be placed are not written.
I am not sure if this is because none of the paths are recognized or because the gulp-file-insert or gulp-concat no longer work with version 4, or what. I am using the latest versions of those packages.
I tried messing with some of the paths such as src, dist, etc as shown below and I got an error which seemed to indicate that a file could not be found, so I am not sure of there are path issues somewhere or not.
Here is some of the code.
gulp.task('build', gulp.series('html', 'fonts', 'other'));
gulp.task('html', gulp.series('inject', 'partials'), function ()
{
var partialsInjectFile = gulp.src(path.join(conf.paths.tmp, '/partials/templateCacheHtml.js'), {read: false});
var partialsInjectOptions = {
starttag : '<!-- inject:partials -->',
ignorePath : path.join(conf.paths.tmp, '/partials'),
addRootSlash: false
};
var cssFilter = $.filter('**/*.css', {restore: true});
var jsFilter = $.filter('**/*.js', {restore: true});
var htmlFilter = $.filter('*.html', {restore: true});
return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
.pipe(cssFilter)
.pipe($.sourcemaps.init())
.pipe($.cssnano())
// .pipe($.rev())
.pipe($.sourcemaps.write('maps'))
.pipe(cssFilter.restore)
.pipe($.inject(partialsInjectFile, partialsInjectOptions))
.pipe($.useref())
.pipe(jsFilter)
.pipe($.sourcemaps.init())
.pipe($.ngAnnotate())
.pipe($.uglify({preserveComments: $.uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))
// .pipe($.rev())
.pipe($.sourcemaps.write('maps'))
.pipe(jsFilter.restore)
.pipe($.revReplace())
.pipe(htmlFilter)
.pipe($.htmlmin({
collapseWhitespace: true,
maxLineLength : 120,
removeComments : true
}))
.pipe(htmlFilter.restore)
.pipe(gulp.dest(path.join(conf.paths.dist, '/')))
.pipe($.size({
title : path.join(conf.paths.dist, '/'),
showFiles: true
}));
});
gulp.task('inject', gulp.series('concatFiles', 'scripts', 'styles'), function ()
{
var injectStyles = gulp.src([
path.join(conf.paths.tmp, '/serve/app/**/*.css'),
path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
], {read: false});
var injectScripts = gulp.src([
path.join(conf.paths.src, '/app/**/*.module.js'),
path.join(conf.paths.src, '/app/**/*.js'),
path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
path.join('!' + conf.paths.src, '/app/**/*.mock.js'),
])
.pipe($.angularFilesort()).on('error', conf.errorHandler('AngularFilesort'));
var injectOptions = {
ignorePath : [conf.paths.src, path.join(conf.paths.tmp, '/serve'),
'bower_components/three.js/**/*.js',
'src/app/assets/code/eqSolver/*.js',
'src/app/assets/code/eqSolver/math/*.js',
'src/app/assets/code/threejs/*.js'],
addRootSlash: false
};
return gulp.src(path.join(conf.paths.src, '/*.html'))
.pipe($.inject(injectStyles, injectOptions))
.pipe($.inject(injectScripts, injectOptions))
.pipe(wiredep(_.extend({}, conf.wiredep)))
.pipe(debug())
.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
});
gulp.task('concatFiles', function(){
gulp.src([
'bower_components/three.js/build/three.js',
'bower_components/three.js/examples/js/renderers/CanvasRenderer.js',
'bower_components/three.js/examples/js/renderers/Projector.js',
path.join(conf.paths.src, '/assets/code/threejs/*.js')])
.pipe(concat('threejs.js'))
.pipe(gulp.dest('./src/app/main/apps/document/worksheet'));
gulp.src('./src/assets/code/eqSolver/equationSolver.js')
.pipe(gfi({
"/* Big Math */": './node_modules/big.js/big.min.js',
"/* sin Function */": './src/assets/code/eqSolver/math/sin.js',
"/* cos Function */": './src/assets/code/eqSolver/math/cos.js',
...
gulp.src('./src/assets/code/digest/documentDialogController.js')
.pipe(gfi({
"/* Digest Functions */": './src/assets/code/digest/eqDigest.js'
}))
.pipe(gulp.dest('./src/app/main/apps/document/'));
gulp.src('./src/assets/code/digest/workspace.controller.js')
.pipe(gfi({
"/* Digest Functions */": './src/assets/code/digest/eqDigest.js'
}))
.pipe(gulp.dest('./src/app/main/apps/workspace/'));
gulp.src('./src/assets/code/digest/partTree.controller.js')
.pipe(gfi({
"/* Digest Functions */": './src/assets/code/digest/eqDigest.js'
}))
.pipe(gulp.dest('./src/app/main/apps/partTree/'));
return Promise.resolve('the value is ignored');
});
gulp.task('scripts', function ()
{
return buildScripts();
});
function buildScripts()
{
return gulp.src(path.join(conf.paths.src, '/app/**/*.js'))
.pipe($.size())
};
These are the main paths. I think that there is a problem here. Adding a "/" prior to these caused further errors as changes that were obviously bad did not.
/**
* The main paths of your project handle these with care
*/
exports.paths = {
src : 'src',
dist: 'dist',
tmp : '.tmp',
e2e : 'e2e'
};
Here are the results of running the gulp build command. This use to take about 30 seconds to 1 minute. Now, it runs in 5 seconds and many of the messages that would tell me how many files were processed do not appear now.
[09:07:57] Using gulpfile ~/Sites/CADWOLF/cadwolf-laravel/angular_frontend/gulpfile.js
[09:07:57] Starting 'build'...
[09:07:57] Starting 'html'...
[09:07:57] Starting 'inject'...
[09:07:57] Starting 'concatFiles'...
[09:07:57] Finished 'concatFiles' after 26 ms
[09:07:57] Starting 'scripts'...
[09:07:58] all files 3.55 MB
[09:07:58] Finished 'scripts' after 385 ms
[09:07:58] Starting 'styles'...
[09:07:58] gulp-inject 68 files into index.scss.
[09:08:01] Finished 'styles' after 3.6 s
[09:08:01] Finished 'inject' after 4.01 s
[09:08:01] Starting 'partials'...
[09:08:02] Finished 'partials' after 884 ms
[09:08:02] Finished 'html' after 4.89 s
[09:08:02] Starting 'fonts'...
[09:08:02] Finished 'fonts' after 99 ms
[09:08:02] Starting 'other'...
[09:08:02] Finished 'other' after 270 ms
[09:08:02] Finished 'build' after 5.27 s
First thing to fix:
gulp.task('html', gulp.series('inject', 'partials'), function () // gulp3 syntax, 3 arguments
Change to:
gulp.task('html', gulp.series('inject', 'partials', function () // gulp4: 2 arguments
(and lose a ) at the end. Make these changes for your other tasks which use 3 args and see if that helps.