Refactoring to Gulp 4 - javascript

I know there's lots of post about this but I can't find a solution.
This is my gulpfile that I tried to refactor but without success so trying here to get some answers. Tried everything I found about Gulp 3 -> Gulp 4 but nothing works. Maybe someone had a similar setup that needed conversion?
It was a long time ago since I touched this code and I feel a bit lost with Gulp right now.
return gulp.src('app/src/files/**/*.pdf')
.pipe(gulp.dest(dist + '/files'))
});
gulp.icons ({
return gulp.src('app/src/icons/**/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest(dist));
});
gulp.css({
const processors = [
atImport,
cssnext,
mqpacker,
clearfix,
cssnano
];
return gulp.src('app/src/css/*.css')
.pipe(postcss(processors))
.pipe(rename('main.min.css'))
.pipe(gulp.dest(dist));
});
gulp.nunjucks({
return gulp.src('app/pages/*.njk')
// Adding data to Nunjucks
.pipe(data(function () {
return require('./data.json')
}))
.pipe(nunjucksRender({
path: ['app/pages/', 'app/templates/'] // String or Array
}))
.pipe(gulp.dest(dist));
});
gulp.browser-sync({
browserSync({
server: {
baseDir: dist
}
});
});
gulp.scripts({
return gulp.src('app/src/js/**/*.js')
.pipe(concat('main.js'))
.pipe(rename('main.min.js'))
.pipe(uglify())
.pipe(gulp.dest(dist))
.pipe(reload({stream: true}));
});
gulp.images({
return gulp.src('app/src/img/**/*')
.pipe(imagemin({optimizationLevel: 3, progressive: true, interlaced: true}))
.pipe(gulp.dest('${dist}/img'))
});
gulp.watch({
gulp.watch('app/templates/**/*.+(njk)', ['nunjucks', reload]);
gulp.watch('app/**/*.+(njk)', ['nunjucks', reload]);
gulp.watch('app/src/**/*.css', ['css', reload]);
gulp.watch(['app/src/js/**/*.js', 'main.js'], ['scripts', reload]);
gulp.watch('app/src/img/**/*', ['images', reload]);
gulp.watch('app/src/icons/**/*', ['icons', reload]);
});
gulp.task('default', gulp.parallel('nunjucks', 'css', 'files', 'scripts', 'icons', 'images', 'watch', 'browser-sync'));
gulp.task('build', gulp.parallel('nunjucks', 'files', 'css', 'scripts', 'icons', 'images'));```

This form is wrong:
gulp.icons ({
return gulp.src('app/src/icons/**/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest(dist));
});
change all to :
gulp.task('icons', function() {
return gulp.src('app/src/icons/**/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest(dist));
});
And all your watch statements are wrong, change all of them to this form:
gulp.watch('app/templates/**/*.+(njk)', gulp.series('nunjucks', reload));
You don't show the reload function so I assume it is a function and not in the gulp.task('reload') form??
I would also change this:
gulp.task('default', gulp.parallel('nunjucks', 'css', 'files', 'scripts', 'icons', 'images', 'watch', 'browser-sync'));
since you call browser-sync last, gulp.series would be better so that the other tasks have completed on first run and their changes will be shown in the browser on first run:
gulp.task('default', gulp.series('nunjucks', 'css', 'files', 'scripts', 'icons', 'images', 'watch', 'browser-sync'));

Related

Gulp is compiling every Js-file

i have a problem with my gulp.
Its works fine and its really fast but Gulp is compiling all js files in my project...
my gulp-watch:
gulp.task('watch', function () {
gulp.watch(sassFilesWatch, ['styles']);
gulp.watch(jsFilesWatch, ['uglify'])
});
My array:
var jsFilesWatch = [
'clients/*/template/lib/jscripts/*.js',
'clients/*/template/modules/**/*.js',
'system/lib/jscripts/*.js',
'system/mod/**/*.js',
'clients/core/modules/**/*.js',
'!/**/*.min.js'
];
Thats my function:
gulp.task('uglify', function(){
pump([
gulp.src(jsFilesWatch, {
base: './'
}),
debug({
title: 'Compiled',
showFiles: false,
}),
uglify(),
rename({ suffix: '.min' }),
gulp.dest('./')
]);
});
And thats the output:
Output
Just my saved file should be compiled
how can i do that?
thanks alot
It seems all your files with .js extensions are
being debugged, uglified and minified.
Which saved file are you trying to compile?
**/*.js uses the gulp command to watch all files with the .js extension in all folders.
You could use .pipe()
var uglify = require('gulp-uglify'),
concat = require('gulp-concat');
gulp.task('js', function() {
gulp.src('scripts/*.js')
.pipe(uglify())
.pipe(concat('script.js'))
.pipe(gulp.dest('assets'))
});
Have a look into this Plugin, That will solve your problem
https://www.npmjs.com/package/gulp-changed
Try Changing your task to,
gulp.task('uglify', function(){
pump([
gulp.src(jsFilesWatch, {
base: './'
}),
changed('dist'),
ngAnnotate(),
debug({
title: 'Compiled',
showFiles: false,
}),
uglify(),
rename({ suffix: '.min' }),
gulp.dest('./')
]);
});
Note: this might run all your .js files at first time after you run your task, but it will identify the changed file on subsequent runs

Gulp reload browser after task is finished

Inside my gulp task, I want to fire reload my browser using browserSync.reload after the tasks have been finished. Currently my gulpfile.js looks like this:
gulp.task('serve', ['build'], function () {
browserSync.init({
notify: false,
server: "./" + dist
});
gulp.watch("/**/*.html", ['html']).on('change', browserSync.reload);
gulp.watch("/**/*.md", ['html']).on('change', browserSync.reload);
});
Currently the first thing gulp does is [BS] Reloading Browsers... and then [12:54:12] Starting 'html'....
How can I change this to first run html and on finish browserSync.reload?
gulp.task('reload', function (done) {
browserSync.reload();
done();
});
gulp.task('bs', function() {
browserSync.init({
proxy: "http://strona.pl/"
});
gulp.watch("./css/*.scss", gulp.series('sass', 'deploy', 'reload'));
gulp.watch('./**/*.php').on('change', browserSync.reload);
gulp.watch('./*.php').on('change', browserSync.reload);
});
I think you don't need the on.change listener, you can specify the reload like this:
gulp.task('serve', ['build'], function () {
browserSync.init({
notify: false,
server: "./" + dist
});
gulp.watch("/**/*.html", ['html', browserSync.reload]);
gulp.watch("/**/*.md", ['html', browserSync.reload]);
});
EDIT
As Mark said, running both tasks in parrallel could generate some errors, a better solution could be:
gulp.task('serve', ['build'], function () {
browserSync.init({
notify: false,
server: "./" + dist
});
gulp.watch("/**/*.html", ['reload']);
gulp.watch("/**/*.md", ['reload']);
});
gulp.task('reload', ['html'], function () {
browserSync.reload();
});

Gulp Browsersync causing multiple reloads with each filechange

I'm using browsersync with Gulp, running some tasks on particular filechanges. Whenever I save a file, I get 10+ [BS] Reloading Browsers... in my terminal and performance is understandably laggy.
Here are my gulpfile:
gulp.task('bowerJS', function() {
gulp.src(lib.ext('js').files)
.pipe(concat('lib.min.js'))
.pipe(uglify())
.pipe(gulp.dest('app/assets/js'));
});
gulp.task('bowerCSS', function() {
gulp.src(lib.ext('css').files)
.pipe(concat('lib.min.css'))
.pipe(gulp.dest('app/assets/css/'));
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('less', function() {
gulp.src('./app/css/*.less')
.pipe(less())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('app/assets/css'))
.pipe(browserSync.stream());
});
// Render Jade templates as HTML files
gulp.task('templates', function() {
gulp.src('views/**/*.jade')
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('app/src/'))
});
gulp.task('php', function() {
php.server({ base: 'app', port: 8123, keepalive: true});
});
gulp.task('serve', ['bowerJS', 'bowerCSS', 'less', 'templates', 'php'], function() {
var proxyOptions1 = url.parse('http://some-site:1234');
proxyOptions1.route = '/api/hi';
browserSync({
port: 8999,
proxy: '127.0.0.1:8123',
middleware: [
proxy(proxyOptions1),
history()
],
notify: false
});
gulp.watch("app/assets/css/*.less", ['less']);
gulp.watch("app/**/*.html").on('change', browserSync.reload);
gulp.watch("app/assets/js/*.js").on('change', browserSync.reload);
gulp.watch("views/**/*.jade", ['templates']);
});
What am I doing wrong here?
use only browserSync.stream (replace browserSync.reload then) and pass option once: true like this
browserSync.stream({once: true})
this should works fine.
The awaitWriteFinish option in Chokidar fixed it for me.
Example:
browserSync.init({
server: dist.pages,
files: dist.css + '*.css',
watchOptions: {
awaitWriteFinish : true
}
});

What is a good way to integrate express into gulp?

I've been given a project with existing gulp configuration. I'm completely new to gulp so I don't really understand the code at all. To complete the project I need to use express with ejs instead of the default html. However, I couldn't integrate express into the gulp config file, when I tried gulp-express, the server ended up not working as intended or not working at all (when I replace html with ejs).
I need to know which package should I use for this? What kind of folder structure is good enough? And how could I make express with ejs as the template engine work with gulp? Thank you in advance.
(Sorry if I ask too many questions)
The initial folder structure
The gulp config code
// generated on 2016-05-09 using generator-webapp 2.0.0
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserSync from 'browser-sync';
import del from 'del';
import {stream as wiredep} from 'wiredep';
const $ = gulpLoadPlugins();
const reload = browserSync.reload;
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
gulp.task('scripts', () => {
return gulp.src('app/scripts/**/*.js')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.babel())
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('.tmp/scripts'))
.pipe(reload({stream: true}));
});
function lint(files, options) {
return () => {
return gulp.src(files)
.pipe(reload({stream: true, once: true}))
.pipe($.eslint(options))
.pipe($.eslint.format())
.pipe($.if(!browserSync.active, $.eslint.failAfterError()));
};
}
const testLintOptions = {
env: {
mocha: true
}
};
gulp.task('lint', lint('app/scripts/**/*.js'));
gulp.task('lint:test', lint('test/spec/**/*.js', testLintOptions));
gulp.task('html', ['styles', 'scripts'], () => {
return gulp.src('app/*.html')
.pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.cssnano()))
.pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
.pipe(gulp.dest('dist'));
});
gulp.task('images', () => {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
progressive: true,
interlaced: true,
// don't remove IDs from SVGs, they are often used
// as hooks for embedding and styling
svgoPlugins: [{cleanupIDs: false}]
})))
.pipe(gulp.dest('dist/images'));
});
gulp.task('fonts', () => {
return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {})
.concat('app/fonts/**/*'))
.pipe(gulp.dest('.tmp/fonts'))
.pipe(gulp.dest('dist/fonts'));
});
gulp.task('extras', () => {
return gulp.src([
'app/*.*',
'!app/*.html'
], {
dot: true
}).pipe(gulp.dest('dist'));
});
gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
gulp.task('serve', ['styles', 'scripts', 'fonts'], () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp', 'app'],
routes: {
'/bower_components': 'bower_components'
}
}
});
gulp.watch([
'app/*.html',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});
gulp.task('serve:dist', () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['dist']
}
});
});
gulp.task('serve:test', ['scripts'], () => {
browserSync({
notify: false,
port: 9000,
ui: false,
server: {
baseDir: 'test',
routes: {
'/scripts': '.tmp/scripts',
'/bower_components': 'bower_components'
}
}
});
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('test/spec/**/*.js').on('change', reload);
gulp.watch('test/spec/**/*.js', ['lint:test']);
});
// inject bower components
gulp.task('wiredep', () => {
gulp.src('app/styles/*.scss')
.pipe(wiredep({
ignorePath: /^(\.\.\/)+/
}))
.pipe(gulp.dest('app/styles'));
gulp.src('app/*.html')
.pipe(wiredep({
exclude: ['bootstrap-sass'],
ignorePath: /^(\.\.\/)*\.\./
}))
.pipe(gulp.dest('app'));
});
gulp.task('build', ['lint', 'html', 'images', 'fonts', 'extras'], () => {
return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});
gulp.task('default', ['clean'], () => {
gulp.start('build');
});

Concatenated files put into main.js just keeps stacking instead of clearing the file then adding the code

I'm trying to compile all my scripts into a single main.js file which I can then link to my index file. Problem is that all my script files are being concatenated and then just added to the main.js file, so if I save 3 times, I will basically have 3 copies of all my scripts concatenated and put in the main.js file.
I would like to either delete the main.js file each time I save and then run the concatenation, or just clean the file before adding the contents. Now if I try to delete the file using the del module, I receive an error stating that I can't delete files out of the working directory without forcing this action. I would like to avoid forcing this if possible.
I feel that there must be a more elegant way of doing this..
Here's my script task:
// Concat and compile our JS into a minified dist file
gulp.task('scripts', function() {
return gulp.src('../app/public/assets/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
//.pipe(del(['../app/public/assets/scripts/main.js'])) <-- Doesn't work without forcing
.pipe(gulp.dest('../app/public/assets/scripts'))
.pipe(gulpif(flags.build, gulp.dest('../app/dist/assets/scripts')))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulpif(flags.build, gulp.dest('../app/dist/assets/scripts')))
.pipe(notify({ message: 'Finished compiling scripts' }));
});
I usually do something like this (very simplified :) ):
var PARAMS = {
destPath: 'build',
js: [
'src/js/test1.js',
'src/js/test2.js',
// ecc...
],
// other
};
var TARGETS = {
dest: 'main.js', // dest file
extra: [
// This files are inclued only in .bundle.min.js version
// extra file here
],
js: [
'src/js/test1.js',
'src/js/test2.js',
// ecc...
]
};
gulp.task('connect', function() {
return connect.server({
livereload: true,
host: '0.0.0.0',
port: 8000
});
});
gulp.task('reload', ['build'], function () {
return gulp.src(['sandbox/**/*.html'])
.pipe(connect.reload());
});
gulp.task('watch', ['connect', 'build'], function () {
var src = [];
// other
src = src.concat(PARAMS.js);
return gulp.watch(src, ['reload']);
});
gulp.task('clean', function (done) {
return del(['build'], done);
});
gulp.task('build', ['clean'], function () {
return gulp.src(target.js);
.pipe(concat(target.dest))
.pipe(gulp.dest(PARAMS.destPath)) // Plain
.pipe(uglify())
.pipe(rename({ extname: '.min.js' })) // Minified
.pipe(gulp.dest(PARAMS.destPath))
.pipe(addsrc(target.extra))
.pipe(order(target.extra))
.pipe(concat(target.dest))
.pipe(rename({ extname: '.bundled.min.js' })) // Bundled
.pipe(gulp.dest(PARAMS.destPath));
});
gulp.task('default', ['build']);

Categories