gulp

生成package.json文件

win+r--‘cmd’ 进入项目目录

npm init

gulp 全局安装

npm install --global gulp

安装gulp开发依赖

npm install --save-dev gulp

创建gulpfile.js文件

let gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

常用API

gulp.src(filePath/pathArr) ：指向指定路径的所有文件,找到目标源文件，将数据读取到gulp的内存中；

gulp.dest(dirPath/pathArr) ：指向指定的所有文件夹，将文件输出到指定的文件夹中；

gulp.task(name, [deps], fn) ：定义一个任务，deps：数组，如果该任务需要等待其他一个（多个）任务完成后执行，则将被等待的任务name写入deps；

gulp.watch() ：监视文件的变化；

gulp.series() ：用于串行（顺序）执行：存放task的name，按照顺序执行；

gulp.parallel() ：用于并行执行：存放task的name，并行执行；

常用插件

gulp-connect：页面自动更新

gulp-postcss: css解析器，将less文件解析成css

postcss-px-to-viewport: 移动端单位转换 px -> vw,vh：推荐

gulp-px2rem-plugin: 移动端单位转换 px -> rem; 需要配置js来动态设置 html 的 font-size 值，不推荐

autoprefixer: 自动补全css前缀

gulp-clean-css: 压缩css文件，减小文件大小，并给引用url添加版本号避免缓存

gulp-less: less预编译

gulp-imagemin: 图片压缩

gulp-asset-rev: 自动添加版本号

gulp-concat: 合并javascript文件，减少网络请求

插件的配置

gulp-connect：自动更新

安装

npm install gulp-connect --save-dev

配置

参数：

host：地址：设为默认地址：0.0.0.0，PC端打开方式：http://localhost:3200/，移动端打开方式(同一局域网)：本地ip地址:3200

port： 端口号

root： 入口目录

livereload： 是否实时更新：默认false

页面自动刷新：除了配置livereload为true外，需要在需要刷新的任务后面添加.pipe(connect.reload());

const gulp = require('gulp')
const connect = require('gulp-connect')

gulp.task('connect',function(){
  connect.server({
    host: 0.0.0.0,
    port: 3200, // 端口
    root: 'dist',
    livereload: true // 是否自动更新
  })
})

less文件转css，自动补全css前缀，px转rem：gulp-less，gulp-postcss，autoprefixer，postcss-px-to-viewport

安装

npm install gulp-less --save-dev

npm install gulp-postcss --save-dev

npm install autoprefixer --save-dev

npm install postcss-px-to-viewport --save-dev

配置

const gulp = require('gulp')
const postcss = require('gulp-postcss')
const px2viewport = require('postcss-px-to-viewport')
const autoprefixer = require('autoprefixer')
const less = require('gulp-less')

gulp.task('less', function () {
  var processors = [
    px2viewport({
      viewportWidth: 750, // 设计稿宽度
      viewportUnit: 'vw', // 转换后单位
      minPixelValue: 2 // 设置要替换的最小像素值
    }),
    autoprefixer({ // 自动补全
      browsers: [
        "iOS >= 8",
        "Firefox >= 20",
        "Android > 4.4"
      ]
    })
  ]
  return gulp.src('src/sass/*.scss')
  .pipe(less())
  .pipe(postcss(processors))
  .pipe(gulp.dest('dist/css'))
})

gulp-clean-css：css压缩

安装

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

配置

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

gulp.task('testCssmin', function () {
    gulp.src('src/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'));
});

gulp-imagemin：图片压缩

安装

npm install gulp-imagemin --save-dev

配置

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
 
gulp.task('imagemin', function() {
  gulp.src('src/images/*')
        .pipe(imagemin({
          optimizationLevel: 2,
          progressive: true
        }))
        .pipe(gulp.dest('dist/images'))
});

图片压缩参数

optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）

progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片

interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染

multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化

gulp-asset-rev：自动添加版本号

安装

npm install gulp-asset-rev --save-dev

配置

const gulp = require('gulp');
const assetRev = require('gulp-asset-rev');
 
gulp.task('assetRev',function() {
    gulp.src("src/*.html")
        .pipe(assetRev())
        .pipe(gulp.dest('dist'));
});

注意：版本号修改位置

// 打开node_modules/gulp-asset-rev/index.js
// 打开78行执行以下修改，注释为源代码
// var verStr = (options.verConnecter || "-") + md5;
var verStr = (options.verConnecter || "") + md5;

// 打开80行执行以下修改，注释为源代码
// src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");
src = src + '?v=' + verStr;

运行gulp

gulp