We Keep Coding

Upgrading to Gulp 4 from Gulp 3

I've attempted to update the gulpfile below to Gulp v4 from v3 but am still getting an error: AssertionError [ERR_ASSERTION]: Task never defined: client
Not sure what I am missing but realise that the functions may not be written correctly. The tasks in series are correct I believe: gulp.task('build', gulp.series('client', 'sass')); for example.
// gulpfile.js
var gulp = require('gulp'),
concat = require('gulp-concat'),
browserify = require('gulp-browserify'),
rename = require('gulp-rename'),
nodemon = require('gulp-nodemon'),
sass = require('gulp-sass');
gulp.task('build', gulp.series('client', 'sass'));
gulp.task('watch', gulp.series('client-watch', 'sass-watch'));
gulp.task('server', function () {
nodemon({
script: 'server/index',
ext: 'js json'
});
});
gulp.task('client', function () {
gulp.src('client/js/main.js')
.pipe(browserify({
transform: ['hbsfy'],
extensions: ['.hbs']
}))
.pipe(rename('hearthclone.js'))
.pipe(gulp.dest('./client/build'));
});
gulp.task('client-watch', function () {
gulp.watch('client/js/**/*.js', ['client']);
});
gulp.task('sass', function () {
gulp.src('client/**/*.scss')
.pipe(sass())
.pipe(concat('style.css'))
.pipe(gulp.dest('client/assets/css'));
});
gulp.task('sass-watch', function () {
gulp.watch('client/**/*.scss', ['sass']);
});
gulp.task('default', gulp.series('build', 'server', 'watch'));

When you use the gulp.task form of defining tasks (rather that as functions) then you cannot refer to those tasknames until after they have been declared. That would be a forward reference (see below). So just put your
gulp.task('build', gulp.series('client', 'sass'));
gulp.task('watch', gulp.series('client-watch', 'sass-watch'));
after all those tasks have been defined. I recommend right before the default task line.
See https://gulpjs.com/docs/en/api/series#forward-references
Forward references
A forward reference is when you compose tasks, using string
references, that haven't been registered yet. This was a common
practice in older versions, but this feature was removed to achieve
faster task runtime and promote the use of named functions.
In newer versions, you'll get an error, with the message "Task never
defined", if you try to use forward references. You may experience
this when trying to use exports for your task registration and
composing tasks by string. In this situation, use named functions
instead of string references.

Gulp and Three js not allowing import or require

I want to use Gulp in my future projects, but what it is more important to me is to add Three.js modular functionality, to the project, with normal plugins example uglify i dont have any problems, but when i run my gulp file in my js code theres always a error THREE is not defined, or if i type
var THREE = require('three');
it says require is not defined, the same if i add a import,
import * as THREE from "three";
import is not defined
hope i had expressed my problem correctly.
This is my Gulpfile.-
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var THREE = require('three');
gulp.task('build', () =>
gulp.src('app.js')
.pipe(bro({
transform: [
babelify.configure({ presets: ['es2015'] }),
[ 'uglifyify', { global: true } ]
]
})
.pipe(gulp.dest('dist')
)))
gulp.watch('*.js', ['build'])
// Lint Task
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint', 'scripts']);
gulp.watch('scss/*.scss', ['sass']);
});
// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch', 'build']);
EDIT: Think i got it, the documentation of a site was not complete, and i didnt knew i had to install Browserify also with gulp-bro, that seems to be the same, anyway that fixed the require problem. (bringing other new ones) Thank you for everything, and hope this helps somebody.
EDIT2: Now i have found out that Rollup.js is a better solution, with Babel, theres Rollup npm s for that, good luck.
Thank you.

gulp plugin - to merge broken js files into one js file?

I have read all the answers on the internet that I could find on this subject in last two days. Now I am just searching for gulp plugin that can merge broken js files into one big js file and not to throw error in terminal caused by unclosed function in one js file.
Explanation:
I have created js app built with modules.
At the very beginning I didn't knew that this will become big app and therefore I have wrote js code in one file.
Now I have come to an idea to split app.js file like this:
app-start.js (Named IIFE function open)
module1.js
module2.js
etc.
app-end.js (Named IIFE function closed)
I am using gulp as task runner and gulp-concat which works perfectly.
Problem is that when I try to break IIFE function in two files (app-start.js, app-end.js) then gulp doesn't wanna build bundle.js file.
I get error in terminal that I should repair my js code in
app-start.js
So, my question is,
do You maybe know about gulp plugin that will merge multiple js files in given order and never mind the js code errors in those files?
This is my gulp.js code:
var gulp = require('gulp'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
plumber = require('gulp-plumber'),
concat = require('gulp-concat'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create(),
sourceMap = require('gulp-sourcemaps'),
babel = require('gulp-babel');
gulp.task('sass', function() {
gulp.src('resources/sass/config-normalize.sass')
//.pipe(sourceMap.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(autoprefixer({browsers: ['last 30 versions']}))
.pipe(sass({outputStyle: 'expanded'})) //expanded - compressed
//.pipe(sourceMap.write('.'))
.pipe(gulp.dest('configurator/css'));
gulp.src('resources/sass/config-style.sass')
//.pipe(sourceMap.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(autoprefixer({browsers: ['last 30 versions']}))
.pipe(sass({outputStyle: 'expanded'})) //expanded - compressed
//.pipe(sourceMap.write('.'))
.pipe(gulp.dest('configurator/css'))
.pipe(browserSync.stream());
});
gulp.task('scripts', function() {
gulp.src([
//'resources/js/vendor/jquery.js',
//'resources/js/vendor/library/neki_file.js',
'resources/js/001-app-start.js',
'resources/js/002-ajax.js',
'resources/js/003-global-variables.js',
'resources/js/050-main.js',
'resources/js/100-my-modules.js',
'resources/js/app-end.js'
])
//.pipe(plumber())
.pipe(babel({
presets: ['es2015']
}))
.pipe(concat('all.js'))
//.pipe(uglify())
.pipe(gulp.dest('configurator/js'))
.pipe(browserSync.stream());
});
gulp.task('php', function() {
gulp.src('./**/*.php')
.pipe(browserSync.stream());
});
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "localhost" //Upisi path do projekta na local hostu bez http://
});
});
gulp.task('images', function() {
return gulp.src('assets/images-uncompressed/**/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('build/images'));
});
gulp.task('watch', function() {
gulp.watch('./**/*.php', ['php']);
gulp.watch('resources/sass/**', ['sass']);
gulp.watch('resources/js/**', ['scripts']);
//gulp.watch('resources/images-uncompressed/*', ['images']);
});
gulp.task('default', ['sass', 'scripts', 'php', 'browser-sync', 'watch']);

The problem is with the order you run your Gulp tasks:
babel parses and transforms JavaScript so it needs well-formed input.
concat doesn't need to understand JavaScript; it just combines text files. It will happily deal with your broken-up files.
If you move concat before babel, Babel can work on a single, well-formed blob of JavaScript built up from your split files.

gulp watch not minify

i new with gulp and i have a problem that i can't know why.
I want to minify my js and css, with the code below, works, but only works if i call minify-js and minify-css into default.
Gulp watch not work and i don't know why.
If a delete the .min with watch running, he creates the .min file, but came empty. All problems i have found came with solutions that my code already have.
var css = [
'./css/estilo.css'
];
var js = [
'./js/app.js'
];
var gulp = require('gulp');
var jsmin = require('gulp-jsmin');
var rename = require('gulp-rename');
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var watch = require('gulp-watch');
var cssmin = require("gulp-cssmin");
var stripCssComments = require('gulp-strip-css-comments');
gulp.task('minify-css', function(){
gulp.src(css)
.pipe(stripCssComments({all: true}))
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./css/min/'));
});
gulp.task('minify-js', function () {
gulp.src(js)
.pipe(jsmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./js/min/'));
});
gulp.task('default', function() {
gulp.start('watch');
});
gulp.task('watch', function() {
gulp.watch(js, ['minify-js']);
gulp.watch(css, ['minify-css']);
});

Change
gulp.task('default', function() {
gulp.start('watch');
});
to:
gulp.task('default', ['watch']);
This will set the default task's dependency as watch, running watch when default is called.
Also, instead of running gulp, you can run gulp watch to start watching your files. If you make a change to ./css/estilo.css or ./js/app.js, gulp will change it automatically.
Make sure safe write is turned off in your editor (if you use JetBrains this guide should work), and the /css and /min directories have been created.

Gulp uglify breaking angular application

When trying to use gulp-ugily with my angular application, it is breaking, even though I am running it through gulp-ngmin.
Here is the gulp file:
var gulp = require('gulp'),
concat = require('gulp-concat'),
ngmin = require('gulp-ngmin'),
uglify = require('gulp-uglify');
gulp.task('compress', function() {
gulp.src('client/js/source/*.js')
.pipe(concat('app.js'))
.pipe(ngmin())
.pipe(uglify())
.pipe(gulp.dest('client/js'));
});

It helps to disable the mangle option in uglify, for it's messing with all the injection stuff and naming.
.pipe(uglify({ mangle: false }))

Maybe answering this for future users, as it seems the post is old.
Use ng-annotate to fix AngularJS problems when uglifying. Install it as any other library:
npm install gulp-ng-annotate --save-dev
And then use this in your gulpfile.js:
var gulp = require('gulp')
var concat = require('gulp-concat')
var uglify = require('gulp-uglify')
var ngAnnotate = require('gulp-ng-annotate')
gulp.task('js', function () {
gulp.src(['src/**/module.js', 'src/**/*.js'])
.pipe(concat('app.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('.'))
})
Hope this helped!
Source: https://medium.com/#dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917