http://www.itdecent.cn/p/cc1cb9a5650c

目前推薦在package.json配置Browserslist, 在vue官方腳手架中，browserslist字段會(huì)被 [@babel/preset-env]和 [Autoprefixer]用來(lái)確定需要轉(zhuǎn)譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴

• 安裝gulp

-D(等于--save-dev)
cnpm install gulp-cli -g
cnpm install gulp --save-dev

• 安裝插件

cnpm i gulp-load-plugins -D 懶加載gulp-系列插件
cnpm i browser-sync -D 熱刷新頁(yè)面
cnpm i gulp-rename -D 文件重命名
cnpm i del -D 文件操作
cnpm install gulp-babel @babel/core @babel/preset-env -D 語(yǔ)法轉(zhuǎn)化
cnpm i gulp-concat -D js/css合并
cnpm i gulp-uglify -D js壓縮
cnpm i gulp-sass -D sass語(yǔ)法轉(zhuǎn)換,壓縮
cnpm i gulp-autoprefixer -D 自動(dòng)添加廠(chǎng)商前綴
cnpm install --save-dev gulp-browserify

• gulp 常用命令

gulp --tasks 查看任務(wù)列表
gulp task_name 執(zhí)行指定任務(wù)
gulp 自動(dòng)執(zhí)行默認(rèn)任務(wù)

• gulpfile.js

const {src,dest,series,watch} = require('gulp')

//可以用plugins.xx() , 省略require步驟的都是,glup- 開(kāi)頭的插件
const plugins = require('gulp-load-plugins')()
const $ = plugins
const fs = require('fs')
const del = require('del')
const browserSync = require('browser-sync')

// es6語(yǔ)法轉(zhuǎn)換es5,壓縮合并重命名xx.min.js
function script(cb){
    src('src/js/*.js')
        .pipe(plugins.babel({
            presets: ['@babel/env']
        }))
        .pipe(plugins.concat('build.js'))
        .pipe(plugins.rename({
            suffix: '.min'
        }))
        .pipe(plugins.uglify())
        .pipe(dest('dist/js'))
        .pipe(browserSync.reload({stream:true}))
    fs.access('gulpfile.js', cb)
}

//清除構(gòu)建的文件
function clean(cb){
    del('dist/css')
    del('dist/js')
    fs.access('gulpfile.js', cb)
}
//scss文件編譯,壓縮,自動(dòng)添加廠(chǎng)商前綴, 記得設(shè)置package.json里的browserslist
function css(cb){
    src('src/scss/*.scss')
        .pipe(plugins.sass({outputStyle: 'compressed'}).on('error', plugins.sass.logError))
        .pipe($.autoprefixer({
            cascade: false,//對(duì)自動(dòng)添加的廠(chǎng)商前綴,是否設(shè)置視覺(jué)效果更好的縮進(jìn) 
            remove: false//刪除過(guò)時(shí)的前綴
        }))
        .pipe(dest('dist/css'))
        .pipe(browserSync.reload({stream:true}))
    fs.access('gulpfile.js',cb)
}
//監(jiān)聽(tīng)文件變化
function watcher(cb){
    watch('src/js/*.js',script)
    watch('src/scss/*.scss',css)
    fs.access('gulpfile.js',cb)  
}
//熱更新
function serve(cb){
  browserSync.init({
    server: {
      baseDir: 'dist'
    }
  })
  cb()
}
exports.script = script
exports.clean = clean
exports.css = css
exports.watcher = watcher
exports.default=series([
  clean,
  script,
  css,
  serve,
  watcher
])

• 舊版task函數(shù)方式

const gulp = require('gulp')
const {src,dest,task,series} = require('gulp')
const concat = require('gulp-concat')
const uglify = require('gulp-uglify')
const rename = require('gulp-rename')
const less = require('gulp-less')
const cleanCss = require('gulp-clean-css')
const autoprefixer = require('gulp-autoprefixer')

task('js',function(){
  return src('src/js/*.js')
          .pipe(concat('build.js'))
          .pipe(uglify())
          .pipe(rename({suffix:'.min'}))
          .pipe(dest('dist/js'))
})
task('less',function(){
  return src('src/less/*.less')
          .pipe(less())
          .pipe(dest('src/css'))
})
task('css',function(){
  return src('src/css/*.css')
          .pipe(concat('build.css'))
          .pipe(rename({suffix:'.min'}))
          .pipe(autoprefixer({
              cascade: false,//對(duì)自動(dòng)添加的廠(chǎng)商前綴,是否設(shè)置視覺(jué)效果更好的縮進(jìn) 
              remove: false//刪除過(guò)時(shí)的前綴
          }))
          .pipe(cleanCss())//壓縮css文件 兼容ie8
          .pipe(dest('dist/css'))
})