gulp-

gulp  :项目自动化构建打包工具(将我们本地的项目打包成放在外网的项目)
    gulp项目目录结构
       -gulp_demp(项目名)
          -src 
            -css
            -js
            -pages    //html
            -sass
          package.json   //npm init -y   项目初始化(-y为默认)
          package-lock.json   

gulp环境安装
     npm install gulp -g
     验证   gulp --version
     在当前项目文件夹中执行 npm install gulp (本地安装)
     创建gulpfile.js文件 写gulp方法

gulp方法:
      //引入gulp
const gulp = require('gulp')
//引入cssmin   要先执行命令npm i gulp-cssmin
const cssmin = require('gulp-cssmin')
//打包css任务  执行任务为命令gulp css
//gulp.task('任务名',回调函数)   创建任务
//src()  创建一个流,从文件对象读取
//dest()  创建一个用于数据对象写入到文件系统的流(自定义的一个文件夹(这里用的dist文件夹))
//.pipe   管道,从哪里到哪里
gulp.task('css', function () {
    return gulp.src('./src/css/**')
        .pipe(cssmin())  //压缩css
        .pipe(gulp.dest('./dist/css'))
})
//执行任务gulp 任务名

//引入js(uglify)   要先执行命令npm i gulp-uglify
const uglify = require('gulp-uglify')
//引入babel
const babel = require('gulp-babel')
//es6转es5要执行三个依赖包命令命令
//npm i gulp-babel@7.0.1
//npm i babel-core
//npm i babel-preset-es2015
//打包js任务  执行任务为命令gulp js 
gulp.task('js', function () {
    return gulp.src('./src/js/**')
         .pipe(babel({
             presets:['es2015']
         }))
        .pipe(uglify())  //压缩js
        .pipe(gulp.dest('./dist/js'))
})

//引入htmlmin   要先执行命令npm i gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
gulp.task('html', function () {
    return gulp.src('./src/pages/**')
        .pipe(htmlmin({
            removeEmptyAttributes:true,//移除所有空属性
            collapseWhitespace:true
        }))  //压缩html
        .pipe(gulp.dest('./dist/pages'))
})
//打包html任务  执行任务为命令gulp html 

//lib(依赖包)和static(图片文件)只需复制不用压缩
gulp.task('static', function () {
    return gulp.src('./src/static/**').pipe(gulp.dest('./dist/static/'))
})
  //复制任务
gulp.task('lib', function () {
    return gulp.src('./src/lib/**').pipe(gulp.dest('./dist/lib/'))
})
//同时异步执行任务
gulp.task('parallel', gulp.parallel('css', 'js','html','lib','static'))
// gulp.task('series', gulp.series('css', 'js'))
//同时同步执行任务
//  gulp.watch('./src/css/**',gulp.parallel('css','js'))
//监听任务 并在发生更改时执行  **代表文件夹下面全部