Gulp常用插件

 gulp-htmlmin: html文件压缩

使用npm安装包并将其添加到您的开发依赖项中：

npm install gulp-htmlmin

使用

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
 
gulp.task('minify', () => {
  return gulp.src('src/*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'));
});

gulp-csso: 压缩css

使用npm安装包并将其添加到您的开发依赖项中：

npm install gulp-csso

使用

var gulp = require('gulp');
var csso = require('gulp-csso');
 
gulp.task('default', function () {
    return gulp.src('./main.css')
        .pipe(csso())
        .pipe(gulp.dest('./out'));
});
 
gulp.task('development', function () {
    return gulp.src('./main.css')
        .pipe(csso({
            restructure: false,
            sourceMap: true,
            debug: true
        }))
        .pipe(gulp.dest('./out'));
});

gulp-babel: JavaScript语法转换

使用npm安装包并将其添加到您的开发依赖项中：

# Babel 7
$ npm install gulp-babel @babel/core @babel/preset-env

# Babel 6
$ npm install gulp-babel@7 babel-core babel-preset-env

使用

const gulp = require('gulp');
const babel = require('gulp-babel');
 
gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('dist'))
);

gulp-less: less语法转换

使用npm安装包并将其添加到您的开发依赖项中：

npm install gulp-less

使用

var less = require('gulp-less');
var path = require('path');

gulp.task('less', function () {
  return gulp.src('./less/**/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./public/css'));
});

gulp-uglify: 压缩混淆JavaScript

使用npm安装包并将其添加到您的开发依赖项中：

npm install gulp-uglify

使用

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pipeline = require('readable-stream').pipeline;
 
gulp.task('compress', function () {
  return pipeline(
        gulp.src('lib/*.js'),
        uglify(),
        gulp.dest('dist')
  );
});

gulp-file-include 公共文件包含

使用npm安装包并将其添加到您的开发依赖项中：

npm install gulp-file-include

使用

const fileinclude = require('gulp-file-include');

browsersync 浏览器实时同步

总体代码示范：

// 引用gulp模板
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// 使用gulp.task建立任务
// 1. 任务的名称
// 2. 任务的回调函数
gulp.task('first', async() => {
    console.log('Hello World!');
    // 1. 使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
        .pipe(gulp.dest('dist/css'));
});

// html任务
// 1. html文件中代码的压缩操作
// 2. 抽取html文件中的公共代码
gulp.task('htmlmin', async() => {
    gulp.src('./src/*.html')
        .pipe(fileinclude())
        // 压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist/css'));
})

// css任务
// 1. less语法转换
// 2. css代码压缩
gulp.task('cssmin', async() => {
    // 选择css目录下的所有less文件以及css文件
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        // 将less语法转换为css语法
        .pipe(less())
        // 将css代码进行压缩
        .pipe(csso())
        // 将处理的结果进行输出
        .pipe(gulp.dest('dist/css'))
})

// js任务
// 1. es6代码压缩
// 2.代码压缩
gulp.task('jsmin', async() => {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            // 它可以判断当前代码的运行环境 将代码转为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
})

//复制文件夹
gulp.task('copy', async() => {
    gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images'));
    gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'));
})

//构建任务
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);