Jump to content

.London Domains - £4

Gulp 4 anyone managed to get it working?

  • Please log in to reply
No replies to this topic

#1 historygirllfc

  • Hefty Member
  • Advanced Member
  • 640 posts

Posted 17 February 2019 - 14:48

Does anyone use this? I am trying to get to grips with it but struggling a bit to be honest. Gulp 3 was much easier to understand Gulp 4 syntax is so different why?


I'm trying to use browsersync to  love reloadmy pages on cahnge but its not working. (Managed fine with gulp 3...)


The default tasks run browsersync open the page in the browser but nothing live reloads not js or css or html what am I missing?


Should I perhaps use webpack instead? I've learnt a bit of it recently and I'm thinking it might be easier than trying to get to grips with the horrible Gulp 4 syntax

const gulp = require('gulp'),
 sass = require('gulp-sass'),
 autoprefixer = require('gulp-autoprefixer'),
 cleanCSS = require('gulp-clean-css'),
 concat = require('gulp-concat'),
 browserSync = require('browser-sync').create(),
 reload = browserSync.reload,
 sourcemaps = require('gulp-sourcemaps'),
 uglify = require('gulp-uglify'),
 changed = require('gulp-changed');

const scss = './src/scss/',
        js = './src/scripts/';

const watchCss = scss + '/*.scss',
      watchJs = js + '/*.js';

function css(){
    return gulp.src([scss + '*.scss'])
        outputStyle: 'expanded'
    .pipe(autoprefixer('last 2 versions'))

function javascript() {
    return gulp.src(js)

function watch(){
        server: "./"
    gulp.watch(watchCss, css)
    gulp.watch(watchJs, javascript);
    gulp.watch([scss + js + '*.html']).on('change', reload)

exports.css = css;
exports.javascript = javascript;
exports.watch = watch;

const build = gulp.parallel(watch);
gulp.task('default', build);

  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users