day32-gulp

gulp

• gulp是当下最流行的自动化构建工具，可以自动化完成我们开发过程中大量的重复工作
• gulp能做什么
  • 编译:
    • es6->es5
    • sass->css
    • less->css
    • coffeescript->js
  • 合并：css，js
  • 压缩：css，js，html
  • 优化：图片优化
• 准备工作
  • 安装NodeJS环境
  • 了解npm命令的使用
  • 了解NodeJS模块化
  • 了解gulp

安装与运行

1. 全局安装gulp（一台电脑只需安装一次，gulp-v查询安装是否成功）

   npm install --global gulp

说明：全局安装gulp是为了在任意目录通过命令执行gulp任务

2. 项目安装gulp（每次项目都要安装一次）：

作为项目的开发依赖（devDependencies）安装：

npm install --save-dev gulp

本地安装gulp是为了调用gulp插件的功能

3. 创建gulpfile.js文件

在项目根目录下创建一个名为gulpflie.js文件，内容如下：

   const gulp=require('gulp');
   gulp.task('default',function(){
       //在命令行运行gulp命令会执行这里的代码
   });

4. 运行gulp

   gulp <任务名称>

常用操作

es6转es5：gulp-babel

依赖@babel/core,@babel/preset-env，如需转换特殊功能，需要安装对应的babel插件

 //引入gulp模块
 const gulp=require('gulp');
 const babel=require('gulp-babel');
 const concat=require('gulp-concat');
 
 //创建一个任务，用户编译es6->es5
 gulp.task('build',()=>{
   //匹配文件，返回文档流
    return gulp.src('./src/**/*.js')
    .pipe(babel({
         presets:['@babel/preset-env'] //插件集合
    }))
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist'));
 })

工作流程

1. 先通过 gulp.src() 方法获取到想要处理的文件，并返回文件流
2. 然后文件流通过 pipe() 方法导入到 gulp 的插件中
3. 经过插件处理后的文件流再通过pipe()方法导入到 gulp.dest() 方法并把流中的内容写入到文件中

gulp API

• 创建任务：gulp.task()

• 匹配要处理文件：gulp.src(globs[,option])

  • globs匹配语法： https://github.com/isaacs/node-glob（底部PS）
  • options 有3个属性buffer、read、base

• 输出文件gulp.dest(path[,option])

• 监听文件修改，并执行相应任务

  • gulp.watch(glob[,opts],task)
  • gulp.watch(glob[,opts,cb])

gulp插件

大部分插件都可以在 http://www.npmjs.com 找到，任何插件的使用都要经历以下三步：

1. 安装插件：npm

 npm install --save gulp-htmlmin

一次性可以安装多个插件，插件之间用空格隔开

2. 引入插件require()

let htmlmin=require('gulp-htmlmin')

3. 使用插件pipe()

gulp.task('htmlmin',function(){
   return gulp.src('src/html/*.html')
              .pipe(html())
              .pipe(gulp.dest('./dist'))
})

常用的gulp插件

• html压缩：gulp-htmlmin
• css压缩：gulp-clean-css
• js压缩：gulp-uglify
• 合并文件：gulp-concat
• 文件重命名：gulp-rename
• js编译：gulp-babel
• 编译Sass：gulp-sass
• 编译Less：gulp-less

其他常用的插件

• 浏览器同步测试：browser-sync
• 创建node服务器：http-server

常用操作

• E6转ES5: gulp-babel

  依赖 @babel/core,@babel/preset-env，如需转换特殊功能，需要安装对应babel插件

      let babel = require('gulp-babel');
  
      gulp.task('es625', function(){
          return gulp.src('./src/js/*.js')
              .pipe(babel({
                  presets: ["@babel/env"],
                  plugins: []
              }))                  
              .pipe(gulp.dest('./dist/js'));
      });
  

  babel的配置也可以放在.babelrc文件中，babel会自动加载该文件中的配置

• sass转css

  依赖：node-sass

      var sass = require('gulp-sass');
      gulp.task('compileSass',()=>{
              return gulp.src('./src/sass/*.scss')
                  .pipe(sass({
                      outputStyle:'expanded'//compact（单行）,expanded（展开）,compressed（压缩）
                  }).on('error', sass.logError))
                  .pipe(gulp.dest('./src/css/'))
      });