Gulp快速入门教程

• Gulp介绍

  • 中文主页: http://www.gulpjs.com.cn/
  • gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务（task）运行器
  • 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务
  • gulp更高效(异步多任务), 更易于使用, 插件高质量

• 检查 node、npm 和 npx 是否正确安装

  D:\web_QD\buildtool\gulp_test>node --version
  v14.4.0
  D:\web_QD\buildtool\gulp_test>npm --version
  6.14.5
  D:\web_QD\buildtool\gulp_test>npx --version
  6.14.5
  

• 创建一个简单的应用gulp_test

  |- dist
  |- src
    |- js
    |- css
    |- less
  |- index.html
  |- gulpfile.js-----gulp配置文件
  |- package.json-----包说明文件
  

• 安装gulp:

  • 安装 gulp 命令行工具

    npm install --global gulp-cli
    

  • 安装 gulp，作为开发时依赖项

    npm install gulp --save-dev
    

  • 配置编码: gulpfile.js

    function defaultTask(cb) {
      // place code for your default task here
      cb();
    }
    
    exports.default = defaultTask
    

  • 构建命令:

    gulp
    

• 使用gulp插件

  • 相关插件:

    • gulp-concat : 合并文件(js/css)
    • gulp-uglify : 压缩js文件
    • gulp-rename : 文件重命名
    • gulp-less : 编译less
    • gulp-clean-css : 压缩css

  • 重要API

    • src(filePath/pathArr)
      • 指向指定路径的所有文件, 返回文件流对象
      • 用于读取文件
    • dest(dirPath/pathArr)
      • 指向指定的所有文件夹
      • 用于向文件夹中输出文件
    • gulp.watch()
      • 监视文件的变化

  • 处理js

    • 创建js文件
      • src/js/test1.js

        (function () {
          function add(num1, num2) {
            var num3 = 0;
            num1 = num2 + num3;
            return num1 + num2;
          }
          console.log(add(10, 30));
        })();
        

      • src/js/test2.js

        (function () {
          var arr = [2,3,4].map(function (item, index) {
              return item+1;
          });
          console.log(arr);
        })();
        

    • 下载插件:

      npm install gulp-concat gulp-uglify gulp-rename --save-dev
      

  • 处理css

    • 创建less/css文件
      • src/css/test1.css

        #div1 {
          width: 100px;
          height: 100px;
          background: green;
        }
        

      • src/css/test2.css

        #div2 {
          width: 200px;
          height: 200px;
          background: blue;
        }
        

      • src/less/test.less

        @base: yellow;
        .index1 { color: @base; }
        .index2 { color: green; }
        

    • 下载插件:

      npm install gulp-less gulp-clean-css --save-dev 
      

  • 处理html

    • 下载插件:

      npm install gulp-htmlmin --save-dev
      

• 编写gulpfile.js

  const {src, dest, series, parallel, watch} = require('gulp')
  const clean = require('gulp-clean')
  const uglify = require('gulp-uglify')
  const concat = require('gulp-concat')
  const rename = require('gulp-rename')
  const less = require('gulp-less')
  const cleanCSS = require('gulp-clean-css')
  const htmlmin = require('gulp-htmlmin')
  
  /**
   * 最新的 gulp 不再支持同步任务！！！
   ********************************************/
   
  // 清除压缩目录
  function cleanDist() {
      return src('dist/', {read: false})
          .pipe(clean())
          .pipe(dest('dist'))
  }
  
  // js合并压缩
  function jsMinify() {
      return src('src/js/*.js')
          .pipe(concat('bundle.js'))
          .pipe(rename({extname: '.min.js'}))
          .pipe(uglify())
          .pipe(dest('dist/js'))
  }
  
  // less编译处理任务
  function cssLess() {
      return src('src/less/*.less')
          .pipe(less())
          .pipe(dest('src/css'))
  }
  
  // 压缩css
  function cssMinify() {
      return src('src/css/*.css')
          .pipe(concat('bundle.css'))
          .pipe(rename({suffix: '.min'}))
          .pipe(cleanCSS({compatibility: 'ie8'}))
          .pipe(dest('dist/css'))
  }
  
  // 压缩html
  function htmlMinify() {
      return src('index.html')
          .pipe(htmlmin({collapseWhitespace: true}))
          .pipe(dest('dist'))
  }
  
  // 自定义任务组合 series是串行的 parallel是并行的
  var customTasks = series(
      cleanDist,
      parallel(
          jsMinify,
          series(
              cssLess,
              cssMinify
          ),
          htmlMinify
      ))
  
  // 导出清除压缩的文件 执行gulp cleanDist
  exports.cleanDist = cleanDist
  // 默认导出 执行gulp
  exports.default = customTasks
  
  // 文件修改监控 '!src/css/test.css'意为不检测这个文件的修改
  watch(['src/js/*.js', 'src/css/*.css', '!src/css/test.css', 'src/less/*.less'], customTasks)
  

• 构建命令:
  执行gulp dist下会生成构建文件，修改源文件会自动构建