代码整理-gulp简单使用

说明

• 本次为gulp简单使用，本次是配合PHP项目，只用到了gulp打包、压缩、合并、重命名、移动css和js功能，其他功能未涉及；
• 官方文档：https://www.gulpjs.com.cn/
• 本机环境：Windows
• gulp版本：gulp@4

操作步骤

• 安装node.js，可参考我相关教程

• 检查node：

  node --version
  npm --version

• 切换到项目根目录，npm初始化（生成package.json）：npm init

• 安装gulp

  • 全局安装：npm install --global gulp-cli

  • 项目安装（推荐）：

    • 打开命令行，切换到项目根目录
    • 安装：npm i gulp --save-dev

  • 查看gulp版本：gulp --version

    CLI version: 2.3.0
    Local version: 4.0.2

  • 注意：安装完gulp不是内部命令，重启控制台，如果是idea中操作的就重启一下idea
• 切换到项目根目录，新建gulpfile.js文件，文件内容为空

• 此时准备工作已经全部完成，命令行切换到gulpfile.js所在目录，输入：gulp回车：

  [08:54:36] Using gulpfile D:\xxx\gulpfile.js
  [08:54:36] Task never defined: default
  [08:54:36] To list available tasks, try running: gulp --tasks

• 修改gulpfile.js，加入简单的处理css、js的逻辑（初版）

  const {series, parallel, src, task, dest, watch} = require('gulp');
  
  // 处理css
  function css() {
      // return src(['./public/src/css/*.css', '!.public/src/css/home.css']) // 读取文件，排除home.css
      return src('./public/src/css/*.css')        // 读取文件
          .pipe(dest('./public/frontend/css/'));  // 输出到
  }
  
  // 处理js
  function js() {
      return src('./public/src/js/*.js')          // 读取文件
          .pipe(dest('./public/frontend/js/'));   // 输出到
  }
  
  // 监控css（当文件更改后自动调用任务，需要手动保存才会触发）
  watch('./public/src/css/*.css', css);
  
  // 监控js（当文件更改后自动调用任务，需要手动保存才会触发）
  watch('./public/src/js/*.js', js);
  
  // 导出公开任务（导出的任务才能在命令行gulp调用）
  exports.css = css;
  exports.js = js;
  
  // 默认任务（必须设置）
  // exports.default = series(css);       // 同步按顺序执行，阻塞，效率低
  exports.default = parallel(css, js);    // 异步随机执行，非阻塞，效率高

• 监控任务使用

  • 使用监控watch的时候，需要命令行gulp命令一直运行
  • 当gulpfile.js中有watch函数时，gulp命令执行的时候默认会挂起保持一直运行

• 安装插件：

  • 压缩css的插件：npm i -D gulp-cssmin

  • 自动给css添加前缀（兼容各种浏览器）：npm i -D gulp-autoprefixer

    • 注意：本插件需要配置参数，如果参数写在任务中会报如下警告：

      Replace Autoprefixer browsers option to Browserslist config.
      Use browserslist key in package.json or .browserslistrc file.

      • 意思是推荐将配置参数写在package.json中，以browserslist为key：

        "browserslist": [
            "last 2 versions",
            "FireFox < 20"
        ]

  • 压缩js的插件：npm i -D gulp-uglify

    • 注意：本插件老版本不支持js中有ES6语法（比如不支持let声明变量），新版默认已经支持
  • 合并文件插件：npm i -D gulp-concat

  • 重命名文件插件：npm i -D gulp-rename

    • 注意：本插件需要配置参数，接收一个对象

      • 添加后缀的参数写法：{suffix: '.min'}

• 运行gulp（gulpfile.js所在目录下）

  // 默认任务（default）
  $ gulp
  
  // 指定任务（css、sj等公开任务）
  $ gulp css

最终核心配置展示

• package.json

  {
    "name": "test.local",
    "version": "1.0.0",
    "description": "gulp test.",
    "main": "index.js",
    "scripts": {
      "test": "test-gulp"
    },
    "author": "yasin",
    "license": "ISC",
    "devDependencies": {
      "gulp": "^4.0.2",
      "gulp-autoprefixer": "^8.0.0",
      "gulp-concat": "^2.6.1",
      "gulp-cssmin": "^0.2.0",
      "gulp-rename": "^2.0.0",
      "gulp-uglify": "^3.0.2"
    },
    "browserslist": [
      "last 2 versions",
      "FireFox < 20"
    ]
  }

• gulpfile.js

  const {series, parallel, src, task, dest, watch} = require('gulp');
  const cssmin = require('gulp-cssmin');
  const autoprefixer = require('gulp-autoprefixer');
  const uglify = require('gulp-uglify');
  const concat = require('gulp-concat');
  const rename = require('gulp-rename');
  
  // 处理公共css
  function publicCss() {
      return src(['./public/src/css/*.css', '!./public/src/css/home.css'])        // 读取文件，排除home.css
          .pipe(concat('all.css'))            // 合并文件
          .pipe(autoprefixer())                   // 添加前缀
          .pipe(cssmin())                         // 压缩文件
          .pipe(rename({suffix: '.min'}))     // 重命名
          .pipe(dest('./public/frontend/css/'));  // 输出到
  }
  
  // 处理首页专用css
  function homeCss() {
      return src('./public/src/css/home.css')     // 读取文件
          .pipe(autoprefixer())                   // 添加前缀
          .pipe(cssmin())                         // 压缩文件
          .pipe(rename({suffix: '.min'}))     // 重命名
          .pipe(dest('./public/frontend/css/'));  // 输出到
  }
  
  // 处理公共js
  function publicJs() {
      return src('./public/src/js/*.js')          // 读取文件
          .pipe(concat('all.js'))             // 合并文件
          .pipe(uglify())                         // 压缩js
          .pipe(rename({suffix: '.min'}))     // 重命名
          .pipe(dest('./public/frontend/js/'));   // 输出到
  }
  
  // 监控任务
  function doWatch() {
      // 监控公共css（当文件更改后自动调用任务，需要手动保存才会触发）
      watch('./public/src/css/*.css', parallel(publicCss, homeCss));
  
  // 监控公共js（当文件更改后自动调用任务，需要手动保存才会触发）
      watch('./public/src/js/*.js', publicJs);
  }
  
  // 导出公开任务（导出的任务才能在命令行gulp调用）
  // exports.css = css;
  // exports.js = js;
  
  // 默认任务（必须设置）
  // exports.default = series(css);       // 同步按顺序执行，阻塞，效率低
  // exports.default = parallel(publicCss, homeCss, publicJs);    // 异步随机执行，非阻塞，效率高
  
  exports.once = parallel(publicCss, homeCss, publicJs);              // 生产环境执行：gulp once
  exports.default = parallel(publicCss, homeCss, publicJs, doWatch);  // 开发环境执行：gulp