Gulp cheatsheet

This file was auto-generated on 2022/3/12 - 13:1.

🔗 https://gulpjs.com/docs/en/getting-started/quick-start/

Create a package.json file in your project directory by running this command

npm init

Install the gulp package

npm install --save-dev gulp

Create a file named gulpfile.js in your project root. This file will contain your task script.

Tasks

Browser sync

🔗 https://browsersync.io/docs/gulp

npm install browser-sync gulp --save-dev

const gulp = require('gulp');
const browserSync = require('browser-sync').create();

// Static server
gulp.task('serve', function(){
    // Watch for all files change and reload
    gulp.watch('**').on('change', () => {
        browserSync.reload();
    });


    browserSync.init({
        // serve files from root directory
        server: {baseDir: "./"},

        // serve files from /app folder
        server: {baseDir: "./app"},

        // serve files both root and /app
        server: ["./", "./app"]
    });
});

Clone files

🔗 https://gulpjs.com/docs/en/api/dest/

const gulp = require('gulp');

// copy files and create /app folder in root
gulp.task('create-app', () => {
    return gulp.src([
        // all files and sub-folder in assets folder
        'assets/**/*.*',
        'index.html'
    ], {base: './'})
        .pipe(gulp.dest('app'));
});

Delete

🔗 https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md

npm install --save-dev gulp del

const gulp = require('gulp');
const del = require('del');

gulp.task('clean', function(){
    return del([
        'dist/report.csv',
        // here we use a globbing pattern to match everything inside the `mobile` folder
        'dist/mobile/**/*',
        // we don't want to clean this file though so we negate the pattern
        '!dist/mobile/deploy.json'
    ]);
});

Minify css

🔗 https://www.npmjs.com/package/gulp-clean-css

npm install --save-dev gulp-clean-css

const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', () => {
    return gulp.src('src/*.css')
        .pipe(rename({extname: '.min.css'}))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('dist'));
});

Minify js

🔗 https://www.npmjs.com/package/gulp-uglify

npm install --save-dev gulp-uglify

const gulp = require('gulp');
const uglify = require('gulp-uglify');

gulp.task('minify-js', function(){
    return gulp.src(['src/*.js'])
        .pipe(rename({extname: '.min.js'}))
        .pipe(uglify(/* options */))
        .pipe(gulp.dest("dist"));
});

Read file

🔗 https://nodejs.org/api/fs.html

const gulp = require('gulp');
const fs = require("fs");

gulp.task('test', function(){
    fs.readFile("src/browser-sync.md", {encoding: 'utf-8', flag: 'rs'}, function(e, data){
        if(e) return console.log(e);
        console.log(data);
    });
});

Replace

🔗 https://www.npmjs.com/package/gulp-replace

npm install --save-dev gulp-replace

const gulp = require('gulp');
const replace = require('gulp-replace');

gulp.task('replace', function(){
    // replace and overwrite
    return gulp.src(['file.txt'])
        .pipe(replace('bar', 'foo'))
        .pipe(gulp.dest(function(file){
            console.log(file.base)
            return file.base;
        }, {overwrite: true}));

    // replace and create new folder
    return src(['file.txt'])
        .pipe(replace('bar', 'foo'))
        .pipe(dest('build/'));
});

Series

🔗 https://gulpjs.com/docs/en/api/series/

gulp.task('export', gulp.series('dist', 'minify', 'clean'));

Watch

🔗 https://gulpjs.com/docs/en/api/watch/

const gulp = require('gulp');

gulp.task('serve', function(){
    // run task on file change
    gulp.watch(['filename.txt'], gulp.series('export'));
});

Zip

🔗 https://www.npmjs.com/package/gulp-zip

npm install --save-dev gulp-zip

const gulp = require('gulp');
const zip = require('gulp-zip');

gulp.task('zip', () => {
    return gulp.src(['dist/**/*.*'], {base: './'})
        .pipe(zip(`filename.zip`))
        .pipe(gulp.dest('extension'));
});