gulp4.x 常用任务

1、目录结构：

需要安装的依赖包：
(1) 首先根据官网安装 gulp gulp官网： https://gulpjs.com/docs/en/getting-started/quick-start （英文）
(2) 安装gulp-sass: npm install gulp-sass --save-dev
(3) 安装js压缩插件： npm install gulp-uglify --save-dev
(4) 安装文件合并插件： npm install gulp-concat --save-dev
(5) 安装html压缩插件： npm install gulp-htmlmin --save-dev
(6) 安装搭建本地服务器插件： npm install gulp-connect --save-dev

2、gulpfile.js文件夹放的是gulp任务

（1） css.js（处理scss文件）

const { src, dest } = require('gulp');
const sass = require('gulp-sass');
function css() {
  return src('./src/static/scss/*.scss', { sourcemaps: true })
         .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
         .pipe(dest('./test/css', { sourcemaps: true }))
}
exports.css = css;

（2）script.js

const { src, dest } = require('gulp');
const concat = require('gulp-concat');
var uglify = require('gulp-uglify');

function script() {
  return src('./src/static/script/utils/*.js', { sourcemaps: true })
         .pipe(concat('lib.min.js')) // 将utils文件夹下的js文件合并到成一个文件lib.min.js
         .pipe(src('./src/static/script/*.js', { sourcemaps: true }))
         .pipe(uglify()) // 压缩js文件
         .pipe(dest('./src/js', { sourcemaps: true }))
}
exports.script = script;

（3）copy.js (用于生成dist)

const { src, dest, parallel } = require('gulp');
var htmlmin = require('gulp-htmlmin');
function copyCSS() {
  return src('./src/css/*.css')
         .pipe(dest('./dist/css'))
}
function copyJs() {
  return src('./src/js/*.js')
         .pipe(dest('./dist/js'))
}

    function copyHtml() {
      return src('./src/*.html')
             .pipe(htmlmin({
                removeComments: true,//清除HTML注释
                minifyJS: true,//压缩页面JS
                minifyCSS: true //压缩页面CSS
              }))
             .pipe(dest('./dist/'))
    }
    exports.copy = parallel(copyCSS, copyJs, copyHtml);

（4）index.js(gulp执行的入口文件)

const { series, parallel, watch } = require('gulp');
const { css } = require('./css.js'); 
const { script } = require('./script.js');
const { copy } = require('./copy.js');
var connect = require('gulp-connect');

function autoWatch() {
  watch('./src/static/scss/*.scss', css);
  watch('./src/static/script/*.js', script);
 watch(watchPath, series(watchCallback))
}
var watchPath = ['./src/*.html','./src/css/*.css','./src/js/*.js'];
function watchCallback(){
  return src(watchPath)
      .pipe(connect.reload());
}
function server(cb) { // 本地服务器
  connect.server({
    port: 6001,
    root: 'src',
    livereload: true
  });
  cb();
}

exports.autoWatch = series( server, autoWatch);
exports.build = copy; 

// 执行gulp build 就可以生成一个dist文件夹，里面有css,js,html文件

// gulp autoWatch 启动本地服务器，然后启动监听任务