Gulp 4 - Gulpfile.js set up

Question

I'm finding documentation on Gulp 4 extremely hard to find so I thought I might ask here to see if anyone can help.

I'm pretty new to Gulp anyway and have been using Gulp 3 without any problems until I tried running it on a virtual machine we use for development. My gulp file is very straight forward I just use gulp-sass to compile SASS to a css file which was working fine but every time it saves the css file it changes the write permissions on the file and the browser can't read the file!

So I did a bit of research and apparently this is an issue with Gulp 3 which has now been fixed in Gulp 4 - see - https://github.com/gulpjs/gulp/issues/1012. So I thought I would try Gulp 4 so I updated as per instructions here - http://www.ociweb.com/resources/publications/sett/gulp-4/ but I'm having real problems setting up the actual gulpfile.js as I can't find any documentation on it. This is what I have pieced together at the moment but no luck... unfortunately my js skills are lacking!!

Example Gulp 4 file here - https://gist.github.com/demisx/beef93591edc1521330a

All I need the gulpfile to do is compile sass using gulp-sass

// include gulp
var gulp = require('gulp');

// include plugins
var sass = require('gulp-sass');


var paths = {
  dirs: {
    build: './furniture/css'
  },
  sass: './furniture/sass/**/*.scss'
};


// Shared tasks
gulp.task('glob', function () {
  var pattern = '.build/**/*.css';

  gulp.src(pattern, { read:false })
    .pipe(using());
});

// SASS

gulp.task('sass', function () {
  return gulp.src(paths.sass)
    .pipe(sass())
    .pipe(changed(paths.dirs.build))
    .pipe(gulp.dest(paths.dirs.build))
    .pipe(grep('./furniture/css', { read: false, dot: true }))
});

gulp.task('watch:styles', function () {
  gulp.watch(paths.sass, 'sass');
});

// Default task
gulp.task('default'('build', 'ws', 'watch'));

Answer 1

Well, we might need some more information on the errors you are getting. But, this here should work if the issue is just getting your gulpfile.js working.

If you already have figured out the solution, then great. But for others who come across this, I will give some tips, and then this should work.

Index

• First: Uninstalling gulp 3 and installing gulp 4
  • I'm going to provide install and uninstall directions in order to use gulp 4.
• Second: Testing to see if gulp 4 works
  • I'm going to give you the most basic version to try, and if that works, then,
• Third: The final gulpfile version
  • try the second version I provide for the needs you've mentioned based on the file you've shown me.
• Finally: Some notes on Gulp 4 and current gulp 4 build
  1. Based on your gulpfile shown, here are some pointers on Gulp 4,
  2. And quick fix for the current gulp 4 build 0.4.0

---

First: Uninstalling gulp 3 and installing gulp 4

If you haven't already removed the original gulp from your system, you must do so. Also you must remove it as a project dependency if you've added it.

npm uninstall -g gulp
cd {your-project-dir}
npm uninstall gulp

Next you must install gulp 4 globally and in your project as a dependency.

npm install -g gulpjs/gulp-cli#4.0

in your project:

npm install --save-dev gulpjs/gulp-cli#4.0

IMPORTANT NOTES

It is now gulpjs/gulp#4.0 (gulp instead of gulp-cli)

---

Second: Testing to see if gulp 4 works

Basic Version of your gulpfile:
NOTE: Change the gulp.src(...), and .pipe(gulp.dest(...)) paths if you are copying and pasting.

// =========================================================
// gulpfile.js
// =========================================================
var gulp        = require('gulp'),
    sass        = require('gulp-sass');

// ---------------------------------------------- Gulp Tasks
gulp.task('sass', function(){
    return gulp.src("path/to/sass-file.scss")
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest("path/to/css-destination.css"))
});

// --------------------------------------- Default Gulp Task
gulp.task('default', function(){
    console.log("It's working!");
});

Let's find out if gulp 4 is working:

1. run the default gulp task in your terminal:

   gulp

   • If you see: It's working! in your terminal then you know that gulp 4 is installed correctly.
   • If you see "It's working!" but also some errors, then you will need to resolve those, but the issue should be with your gulpfile.js file. (Also see more recent install/uninstall instructions && more recent gulp 4 tutorials if some time has passed since this has been posted).
   • If you just see errors (and "It's working!" doesn't at all appear), then it's likely that gulp 4 was not properly installed, or gulp 3 was not properly removed and you should uninstall both gulp 3 and 4 and reinstall gulp 4. NOTE: This is especially likely if you have tried a bunch of various install instructions from various sources.

2. If it worked, then:

   • let's back up your css files that sass has created for you previously (if existing project), and then deleting those css files, and then
   • next try running your sass task in the terminal:

   gulp sass

If it worked (created those files), then everything is working and continue to my other snippets below.

---

Third: The final gulpfile version

Here is the solution for your needs based on the gulpfile.js shown:

// =========================================================
// gulpfile.js
// =========================================================
// ------------------------------------------------ requires
var gulp = require('gulp'),
    sass = require('gulp-sass');

// ------------------------------------------------- configs
var paths = {
  sass: {
    src: './furniture/sass/**/*.{scss,sass}',
    dest: './furniture/css',
    opts: {

    }
  }
};

// ---------------------------------------------- Gulp Tasks
gulp.task('sass', function () {
  return gulp.src(paths.sass.src)
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(paths.sass.dest))
});

// ------------------------------------ Gulp Testing Message
gulp.task('message', function(){
  console.log('It works!!');
});

// ---------------------------------------------- Gulp Watch
gulp.task('watch:styles', function () {
  gulp.watch(paths.sass.src, gulp.series('sass'));
});

gulp.task('watch', gulp.series('sass',
  gulp.parallel('watch:styles')
));


// -------------------------------------------- Default task
gulp.task('default', gulp.series('sass', 
  gulp.parallel('message', 'watch')
));

Although I said this is the final version, I've left the optional message task in the gulpfile, in order to show gulp.series and gulp.parallel at work. I briefly cover them in the final section below. It is not necessary and may be removed.

You may also notice that I've added a watch task which contains:
gulp.series('sass', gulp.parallel('watch:styles')) This is so that you may in the future, add additional watch: tasks. e.g. watch:scripts.

The gulp.series('sass'...) portion is purely a convenience method. If you write some code and then run your gulp task, you will need to modify it again before your changes are reflected. Adding the 'sass' first before running the watch tasks, it will transpile before it begins watching for changes.

---

Finally: Some notes on Gulp 4 and current gulp 4 build

1. Based on your gulpfile shown, here are some pointers on Gulp 4

Gulp 4 now uses:

• gulp.series: Controls the order of what is to be run. It runs the tasks in sequential order until completion, e.g.:
  gulp.series('task-name-1', 'task-name-2')
• 'gulp.parallel': Runs the tasks at the same time as gulp 3 previously had done, e.g.:
  gulp.parallel('task-name-3', 'task-name-4')

• seires and parallel can be used together to better control the flow of the tasks, e.g.:

  gulp.task('example', 
    gulp.series('thisTaskIsRunFirst', 'thisSecond',
      gulp.parallel('theseThird-SameTime-1', 'theseThird-SameTime-2')
  ));  
  

2. And quick fix for the current gulp 4 build

In these examples, you will notice that I had used gulp.series in the watch:styles task:

    // ---------------------------------------------- Gulp Watch
    gulp.task('watch:styles', function () {
      gulp.watch(paths.sass, gulp.series('sass'));
    });

This is due to, presumably, a bug in the gulp 4 watch method. I am assuming this is the case, as I could not get the watch task to work by simply using 'sass' and instead had to use gulp.series('sass').
I said presumably it's a bug, as when learning gulp 4 myself, others had been using the traditional watch task format with their gulp 4 examples:

gulp.task('watch', function(){
  gulp.watch('path/of/files/to/watch/**/*.scss', 'sass');
});

I had to come up with this work around in order to use gulp watch. Which is fine, and also could provide other benefits of executing some other tasks after if you wish to.

I will come back and provide some tutorial links for Gulp 4 once I finish writing them.