Example of gulp file

19 Mar.2018
 Example of gulp file

For a long time, I use gulp in my work to automate several processes, such as compile SASS to CSS, merge different images into a sprite, make CSS styles universal for all browsers. In this short article, I just want to share the file that I use, maybe it will be useful to someone. I will not describe each line step by step, the purpose of this article is to make a cheat sheet, not a manual.

A package.json file is the best way to manage locally installed npm packages.

  • Lists the packages that your project depends on
  • Allows you to specify the versions of a package that your project can use using semantic versioning rules
  • Makes your build reproducible and therefore much easier to share with other developers

A gulpfile.js file is used to configure or define tasks and load Gulp plugins.

An easy way to use this.

  1. Put both files, for example, in the directory of your theme
  2. Install project dependencies with npm install.
  3. Run Gulp with gulp watch.

More detailed documentation on the official website.

Here is also a similar article with an example for grunt.

Also, I did not have time to try webpack, so I'll be happy if someone else shares an example of a similar file doing similar tasks, I mean SASS to CSS, Post CSS, Images to Sprite. Thanks in advance.

File
package.json
{
  "name": "EasyDrupal",
  "version": "1.0.0",
  "author": "Ruslan P",
  "private": true,
  "devDependencies": {
    "autoprefixer": "^7.1.6",
    "gulp": "^3.9.1",
    "gulp-imagemin": "^3.4.0",
    "gulp-postcss": "^7.0.0",
    "gulp-sass": "^3.1.0",
    "gulp.spritesmith": "^6.7.0",
  }
}
File
gulpfile.js
'use strict';
 
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var spritesmith = require('gulp.spritesmith');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
 
gulp.task('sprite', function () {
  var spriteData = gulp.src('images/sprite-src/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: '_sprite.scss',
    padding: 2
  }));
  spriteData.img.pipe(gulp.dest('images'));
  spriteData.css.pipe(gulp.dest('scss'));
});
 
gulp.task('imagemin', function () {
  return gulp.src('images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('images'))
});
 
gulp.task('sass', function () {
  return gulp.src('./scss/*')
    .pipe(sourcemaps.init())
    .pipe(sass({
      outputStyle: 'expanded',
      precision: 10
    }).on('error', sass.logError))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./css'));
});
 
gulp.task('postcss', function () {
  return gulp.src('./*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([autoprefixer({
      browsers: ['last 3 versions']
    })]))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./'));
});
 
 
gulp.task('imagemin', function () {
  gulp.watch(['images/**'], ['imagemin']);
});
gulp.task('watch', function () {
  gulp.watch(['images/sprite-src/*.png', './scss/**/*.scss'], ['sprite', 'sass', 'postcss']);
});