gulp 使用教程及步骤

---

快速入门

• gulp 是与 webpack 功能类似的前端项目构建工具，也是基于 Nodejs 的自动任务运行器
• 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务
• gulp 更高效（异步多任务），更易于使用，插件高质量

全局安装 gulp

npm install gulp -g

局部安装 gulp

npm install gulp --save-dev

配置文件：gulpfile.js

// 引入 gulp 模块
const gulp = require('gulp');

// 定义默认任务
gulp.task('default',function(){
    console.log('lllllllll');
})

执行命令

gulp

解决警告

！！！注意：会出现一个警告

警告： Did you forget to signal async completion? 解决办法

1. 任务的回调函数中传递一个 done 参数，当任务全部处理完毕时，调用 done
   
   2、将任务的回调函数用 async 声明，所有任务语句用 await
   

js 语法检查——使用 gulp-jshint

安装插件

npm install jshint gulp-jshint --save-dev

配置 gulpfile.js 文件

const jshint = require('gulp-jshint');
const gulp   = require('gulp'); 
gulp.task('lint', function() {  
    return gulp.src('./src/js/*.js')    
        .pipe(jshint())    
        .pipe(jshint.reporter('YOUR_REPORTER_HERE'));
});

运行命令

gulp jshint

语法转换——使用 gulp-babel

安装插件

npm install --save-dev gulp-babel @babel/core @babel/preset-env

配置 gulpfile.js 文件

const gulp = require('gulp');
const babel = require('gulp-babel'); 
gulp.task('babel', () =>    
    gulp.src('src/js/*.js')        .
    pipe(babel({     // 进行语法转换       
        presets: ['@babel/env']        
    }))        
    .pipe(gulp.dest('build/js'))  // 输出到指定目录
);

运行命令

gulp babel

压缩 js ——使用 gulp-uglify

安装插件

npm install --save-dev gulp-uglify

配置 gulpfile.js 文件

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
  
gulp.task('uglify', function () {  
    return gulp.src('build/js/built.js')       
        .pipe(uglify())   
        .pipe(rename('dist.min.js'))     
        .pipe(gulp.dest('dist/js'))
});



// 配置默认任务
gulp.task('default',gulp.series('jshint','babel','browserify','uglify'))

运行命令

gulp

处理 less + 扩展前缀

安装插件

npm install gulp-less

// 用于扩展前缀
npm install less-plugin-autoprefix

配置 gulpfile.js 文件

const less = require('gulp-less');
const path = require('path');
const LessAutoprefix = require('less-plugin-autoprefix');
const autoprefix = new LessAutoprefix({ browsers: ['last 2 versions']});

gulp.task('less', function () {
  return gulp.src('./src/less/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ],
      plugins: [autoprefix] // 自动扩展前缀
    }))
    .pipe(gulp.dest('./build/css'));
});

合并压缩文件

安装合并插件

// 合并文件
npm install --save-dev gulp-concat

配置 gulpfile.js 文件

// 合并js
const concat = require('gulp-concat');
 
gulp.task('concatJs', function() {
  return gulp.src('./build/js/*.js')
    .pipe(concat('built.js'))
    .pipe(gulp.dest('./dist/js'));
});
// 合并CSS
 
gulp.task('concatCss', function() {
  return gulp.src('./build/css/*.css')
    .pipe(concat('built.css'))
    .pipe(gulp.dest('./dist/css'));
});

安装压缩插件

// 压缩css文件
npm install --save-dev gulp-cssmin

配置 gulpfile.js 文件

// 压缩 css
const cssmin = require('gulp-cssmin');
 
gulp.task('cssmin', function () {
    return gulp.src('dist/css/*.css')
        .pipe(cssmin())
        .pipe(rename('dist.min.css'))
        .pipe(gulp.dest('dist/css'));
});

压缩 html 文件

安装插件

npm install --save gulp-htmlmin

配置 gulpfile.js 文件

// 压缩 html
const htmlmin = require('gulp-htmlmin');
 
gulp.task('htmlmin', () => {
  return gulp.src('src/index.html')
    .pipe(htmlmin({ 
        collapseWhitespace: true, //去除空格
        removeComments:true, // 去除注释
     }))
    .pipe(gulp.dest('dist'));
});

优化图片—— gulp-imagemin

安装插件

 npm install --save-dev gulp-imagemin

配置 gulpfile.js 文件

// 压缩图片
const imagemin = require('gulp-imagemin');

gulp.task('imagemin',function(){
    return gulp.src('./src/img/*.{png,jpg,gif,ico}')
    .pipe(imagemin({
        optimizationLevel:3, // 默认3 取值范围：0-7 （优化等级）
        progressive:true, // 默认 false 无损压缩jpg
        interlaced:true,  // 默认 false 隔行扫描gif进行渲染
        multipass:true, // 默认 false 多次优化 svg 知道完全优化
    }))
    .pipe(gulp.dest('dist/img'))
})

全自动化开发

安装插件

npm install gulp-livereload gulp-connect opn --save-dev

配置 gulpfile.js 文件

const liverload = require('gulp-livereload');
const connect = require('gulp-connect');
const opn = require('opn');

// 注意: 在所有可能要执行任务后面加上  .pipe(livereload())

// 自动执行任务，编译代码
gulp.task('watch',function(){
    livereload.listen();
    // 通过自己服务器打开项目，自动刷新
    connect.server({
        root:'dist,
        port:3000,
        livereload:true,   // 自动刷新                            
    });
    // 自动打开浏览器
    opn('http://localhost:3000/index.html');
    // 监视指定文件（第一个参数），一旦文件发生变化，就自动执行后面的任务（第二个参数）
    gulp.watch('src/less/*.less',gulp.series(['less','concat','cssmin']));
    gulp.watch('./src/js/*.js',gulp.series(['jshint','babel','browserify','uglify']));
    gulp.watch('./src/index.html',gulp.series('htmlmin'));
})