Gulp & Sass Starter Toolkit

You can customize the toolkit to your liking.

Add or delete folders, files, and so on.

Install or delete npm plugins as you need them.

---

If you have an awesome idea for the toolkit, please share it with us!

The toolkit comes with gulp, a toolkit for automating painful and time-consuming tasks. Sass, a powerful css extension and Pug, a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.

PUG is optional if you really don't need it. Be sure to delete all references of pug in gulpfile.js and package.json, all files & folders before you "npm install".

Some may like it, some don't. That's why it is optional.

If you want gulp to handle the copying of specific files from the src to build, insert the gulp task below underneath the copy task comment.

/* 
*
* The COPY task
* Copy files from node_modules or src folder
* to the build folder. E.g. Bootstrap, jQuery.
* 
* Please check #4 on https://gulpsasstoolkit.com/docs.html
* for the code block if you want the copy task.
*
*/
function copy_task() {
  // This lines are for css files.
  src(['src/css/file1.css', 'src/css/file2.css'])
    .pipe(dest('build/css'))
    .pipe(browserSync.stream());
  // This lines are for js files.
  src(['src/js/file1.js', 'src/js/file2.js'])
    .pipe(dest('build/js'))
    .pipe(browserSync.stream());
  // You can add more if you need to.
};

If you change something in the file and want gulp to auto-copy it again, insert this to the watch task:

watch('src/js/**/*.js', copy_task);

It should look like this then:

function watch_task() {
  watch('src/sass/**/*.sass', sass_task);
  watch('src/img/**/*', image_task);
  watch('src/js/**/*.js', copy_task);
};

The same works for css or any other file.

watch('src/css/*.css', copy_task);

Some may like it, some don't. That's why it is optional.

If you want to use pug, insert the gulp task below underneath the pug task comment.

/* 
*
* The PUG task.
* Prettifies our pug files after compiling.
* All files in src/pug are compiled to html,
* so that you can have index.html, about.html etc.
* Sub-directories are not compiled. They are for
* including.
* 
* Set pretty to false to minify html.
*
*/
function pug_task() {
  return src('src/pug/*.pug')
    .pipe(pug({
      pretty: true
    }))
    .pipe(dest('build'))
    .pipe(browserSync.stream());
};

Let's watch pug files and compile them automatically.

function watch_task() {
  watch('src/sass/**/*.sass', sass_task);
  watch('src/pug/**/**/*.pug', pug_task);
  watch('src/img/**/*', image_task);
};

That should be it. Don't hesitate to ask for help if you need assistance.

1.1.0

---

Updated to Gulp 4 and completely rewritten gulpfile.js

It's much faster and cleaner now.

1.0.0

---

Initial Release