glup

https://www.jianshu.com/p/cc1cb9a5650c

目前推荐在package.json配置Browserslist, 在vue官方脚手架中，browserslist字段会被 [@babel/preset-env]和 [Autoprefixer]用来确定需要转译的 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 热刷新页面
cnpm i gulp-rename -D 文件重命名
cnpm i del -D 文件操作
cnpm install gulp-babel @babel/core @babel/preset-env -D 语法转化
cnpm i gulp-concat -D js/css合并
cnpm i gulp-uglify -D js压缩
cnpm i gulp-sass -D sass语法转换,压缩
cnpm i gulp-autoprefixer -D 自动添加厂商前缀
cnpm install --save-dev gulp-browserify

• gulp 常用命令

gulp --tasks 查看任务列表
gulp task_name 执行指定任务
gulp 自动执行默认任务

• gulpfile.js

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

//可以用plugins.xx() , 省略require步骤的都是,glup- 开头的插件
const plugins = require('gulp-load-plugins')()
const $ = plugins
const fs = require('fs')
const del = require('del')
const browserSync = require('browser-sync')

// es6语法转换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)
}

//清除构建的文件
function clean(cb){
    del('dist/css')
    del('dist/js')
    fs.access('gulpfile.js', cb)
}
//scss文件编译,压缩,自动添加厂商前缀, 记得设置package.json里的browserslist
function css(cb){
    src('src/scss/*.scss')
        .pipe(plugins.sass({outputStyle: 'compressed'}).on('error', plugins.sass.logError))
        .pipe($.autoprefixer({
            cascade: false,//对自动添加的厂商前缀,是否设置视觉效果更好的缩进 
            remove: false//删除过时的前缀
        }))
        .pipe(dest('dist/css'))
        .pipe(browserSync.reload({stream:true}))
    fs.access('gulpfile.js',cb)
}
//监听文件变化
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函数方式

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,//对自动添加的厂商前缀,是否设置视觉效果更好的缩进 
              remove: false//删除过时的前缀
          }))
          .pipe(cleanCss())//压缩css文件 兼容ie8
          .pipe(dest('dist/css'))
})