[Tips & Tricks] 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.

Put both files, for example, in the directory of your theme
Install project dependencies with npm install.
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": "makedrupaleasy",
    "version": "1.0.2",
    "author": "Ruslan P",
    "homepage": "https://makedrupaleasy.com",
    "private": true,
    "devDependencies": {
        "autoprefixer": "^9.7.4",
        "css-mqpacker": "^7.0.0",
        "gulp": "^3.9.1",
        "gulp-imagemin": "^4.1.0",
        "gulp-postcss": "^7.0.1",
        "gulp-sass": "^4.0.1",
        "gulp.spritesmith": "^6.11.0"
    },
    "main": "gulpfile.js"
}

File

gulpfile.js

'use strict';
 
var gulp = require('gulp'),
  imagemin = require('gulp-imagemin'),
  spritesmith = require('gulp.spritesmith'),
  sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),
  postcss = require('gulp-postcss'),
  autoprefixer = require('autoprefixer'),
  mqpacker = require('css-mqpacker');
 
gulp.task('sprite', function () {
  var spriteData = gulp.src('images/sprite-src/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    imgPath: '../images/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 () {
  gulp.src('./scss/*')
    .pipe(sourcemaps.init())
    .pipe(sass({
      outputStyle: 'expanded',
      precision: 10
    }).on('error', sass.logError))
    .pipe(postcss([
      mqpacker({
        sort: true
      }),
      autoprefixer({
        overrideBrowserslist: ['last 2 versions']
      })]))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./css'));
});
 
gulp.task('imagemin', function () {
  gulp.watch(['images/**'], ['imagemin']);
});
 
gulp.task('watch', function () {
  gulp.watch(['images/sprite-src/*.png', './scss/**/*.scss'], ['sprite', 'sass']);
});

Comments

Example of gulp file

An easy way to use this.

Ruslan Piskarov

Tags