GULP

  • gulp 是一个项目开发的 自动化打包构建工具
  • 基于 node 环境来运行的

什么是自动化打包构建工具

  • 比如
    • 我们在开发的过程中，会写到 js 文件，css 文件，等等
    • 我们的项目如果想上线，那么一定要体积小一点，文件大小越小越好
    • 而我们在写 js 文件的时候，会有很多 换行/空格 之类的东西
    • 这些 换行/空格 都是占文件体积的一部分
    • 那么我们在上线之前就要吧这些 换行/空格 尽可能的删除掉
    • 我们又不能一个文件一个文件的去删除
    • 就要用到一个自动化工具来帮助我们把这些多余的东西干掉
  • 这个就是自动化工具的意义
  • 常见的自动化打包构建工具
    • gulp
    • webpack

安装 GULP

  • gulp 是一个依赖于 node 的环境工具
  • 所以我们需要先安装一个 全局 **gulp** 依赖

  • 直接使用 npm 去安装就可以了

    1. # 使用 npm 安装全局依赖 gulp
    2. # 我们这里安装一个 3.9.1 版本的就好了
    3. $ npm install --global gulp@3.9.1

  • 等待安装完毕就好了

  • 这个全局环境一个电脑安装一次就好了
  • 还是照例检查一下是否安装成功
    1. $ gulp --version

使用 GULP

  • 安装完毕以后，我们就可以使用 GULP 对我们的项目进行自动化构建了
  • 首先我们要有一个项目 ```

  • gulp_demo 项目文件夹

    • src 项目源码
      • css css 文件夹
      • js js 文件夹
      • pages html 文件夹
      • sass sass 文件夹
      • lib 第三方文件夹
      • static 静态资源文件夹 ```

  • 目录结构不一定都是这个样子

  • 但是最好是一个便于管理的文件夹目录结构
  • 因为是一个项目了，最好使用 npm 来帮我们管理一下
    • 这样可以记录我们的下载使用了那些依赖

  • 所以在项目文件夹 gulp-demo 里面执行一个 **npm** 初始化

    1. $ cd gulp_demo
    2. $ npm init -y

  • 执行完毕之后，再来看一下我们的项目目录 ```

  • gulp_demo
    • src
    • package.json ```

项目 GULP 配置

  • 我们之前已经安装过 gulp 全局依赖了
  • 但是每一个项目都要在安装一次 gulp 的项目依赖
  • 因为每一个项目的打包构建规则都不一样，所以不能全都配置成一个

  • 所以我们要在项目里面再次进行 gulp 安装

    1. $ cd gulp_demo
    2. $ npm install -D gulp@3.9.1
    • 项目中的 gulp 依赖要和全局 gulp 环境保持版本一致
  • 接下来就是对这个项目进行打包构建的配置
  • gulp 的使用，要在项目目录下新建一个 gulpfile.js
  • 在这个 gulpfile.js 文件里面进行配置
  • 然后使用 gulp 进行构建的时候就会按照 gulpfile.js 文件里面的规则进行打包构建
  • 再来看一下我们的目录结构 ```

  • gulp_demo

    • node_modules 依赖包目录
    • src 项目源码
    • gulpfile.js gulp 配置文件
    • package-lock.json 依赖下载版本 json 文件
    • package.json 项目管理 json 文件 ```

  • 接下来我们就是在 gulpfile.js 文件里面进行配置，让我们的打包构建可以生效

打包 CSS 文件

  • 我们从简单的内容开始，先来打包构建 css 文件
  • 其实就是在 gulpfile.js 里面进行一些配置
  • 第一个事情就是引入 gulp ```javascript // 我是 gulpfile.js 文件

// 1. 引入 gulp const gulp = require(‘gulp’)

  2. - `gulp` 是基于任务来完成构建的
  3. - 所以我们要创建一个打包 `css` 的任务
  4. ```javascript
  5. // 我是 gulpfile.js 文件
  7. // 1. 引入 gulp
  8. const gulp = require('gulp')
  11. // 2. 创建一个 css 的任务
  12. //   gulp.task() 是用来创建任务的
  13. //   参数一： 任务名称
  14. //   参数二： 一个函数（这个任务要做什么事情）
  15. gulp.task('css', function () {
  17. })
  • 有了任务以后，我们就要在 css 这个任务里面写一些这个任务要做的事情了
  • 我们要把 ./src/css/所有css文件 都进行压缩处理
  • 这个时候我们自己完成不了，就需要借助一个第三方依赖
    • npm i -D gulp-cssmin
  • 下载完毕以后，去文件中进行配置 ```javascript // 我是 gulpfile.js 文件

// 1. 引入 gulp const gulp = require(‘gulp’)

// 2. 引入 gulp-cssmin const cssmin = require(‘gulp-cssmin’)

// 2. 创建一个 css 的任务 gulp.task(‘css’, function () { return gulp .src(‘./src/css/**’) // 对哪些文件进行操作 .pipe(cssmin()) // 都做什么，这里做的就是进行 css 压缩 .pipe(gulp.dest(‘./dist/css’)) // 把压缩完毕的文件放在 dist 文件夹下的 css 文件夹
})

  2.    - `gulp.src()` 是指找到那些文件对其操作
  3.    - `gulp.pipe()` 是指要做什么
  4.    - `gulp.dest()` 是指输出到哪个目录下，如果没有这个目录存在会自动创建这个目录
  5.    - 所以上面哪个 `css` 任务的意思就是
  6.       - 把 `./src/css/` 目录下的所有文件
  7.       - 进行压缩
  8.       - 压缩完毕后放在 `./dist/` 下的 `css/` 文件夹下
  9. - 接下来，就是执行一下这个叫做 `css` 的任务就行了
  10. - 直接在控制台使用指令
  11. ```shell
  12. # 表示运行 gulpfils.js 配置文件中的 css 任务
  13. $ gulp css
  • 执行完毕以后，就会在 gulp_demo 目录下生成一个 dist/ 文件夹
  • 里面就有我们压缩好的 css 文件

自动添加前缀

  • 我们希望在 css 压缩之前，能帮我自动把需要前缀的属性 自动把前缀添加上 就好了
  • 这个是可以做到的
  • 我们又需要一个依赖了
    • npm i -D gulp-autoprefixer
  • 安装完还是去到文件中进行配置 ```javascript // 我是 gulpfile.js 文件

// 1. 引入 gulp const gulp = require(‘gulp’)

// 2. 引入 gulp-cssmin const cssmin = require(‘gulp-cssmin’)

// 2-1. 引入 gulp-autoprefixer const autoPrefixer = require(‘gulp-autoprefixer’)

// 2. 创建一个 css 的任务 gulp.task(‘css’, function () { return gulp .src(‘./src/css/**’)
.pipe(autoPrefixer({ browsers: [‘last 2 versions’] })) .pipe(cssmin())
.pipe(gulp.dest(‘./dist/css’))
})

  2.    - 因为添加前缀需要在压缩之前添加
  3.    - 所以我们就直接在任务里面多做一个事情就行了
  5. <a name="d960f3e8"></a>
  6. ### 打包 SASS 文件
  8. - 接下来我们解决一下 `sass` 的问题
  9. - 因为有的时候我们开发要使用 `sass` 所以我们要解决一下 `sass` 的问题
  10. - 其实打包 `sass` 和 `css` 差不多，只不过先要把 `sass` 解析成 `css`
  11.    1. 把 `sass` 解析成 `css`
  12.    1. 自动添加前缀
  13.    1. 压缩一下
  14.    1. 放到对应的文件夹中
  15. - 使用 `gulp` 解析 `sass` 文件需要用到一个依赖
  16.    - `npm i -D gulp-sass`
  17. - 然后我们就去到配置文件里面进行配置就好了
  18. ```javascript
  19. // 我是 gulpfile.js 文件
  21. // 1. 引入 gulp
  22. const gulp = require('gulp')
  24. // 2. 引入 gulp-cssmin
  25. const cssmin = require('gulp-cssmin')
  27. // 2-1. 引入 gulp-autoprefixer 
  28. const autoPrefixer = require('gulp-autoprefixer')
  30. // 2-2. 引入 gulp-sass
  31. const sass = require('gulp-sass')
  34. // 2-1. 创建一个 css 的任务
  35. gulp.task('css', function () {
  36.     return gulp
  37.         .src('./src/css/**')   
  38.         .pipe(autoPrefixer({
  39.             browsers: ['last 2 versions']
  40.         }))
  41.         .pipe(cssmin())       
  42.         .pipe(gulp.dest('./dist/css'))  
  43. })
  45. // 2-2. 创建一个 sass 任务
  46. gulp.task('sass', function () {
  47.     return gulp
  48.         .src('./src/sass/**')
  49.         .pipe(sass())
  50.         .pipe(autoPrefixer())
  51.         .pipe(cssmin())
  52.         .pipe(gulp.dest('./dist/css'))
  53. })
  • 我们的 sass 文件编译完以后也是 css 文件，所以就也放在 css 文件夹下就好了
  • 就是要注意一下别和本来 css 文件夹下的文件重名就好了
    • 然后就可以去命令行执行 sass 这个任务了
      1. # 执行 sass 任务
      2. $ gulp sass

打包 JS 文件

  • 接下来就是打包一下 js 文件了
  • 其实套路是一样的
  • 先来做最简单的操作
  • 压缩一下 js 文件
  • 需要用到一个依赖
    • npm i -D gulp-uglify
  • 然后依旧是去到配置文件中进行配置 ```javascript // 我是 gulpfile.js 文件

// 1. 引入 gulp const gulp = require(‘gulp’)

// 2-1. 引入 gulp-cssmin const cssmin = require(‘gulp-cssmin’)

// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require(‘gulp-autoprefixer’)

// 2-3. 引入 gulp-sass const sass = require(‘gulp-sass’)

// 3-1. 引入 gulp-uglify const uglify = require(‘gulp-urlify’)

// 2-1. 创建一个 css 的任务 gulp.task(‘css’, function () { return gulp .src(‘./src/css/**’)
.pipe(autoPrefixer({ browsers: [‘last 2 versions’] })) .pipe(cssmin())
.pipe(gulp.dest(‘./dist/css’))
})

// 2-2. 创建一个 sass 任务 gulp.task(‘sass’, function () { return gulp .src(‘./src/sass/**’) .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest(‘./dist/css’)) })

// 3. 创建一个 js 任务 gulp.task(‘js’, function () { return gulp .src(‘./src/js/**’) .pipe(uglify()) .pipe(gulp.dest(‘./dist/js’)) })

  2. - 然后我们去命令行执行 `js` 这个任务
  3. ```shell
  4. # 执行 js 任务
  5. $ gulp js

编译 ES6 语法

  • 之前我们学习 es6 的时候就说过
  • 很多浏览器不是很认识 es6 的语法
  • 我们要把他编译成 es5 的语法
  • 所以我们在打包 js 文件的时候，就要转换一下
  • 我们依旧是使用依赖来完成，只不过 es6 转 es5 需要三个依赖
    • npm i -D gulp-babel@7.0.1
    • npm i -D babel-core
    • npm i -D babel-preset-es2015
  • 然后我们就去配置文件里面进行配置就可以了 ```javascript // 我是 gulpfile.js 文件

// 1. 引入 gulp const gulp = require(‘gulp’)

// 2-1. 引入 gulp-cssmin const cssmin = require(‘gulp-cssmin’)

// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require(‘gulp-autoprefixer’)

// 2-3. 引入 gulp-sass const sass = require(‘gulp-sass’)

// 3-1. 引入 gulp-uglify const uglify = require(‘gulp-urlify’)

// 3-2. 引入 gulp-babel // es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了 const babel = require(‘gulp-babel’)

// 2-1. 创建一个 css 的任务 gulp.task(‘css’, function () { return gulp .src(‘./src/css/**’)
.pipe(autoPrefixer({ browsers: [‘last 2 versions’] })) .pipe(cssmin())
.pipe(gulp.dest(‘./dist/css’))
})

// 2-2. 创建一个 sass 任务 gulp.task(‘sass’, function () { return gulp .src(‘./src/sass/**’) .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest(‘./dist/css’)) })

// 3. 创建一个 js 任务 gulp.task(‘js’, function () { return gulp .src(‘./src/js/**’) .pipe(babel({ presets: [‘es2015’] })) .pipe(uglify()) .pipe(gulp.dest(‘./dist/js’)) })

  2.    - 引入以后，只要在压缩之前执行一下转码就可以了
  3.    - 注意要传递一个参数
  4. - 然后再次执行 `js` 任务就可以了
  5. ```shell
  6. # 执行 js 任务
  7. $ gulp js

打包 HTML 文件

  • 接下来就要把 html 文件解决一下了
  • 还是一个套路
  • 压缩 html 文件需要一个依赖
    • npm i -D gulp-htmlmin
  • 下载好以后去到配置文件中进行配置 ```javascript // 我是 gulpfile.js 文件

// 1. 引入 gulp const gulp = require(‘gulp’)

// 2-1. 引入 gulp-cssmin const cssmin = require(‘gulp-cssmin’)

// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require(‘gulp-autoprefixer’)

// 2-3. 引入 gulp-sass const sass = require(‘gulp-sass’)

// 3-1. 引入 gulp-uglify const uglify = require(‘gulp-urlify’)

// 3-2. 引入 gulp-babel // es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了 const babel = require(‘gulp-babel’)

// 4. 引入 gulp-htmlmin const htmlmin = require(‘gulp-htmlmin’)

// 2-1. 创建一个 css 的任务 gulp.task(‘css’, function () { return gulp .src(‘./src/css/**’)
.pipe(autoPrefixer({ browsers: [‘last 2 versions’] })) .pipe(cssmin())
.pipe(gulp.dest(‘./dist/css’))
})

// 2-2. 创建一个 sass 任务 gulp.task(‘sass’, function () { return gulp .src(‘./src/sass/**’) .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest(‘./dist/css’)) })

// 3. 创建一个 js 任务 gulp.task(‘js’, function () { return gulp .src(‘./src/js/**’) .pipe(babel({ presets: [‘es2015’] })) .pipe(uglify()) .pipe(gulp.dest(‘./dist/js’)) })

// 4. 创建一个 html 任务 gulp.task(‘html’, function () { return gulp .src(‘./src/pages/**’) .pipe(htmlmin({ removeEmptyAttibutes: true, // 移出所有空属性 collapseWhitespace: true // 压缩 html })) .pipe(gulp.dest(‘./dist/pages’)) })

  2.    - 这样就配置完毕了
  3. - 接下来就是去命令行运行一下 `html` 任务
  4. ```shell
  5. # 运行 html 任务
  6. $ gulp html

处理 LIB 和 STATIC 文件

  • 接下来我们就是处理 lib 和 static 里面的文件了
  • 因为这些都是第三方的文件和一些图片之类的信息
  • 不需要压缩处理，只要给我转到 dist 文件夹下就可以了
  • 所以不需要依赖，直接处理就行 ```javascript // 我是 gulpfile.js 文件

// 1. 引入 gulp const gulp = require(‘gulp’)

// 2-1. 引入 gulp-cssmin const cssmin = require(‘gulp-cssmin’)

// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require(‘gulp-autoprefixer’)

// 2-3. 引入 gulp-sass const sass = require(‘gulp-sass’)

// 3-1. 引入 gulp-uglify const uglify = require(‘gulp-urlify’)

// 3-2. 引入 gulp-babel // es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了 const babel = require(‘gulp-babel’)

// 4. 引入 gulp-htmlmin const htmlmin = require(‘gulp-htmlmin’)

// 2-1. 创建一个 css 的任务 gulp.task(‘css’, function () { return gulp .src(‘./src/css/**’)
.pipe(autoPrefixer({ browsers: [‘last 2 versions’] })) .pipe(cssmin())
.pipe(gulp.dest(‘./dist/css’))
})

// 2-2. 创建一个 sass 任务 gulp.task(‘sass’, function () { return gulp .src(‘./src/sass/**’) .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest(‘./dist/css’)) })

// 3. 创建一个 js 任务 gulp.task(‘js’, function () { return gulp .src(‘./src/js/**’) .pipe(babel({ presets: [‘es2015’] })) .pipe(uglify()) .pipe(gulp.dest(‘./dist/js’)) })

// 4. 创建一个 html 任务 gulp.task(‘html’, function () { return gulp .src(‘./src/pages/**’) .pipe(htmlmin({ removeEmptyAttibutes: true, // 移出所有空属性 collapseWhitespace: true // 压缩 html })) .pipe(gulp.dest(‘./dist/pages’)) })

// 5. 创建一个 lib 任务 gulp.task(‘lib’, function () { return gulp .src(‘./src/lib/**’) .pipe(gulp.dest(‘./dist/lib’)) })

// 6. 创建一个 static 任务 gulp.task(‘static’, function () { return gulp .src(‘./src/static/**’) .pipe(gulp.dest(‘./dist/static’)) })

  2. - 接下来就是去命令行执行 `lib` 任务和 `static` 任务
  3. ```shell
  4. # 执行 lib 任务
  5. $ gulp lib
  7. # 执行 static 任务
  8. $gulp static

批量执行任务

  • 我们的几个和文件相关的任务都配置完毕了
  • 但是我们不能在开发过程中一个任务一个任务的去执行
  • 不方便也不是很只能
  • 所以我们要统一执行任务
  • 这个时候就需要进行一个配置，让几个任务一起执行一下
  • 这个不需要依赖，我们只需要配置一个叫做 default 的任务
  • gulp 在运行的时候会默认执行 default 任务 ```javascript // 我是 gulpfile.js 文件

// 1. 引入 gulp const gulp = require(‘gulp’)

// 2-1. 引入 gulp-cssmin const cssmin = require(‘gulp-cssmin’)

// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require(‘gulp-autoprefixer’)

// 2-3. 引入 gulp-sass const sass = require(‘gulp-sass’)

// 3-1. 引入 gulp-uglify const uglify = require(‘gulp-urlify’)

// 3-2. 引入 gulp-babel // es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了 const babel = require(‘gulp-babel’)

// 4. 引入 gulp-htmlmin const htmlmin = require(‘gulp-htmlmin’)

// 2-1. 创建一个 css 的任务 gulp.task(‘css’, function () { return gulp .src(‘./src/css/**’)
.pipe(autoPrefixer({ browsers: [‘last 2 versions’] })) .pipe(cssmin())
.pipe(gulp.dest(‘./dist/css’))
})

// 2-2. 创建一个 sass 任务 gulp.task(‘sass’, function () { return gulp .src(‘./src/sass/**’) .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest(‘./dist/css’)) })

// 3. 创建一个 js 任务 gulp.task(‘js’, function () { return gulp .src(‘./src/js/**’) .pipe(babel({ presets: [‘es2015’] })) .pipe(uglify()) .pipe(gulp.dest(‘./dist/js’)) })

// 4. 创建一个 html 任务 gulp.task(‘html’, function () { return gulp .src(‘./src/pages/**’) .pipe(htmlmin({ removeEmptyAttibutes: true, // 移出所有空属性 collapseWhitespace: true // 压缩 html })) .pipe(gulp.dest(‘./dist/pages’)) })

// 5. 创建一个 lib 任务 gulp.task(‘lib’, function () { return gulp .src(‘./src/lib/**’) .pipe(gulp.dest(‘./dist/lib’)) })

// 6. 创建一个 static 任务 gulp.task(‘static’, function () { return gulp .src(‘./src/static/**’) .pipe(gulp.dest(‘./dist/static’)) })

// 7. 配置一个默认任务 gulp.task(‘default’, [‘css’, ‘sass’, ‘js’, ‘html’, ‘lib’, ‘static’])

  2.    - 这样配置完毕以后，当你运行 `gulp` 的时候，会自动执行 `default` 任务
  3.    - 然后 `default` 任务就会把后面数组中写的几个任务并行执行了
  4. - 接下来就是去命令行里面运行 `gulp`
  5. ```shell
  6. # 运行 gulp，会默认执行 default 任务
  7. $ gulp

清除 DIST 文件夹

  • 当你在编译的时候，如果第一次编译有一个叫做 a.css 的文件，他会帮你编译
  • 后来你把 a.css 文件改名字了，改叫 b.css，再次进行编译的时候
  • 会给你新生成一个 b.css 文件在 dist 文件夹中
  • 之前的 a.css 文件也不会消失
  • 那么这样就不是很好了
  • 我们比较好的做法是
    • 在执行所有的编译之前
    • 先把 dist 文件夹删除掉
    • 然后再执行所有的编译操作
  • 这样就不会用多余的文件留下了
  • 这个时候我们就要使用一个依赖
    • npm i -D gulp-clean
  • 然后去配置文件里面配置一个任务 ```javascript // 我是 gulpfile.js 文件

// 1. 引入 gulp const gulp = require(‘gulp’)

// 2-1. 引入 gulp-cssmin const cssmin = require(‘gulp-cssmin’)

// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require(‘gulp-autoprefixer’)

// 2-3. 引入 gulp-sass const sass = require(‘gulp-sass’)

// 3-1. 引入 gulp-uglify const uglify = require(‘gulp-urlify’)

// 3-2. 引入 gulp-babel // es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了 const babel = require(‘gulp-babel’)

// 4. 引入 gulp-htmlmin const htmlmin = require(‘gulp-htmlmin’)

// 5. 引入 gulp-clean const clean = require(‘gulp-clean’)

// 2-1. 创建一个 css 的任务 gulp.task(‘css’, function () { return gulp .src(‘./src/css/**’)
.pipe(autoPrefixer({ browsers: [‘last 2 versions’] })) .pipe(cssmin())
.pipe(gulp.dest(‘./dist/css’))
})

// 2-2. 创建一个 sass 任务 gulp.task(‘sass’, function () { return gulp .src(‘./src/sass/**’) .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest(‘./dist/css’)) })

// 3. 创建一个 js 任务 gulp.task(‘js’, function () { return gulp .src(‘./src/js/**’) .pipe(babel({ presets: [‘es2015’] })) .pipe(uglify()) .pipe(gulp.dest(‘./dist/js’)) })

// 4. 创建一个 html 任务 gulp.task(‘html’, function () { return gulp .src(‘./src/pages/**’) .pipe(htmlmin({ removeEmptyAttibutes: true, // 移出所有空属性 collapseWhitespace: true // 压缩 html })) .pipe(gulp.dest(‘./dist/pages’)) })

// 5. 创建一个 lib 任务 gulp.task(‘lib’, function () { return gulp .src(‘./src/lib/**’) .pipe(gulp.dest(‘./dist/lib’)) })

// 6. 创建一个 static 任务 gulp.task(‘static’, function () { return gulp .src(‘./src/static/**’) .pipe(gulp.dest(‘./dist/static’)) })

// 8. 创建一个 clean 任务 gulp.task(‘clean’, function () { return gulp .src(‘./dist’) .pipe(clean()) })

// 7. 配置一个默认任务 gulp.task(‘default’, [‘css’, ‘sass’, ‘js’, ‘html’, ‘lib’, ‘static’])

  2. - 接下来我们执行任务的时候就应该先执行 `clean` 任务，再执行 `default` 任务
  3. ```shell
  4. # 执行 clean 任务
  5. $ gulp clean
  7. # 执行 default 任务
  8. $ gulp

按顺序执行任务

  • 因为每次打包都要执行一个 clean 任务
  • 那么我们就可以把 clean 任务也加到 default 任务的队列里面执行
    • gulp.task('default', ['clean', css', 'sass', 'js', 'html', 'lib', 'static'])
  • 这样我们运行的时候，每次就都会帮我们执行 clean 任务了
  • 但是会出现一个问题
    • 因为后面队列里面的任务是并行的
    • 那么有的时间长有的时间短
    • 那么就会出现有一些文件已经压缩完毕放在 dist/ 文件夹里面了
    • 然后 clean 任务执行完毕的时候又给直接清除掉了
    • 这样不是很好
  • 我们就需要让这些任务出现先后顺序
    • 先执行一下 clean 任务
    • clean 执行完毕以后，剩下的几个压缩文件的任务可以并行执行
  • 这个时候我们就需要用到一个依赖
    • npm i -D run-sequence
  • 这个依赖是逐步执行任务的一个包
  • 这个时候我们修改一下 default 任务就好了 ```javascript // 我是 gulpfile.js 文件

// 1. 引入 gulp const gulp = require(‘gulp’)

// 2-1. 引入 gulp-cssmin const cssmin = require(‘gulp-cssmin’)

// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require(‘gulp-autoprefixer’)

// 2-3. 引入 gulp-sass const sass = require(‘gulp-sass’)

// 3-1. 引入 gulp-uglify const uglify = require(‘gulp-urlify’)

// 3-2. 引入 gulp-babel // es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了 const babel = require(‘gulp-babel’)

// 4. 引入 gulp-htmlmin const htmlmin = require(‘gulp-htmlmin’)

// 5. 引入 gulp-clean const clean = require(‘gulp-clean’)

// 6. 引入 run-sequence const runSequence = require(‘run-sequence’)

// 2-1. 创建一个 css 的任务 gulp.task(‘css’, function () { return gulp .src(‘./src/css/**’)
.pipe(autoPrefixer({ browsers: [‘last 2 versions’] })) .pipe(cssmin())
.pipe(gulp.dest(‘./dist/css’))
})

// 2-2. 创建一个 sass 任务 gulp.task(‘sass’, function () { return gulp .src(‘./src/sass/**’) .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest(‘./dist/css’)) })

// 3. 创建一个 js 任务 gulp.task(‘js’, function () { return gulp .src(‘./src/js/**’) .pipe(babel({ presets: [‘es2015’] })) .pipe(uglify()) .pipe(gulp.dest(‘./dist/js’)) })

// 4. 创建一个 html 任务 gulp.task(‘html’, function () { return gulp .src(‘./src/pages/**’) .pipe(htmlmin({ removeEmptyAttibutes: true, // 移出所有空属性 collapseWhitespace: true // 压缩 html })) .pipe(gulp.dest(‘./dist/pages’)) })

// 5. 创建一个 lib 任务 gulp.task(‘lib’, function () { return gulp .src(‘./src/lib/**’) .pipe(gulp.dest(‘./dist/lib’)) })

// 6. 创建一个 static 任务 gulp.task(‘static’, function () { return gulp .src(‘./src/static/**’) .pipe(gulp.dest(‘./dist/static’)) })

// 8. 创建一个 clean 任务 gulp.task(‘clean’, function () { return gulp .src(‘./dist’) .pipe(clean()) })

// 7. 改写 default 任务 gulp.task(‘default’, function () { // 里面的每一个参数都可以是一个任务或者一个任务队列 // 再执行任务的时候，会把前一个任务队列完成的情况下再执行下一个任务队列 runSequence(‘clean’, [‘css’, ‘sass’, ‘js’, ‘html’, ‘lib’, ‘static’]) })

  2.    - 这样依赖，每次都是先执行 `clean` 任务
  3.    - 执行完毕之后再并行执行那些压缩的任务就不会出现问题了
  4. - 然后我们就去命令行中运行 `gulp` 执行一下 `default` 任务就可以了
  5. ```shell
  6. # 运行 gulp
  7. $ gulp

自动打开浏览器

  • 我们的打包工作已经完成了
  • 接下来要是能再打包完毕自动帮我把浏览器打开就好了
  • 省的我自己去开了
  • 这个时候是可以做到的
  • 需要一个依赖
    • npm i -D gulp-webserver
  • 然后进行配置 ```javascript // 我是 gulpfile.js 文件

// 1. 引入 gulp const gulp = require(‘gulp’)

// 2-1. 引入 gulp-cssmin const cssmin = require(‘gulp-cssmin’)

// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require(‘gulp-autoprefixer’)

// 2-3. 引入 gulp-sass const sass = require(‘gulp-sass’)

// 3-1. 引入 gulp-uglify const uglify = require(‘gulp-urlify’)

// 3-2. 引入 gulp-babel // es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了 const babel = require(‘gulp-babel’)

// 4. 引入 gulp-htmlmin const htmlmin = require(‘gulp-htmlmin’)

// 5. 引入 gulp-clean const clean = require(‘gulp-clean’)

// 6. 引入 run-sequence const runSequence = require(‘run-sequence’)

// 7. 引入 gulp-webserver const webserver = require(‘gulp-webserver’)

// 2-1. 创建一个 css 的任务 gulp.task(‘css’, function () { return gulp .src(‘./src/css/**’)
.pipe(autoPrefixer({ browsers: [‘last 2 versions’] })) .pipe(cssmin())
.pipe(gulp.dest(‘./dist/css’))
})

// 2-2. 创建一个 sass 任务 gulp.task(‘sass’, function () { return gulp .src(‘./src/sass/**’) .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest(‘./dist/css’)) })

// 3. 创建一个 js 任务 gulp.task(‘js’, function () { return gulp .src(‘./src/js/**’) .pipe(babel({ presets: [‘es2015’] })) .pipe(uglify()) .pipe(gulp.dest(‘./dist/js’)) })

// 4. 创建一个 html 任务 gulp.task(‘html’, function () { return gulp .src(‘./src/pages/**’) .pipe(htmlmin({ removeEmptyAttibutes: true, // 移出所有空属性 collapseWhitespace: true // 压缩 html })) .pipe(gulp.dest(‘./dist/pages’)) })

// 5. 创建一个 lib 任务 gulp.task(‘lib’, function () { return gulp .src(‘./src/lib/**’) .pipe(gulp.dest(‘./dist/lib’)) })

// 6. 创建一个 static 任务 gulp.task(‘static’, function () { return gulp .src(‘./src/static/**’) .pipe(gulp.dest(‘./dist/static’)) })

// 8. 创建一个 clean 任务 gulp.task(‘clean’, function () { return gulp .src(‘./dist’) .pipe(clean()) })

// 9. 创建一个 webserver 任务 gulp.task(‘webserver’, function () { return gulp .src(‘./dist’) .pipe(webserver({ host: ‘localhost’, // 配置打开浏览器的域名 port: 3000, // 配置打开浏览器的端口号 livereload: true, // 自动刷新浏览器 open: ‘./pages/index.html’ // 默认打开 dist 文件夹下的哪个文件 })) })

// 7. 改写 default 任务 gulp.task(‘default’, function () { // 里面的每一个参数都可以是一个任务或者一个任务队列 // 再执行任务的时候，会把前一个任务队列完成的情况下再执行下一个任务队列 runSequence( ‘clean’, [‘css’, ‘sass’, ‘js’, ‘html’, ‘lib’, ‘static’], ‘webserver’) })

  2.    - 因为我们打开浏览器应该再所有压缩任务都完成以后
  3.    - 再把浏览器打开
  4.    - 所以我们把他排在任务的第三个队列上
  5. - 这个 `webserver` 会自动帮我们启动一个服务器
  6. - 是一个 `node` 的服务器
  7. - 所以我们的页面也相当于是在服务器上打开的
  9. <a name="f02e1046"></a>
  10. ### 修改内容自动刷新
  12. - 我们刚才再配置 `webserver` 的时候有一个自动刷新的功能被我们开启了
  13. - 但是我们修改一些文件的时候发现并没有自动刷新
  14. - 这个是因为，我们只是开启了自动刷新，但是你修改文件以后并没有自动帮我们重新编译
  15. - 那么 `dist/` 文件夹下的内容就不会更改，那么刷新就没有意义
  16. - 所以我们应该再制作一个任务，当文件夹下的内容修改的时候，自动帮我们从新编译
  17. - 这个不需要任何依赖，我们只需要配置一个监控文件改变的任务就行了
  18. ```javascript
  19. // 我是 gulpfile.js 文件
  21. // 1. 引入 gulp
  22. const gulp = require('gulp')
  24. // 2-1. 引入 gulp-cssmin
  25. const cssmin = require('gulp-cssmin')
  27. // 2-2. 引入 gulp-autoprefixer 
  28. const autoPrefixer = require('gulp-autoprefixer')
  30. // 2-3. 引入 gulp-sass
  31. const sass = require('gulp-sass')
  33. // 3-1. 引入 gulp-uglify
  34. const uglify = require('gulp-urlify')
  36. // 3-2. 引入 gulp-babel
  37. //      es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了
  38. const babel = require('gulp-babel')
  40. // 4. 引入 gulp-htmlmin
  41. const htmlmin = require('gulp-htmlmin')
  43. // 5. 引入 gulp-clean
  44. const clean = require('gulp-clean')
  46. // 6. 引入 run-sequence
  47. const runSequence = require('run-sequence')
  49. // 7. 引入 gulp-webserver
  50. const webserver = require('gulp-webserver')
  53. // 2-1. 创建一个 css 的任务
  54. gulp.task('css', function () {
  55.     return gulp
  56.         .src('./src/css/**')   
  57.         .pipe(autoPrefixer({
  58.             browsers: ['last 2 versions']
  59.         }))
  60.         .pipe(cssmin())       
  61.         .pipe(gulp.dest('./dist/css'))  
  62. })
  64. // 2-2. 创建一个 sass 任务
  65. gulp.task('sass', function () {
  66.     return gulp
  67.         .src('./src/sass/**')
  68.         .pipe(sass())
  69.         .pipe(autoPrefixer())
  70.         .pipe(cssmin())
  71.         .pipe(gulp.dest('./dist/css'))
  72. })
  74. // 3. 创建一个 js 任务
  75. gulp.task('js', function () {
  76.     return gulp
  77.         .src('./src/js/**')
  78.         .pipe(babel({
  79.             presets: ['es2015']
  80.         }))
  81.         .pipe(uglify())
  82.         .pipe(gulp.dest('./dist/js'))
  83. })
  85. // 4. 创建一个 html 任务
  86. gulp.task('html', function () {
  87.     return gulp
  88.         .src('./src/pages/**')
  89.         .pipe(htmlmin({
  90.             removeEmptyAttibutes: true, // 移出所有空属性
  91.             collapseWhitespace: true // 压缩 html
  92.         }))
  93.         .pipe(gulp.dest('./dist/pages'))
  94. })
  96. // 5. 创建一个 lib 任务
  97. gulp.task('lib', function () {
  98.     return gulp
  99.         .src('./src/lib/**')
  100.         .pipe(gulp.dest('./dist/lib'))
  101. })
  103. // 6. 创建一个 static 任务
  104. gulp.task('static', function () {
  105.     return gulp
  106.         .src('./src/static/**')
  107.         .pipe(gulp.dest('./dist/static'))
  108. })
  110. // 8. 创建一个 clean 任务
  111. gulp.task('clean', function () {
  112.     return gulp
  113.         .src('./dist')
  114.         .pipe(clean())
  115. })
  117. // 9. 创建一个 webserver 任务
  118. gulp.task('webserver', function () {
  119.     return gulp
  120.         .src('./dist')
  121.         .pipe(webserver({
  122.             host: 'localhost',          // 配置打开浏览器的域名
  123.             port: 3000,                 // 配置打开浏览器的端口号
  124.             livereload: true,           // 自动刷新浏览器
  125.             open: './pages/index.html'  // 默认打开 dist 文件加下的哪个文件
  126.         }))
  127. })
  129. // 10. 创建一个 watch 任务
  130. gulp.task('watch', function () {
  131.     gulp.watch('./src/css/**', ['css'])
  132.     gulp.watch('./src/sass/**', ['sass'])
  133.     gulp.watch('./src/js/**', ['js'])
  134.     gulp.watch('./src/pages/**', ['html'])
  135.     gulp.watch('./src/lib/**', ['lib'])
  136.     gulp.watch('./src/static/**', ['static'])
  137. })
  139. // 7. 改写 default 任务
  140. gulp.task('default', function () {
  141.     // 里面的每一个参数都可以是一个任务或者一个任务队列
  142.     // 再执行任务的时候，会把前一个任务队列完成的情况下再执行下一个任务队列
  143.       runSequence(
  144.         'clean', 
  145.         ['css', 'sass', 'js', 'html', 'lib', 'static'],
  146.         ['webserver', 'watch'])
  147. })
  • 因为再文件压缩完毕以后，我们就可以开始监控了
  • 所以把这个 watch 任务和 webserver 任务并行就可以了
    • 接下来我们就可以再命令行运行 gulp 了
      1. # 运行 gulp
      2. $ gulp
  • 这个时候，我们只要进行代码书写就可以了
  • 随着我们写完，会自动帮我们打包编译，并且自动进行浏览器刷新的

使用 GULP 配置代理

  • 我们的 gulp 自动打包构建已经完成了
  • 我们的正常开发已经可以进行下去了
  • 我们就剩最后一个功能没有实现了
  • 那就是跨域请求的问题
  • 因为我们的项目中肯定有一些数据是向后台请求过来的
  • 那么我们就要发送请求
  • 我们又不能保重 服务端接口 和我们是同源的
  • 所以我们就要配置一个代理
  • gulp 给我们启动的这个服务器是 node 的服务器
  • 所以也可以直接配置代理

  • 不需要任何依赖，只要再 webserver 任务中多加一个配置就可以了

    1. gulp.task('webserver', function () {
    2.   return gulp
    3.       .src('./dist')
    4.       .pipe(webserver({
    5.           host: 'localhost',
    6.           port: 3000,
    7.           livereload: true,
    8.           open: './pages/index.html',
    9.           proxies: [ // 配置所有代理
    10.               { // 其中一个代理配置
    11.                   source: '/login', // 使用的关键字 
    12.                   target: 'http://localhost:80/login.php' // 代理的路径
    13.               }
    14.           ]
    15.       }))
    16. })
    • 这个时候你就可以正常发送请求了
    • 当你要请求代理地址的时候，只要再这里配置一下，使用代理关键字进行请求就可以了

GULP完整配置文件（简单版）

  • 所有需要用到的依赖
    1. gulp@3.9.1
    2. gulp-cssmin
    3. gulp-autoprefixer
    4. gulp-sass
    5. gulp-uglify
    6. gulp-babel@7.0.1
    7. babel-core
    8. babel-preset-es2015
    9. gulp-htmlmin
    10. gulp-clean
    11. run-sequence
    12. gulp-webserver
  • gulpfile.js 文件内容 ```javascript // 我是 gulpfile.js 文件 const gulp = require(‘gulp’) const cssmin = require(‘gulp-cssmin’) const autoPrefixer = require(‘gulp-autoprefixer’) const sass = require(‘gulp-sass’) const uglify = require(‘gulp-urlify’) const babel = require(‘gulp-babel’) const htmlmin = require(‘gulp-htmlmin’) const clean = require(‘gulp-clean’) const runSequence = require(‘run-sequence’) const webserver = require(‘gulp-webserver’)

gulp.task(‘css’, function () { return gulp .src(‘./src/css/**’)
.pipe(autoPrefixer({ browsers: [‘last 2 versions’] })) .pipe(cssmin())
.pipe(gulp.dest(‘./dist/css’))
})

gulp.task(‘sass’, function () { return gulp .src(‘./src/sass/**’) .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest(‘./dist/css’)) })

gulp.task(‘js’, function () { return gulp .src(‘./src/js/**’) .pipe(babel({ presets: [‘es2015’] })) .pipe(uglify()) .pipe(gulp.dest(‘./dist/js’)) })

gulp.task(‘html’, function () { return gulp .src(‘./src/pages/**’) .pipe(htmlmin({ removeEmptyAttibutes: true, collapseWhitespace: true })) .pipe(gulp.dest(‘./dist/pages’)) })

gulp.task(‘lib’, function () { return gulp .src(‘./src/lib/**’) .pipe(gulp.dest(‘./dist/lib’)) })

gulp.task(‘static’, function () { return gulp .src(‘./src/static/**’) .pipe(gulp.dest(‘./dist/static’)) })

gulp.task(‘clean’, function () { return gulp .src(‘./dist’) .pipe(clean()) })

gulp.task(‘webserver’, function () { return gulp .src(‘./dist’) .pipe(webserver({ host: ‘localhost’,
port: 3000,
livereload: true,
open: ‘./pages/index.html’, proxies: [ { source: ‘/login’, target: ‘http://localhost:80/login.php‘ } ] })) })

gulp.task(‘watch’, function () { gulp.watch(‘./src/css/‘, [‘css’]) gulp.watch(‘./src/sass/‘, [‘sass’]) gulp.watch(‘./src/js/‘, [‘js’]) gulp.watch(‘./src/pages/‘, [‘html’]) gulp.watch(‘./src/lib/‘, [‘lib’]) gulp.watch(‘./src/static/‘, [‘static’]) })

gulp.task(‘default’, function () { runSequence( ‘clean’, [‘css’, ‘sass’, ‘js’, ‘html’, ‘lib’, ‘static’], [‘webserver’, ‘watch’]) })

  2. <a name="P3ThY"></a>
  3. # GULP4.0.2新语法配置
  4. > gulpfile.js 配置内容，详细配置参考官方文档：[Gulp 官方 API](https://www.gulpjs.com.cn/docs/api/concepts//)
  6. ```javascript
  7. const { src, dest, task, parallel, watch } = require("gulp");
  9. // 处理copy-html 用gulp-htmlmin打包一下html
  10. const htmlmin = require("gulp-htmlmin");
  11. function copy_html() {
  12.   return src("./index.html")
  13.     .pipe(
  14.       htmlmin({
  15.         removeEmptyAttibutes: true, // 移出所有空属性
  16.         collapseWhitespace: true, // 压缩 html
  17.       })
  18.     )
  19.     .pipe(dest("dist/"))
  20.     .pipe(connect.reload());
  21. }
  23. //处理图片
  24. function images() {
  25.   return src("./images/**/*").pipe(dest("dist/images"));
  26. }
  28. //将两个文件夹的文件拷贝到一个目的文件夹去
  29. function data_files() {
  30.   return src(["./xml/*.xml", "./json/*.json"])
  31.     .pipe(dest("dist/data"))
  32.     .pipe(connect.reload());
  33. }
  35. //添加任务
  36. task(copy_html);
  37. task(images);
  38. task(data_files);
  40. //gulp的插件使用
  41. const gulpscss = require("gulp-sass");
  42. const minifycss = require("gulp-minify-css");
  43. const rename = require("gulp-rename");
  45. function scss_files() {
  46.   return src("./stylesheet/index.scss")
  47.     .pipe(gulpscss())
  48.     .pipe(dest("dist/css"))
  49.     .pipe(minifycss())
  50.     .pipe(rename("index.min.css"))
  51.     .pipe(dest("dist/css"))
  52.     .pipe(connect.reload());
  53. }
  54. task(scss_files);
  56. //js文件合并  压缩  ES6转ES5
  57. const concat = require("gulp-concat");
  58. const uglify = require("gulp-uglify");
  59. const babel = require("gulp-babel");
  60. function scripts_files() {
  61.   return src(["./javascript1/*.js", "./javascript2/*.js"])
  62.     .pipe(concat("index.js"))
  63.     .pipe(
  64.       babel({
  65.         presets: ["es2015"],
  66.       })
  67.     )
  68.     .pipe(dest("dist/js"))
  69.     .pipe(uglify())
  70.     .pipe(rename("index.min.js"))
  71.     .pipe(dest("dist/js"))
  72.     .pipe(connect.reload());
  73. }
  74. task(scripts_files);
  76. //gulp一次性执行多个任务
  77. exports.build = parallel(
  78.   copy_html,
  79.   images,
  80.   data_files,
  81.   scss_files,
  82.   scripts_files
  83. );
  85. //设置监听
  86. function watch_items() {
  87.   watch("./index.html", copy_html);
  88.   watch("./images/**/*", images);
  89.   watch(["./xml/*.xml", "./json/*.json"], data_files);
  90.   watch("./stylesheet/index.scss", scss_files);
  91.   watch(["./javascript1/*.js", "./javascript2/*.js"], scripts_files);
  92. }
  94. exports.watch = watch_items;
  96. //启动服务
  97. const connect = require("gulp-connect");
  98. function server() {
  99.   connect.server({
  100.     root: "dist",
  101.     port: 8888,
  102.     livereload: true,
  103.   });
  104. }
  105. task(server);
  106. exports.default = parallel(watch_items, server);