Gulp v4 watch task
After reading the documentation and, more importantly, understanding it, I was able to figure it out myself.
const autoprefixer = require('autoprefixer');
const babel = require('gulp-babel');
const cssdeclarationsorter = require('css-declaration-sorter');
const cssnano = require('cssnano');
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const uglify = require('gulp-uglify');
const paths = {
'styles': {
'base': 'src/styles/',
'src': 'src/styles/main.scss',
'dest': 'dist/styles/',
'watch': 'src/styles/**/*.scss',
},
'scripts': {
'base': 'src/scripts/',
'src': 'src/scripts/**/*.js',
'dest': 'dist/scripts/',
'watch': 'src/scripts/**/*.js',
},
};
const styles = function () {
const plugins = [
autoprefixer(),
cssdeclarationsorter(),
cssnano(),
];
return gulp.src(
paths.styles.src,
{
'base': paths.styles.base,
}
).
pipe(sass().on(
'error',
sass.logError
)).
pipe(postcss(plugins)).
pipe(rename({
'basename': 'styles',
'suffix': '.min',
})).
pipe(gulp.dest(paths.styles.dest));
};
const scripts = function () {
return gulp.src(
paths.scripts.src,
{
'base': paths.scripts.base,
}
).
pipe(babel()).
pipe(uglify()).
pipe(rename({
'suffix': '.min',
})).
pipe(gulp.dest(paths.scripts.dest));
};
const watch = function () {
gulp.watch(
paths.scripts.watch,
scripts
);
gulp.watch(
paths.styles.watch,
styles
);
};
const build = gulp.parallel(
styles,
scripts,
gulp.series(watch)
);
exports.default = build;
And for module
import autoprefixer from 'autoprefixer';
import babel from 'gulp-babel';
import cssdeclarationsorter from 'css-declaration-sorter';
import cssnano from 'cssnano';
import gulp from 'gulp';
import postcss from 'gulp-postcss';
import rename from 'gulp-rename';
import sass from 'gulp-sass';
import uglify from 'gulp-uglify';
const paths = {
'styles': {
'base': 'src/styles/',
'src': 'src/styles/main.scss',
'dest': 'dist/styles/',
'watch': 'src/styles/**/*.scss',
},
'scripts': {
'base': 'src/scripts/',
'src': 'src/scripts/**/*.js',
'dest': 'dist/scripts/',
'watch': 'src/scripts/**/*.js',
},
};
export const styles = function () {
const plugins = [
autoprefixer(),
cssdeclarationsorter(),
cssnano(),
];
return gulp.src(
paths.styles.src,
{
'base': paths.styles.base,
}
).
pipe(sass().on(
'error',
sass.logError
)).
pipe(postcss(plugins)).
pipe(rename({
'basename': 'styles',
'suffix': '.min',
})).
pipe(gulp.dest(paths.styles.dest));
};
export const scripts = function () {
return gulp.src(
paths.scripts.src,
{
'base': paths.scripts.base,
}
).
pipe(babel()).
pipe(uglify()).
pipe(rename({
'suffix': '.min',
})).
pipe(gulp.dest(paths.scripts.dest));
};
export const watch = function () {
gulp.watch(
paths.scripts.watch,
scripts
);
gulp.watch(
paths.styles.watch,
styles
);
};
const build = gulp.parallel(
styles,
scripts,
gulp.series(watch)
);
export default build;
I struggled with this one myself..
took me hours of headache only to find out that basically everything changes with v4.0
I've run my code like this and it works perfectly...
//Do everything once!
gulp.task('default', function(){
gulp.watch('src/styles/*.css', gulp.series('css')),
gulp.watch('src/html/*.html', gulp.series('copyHTML')),
gulp.watch('src/js/*.js', gulp.series('scripts')),
gulp.watch('src/images/*', gulp.series('imageMIN'));
return
});