gulp的使用和常规代码的打包

gulp的使用和常规代码的打包

常用的工具
grunt 比较古老，功能少，更新少，插件少，现在用的很少
gulp pc端 jquery的项目打包更多使用gulp
webpack 最主流的打包工具，vue、react都是用的webpack

gulp的介绍

用自动化构建工具增强你的工作流程！

gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。

简单：代码优于配置、node 最佳实践、精简的 API 集，gulp 让工作前所未有的简单。

高效：基于 node 强大的流(stream)能力，gulp 在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。

生态：遵循严格的准则，确保我们的插件结构简单、运行结果可控。

gulp使用

一、准备工作
安装node环境：https://nodejs.org，下载LTS版本的即可

在任意位置打开命令行工具，使用npm全局安装gulp命令行工具 npm i gulp-cli -g，安装完成以后执行gulp -v 只要看到版本号就说明安装成功

创建项目目录，一般由小写字母加数字构成

进入目录，执行npm init -y 初始化项目，会创建一个package.json文件，这个文件里就是当前项目的一些说明信息，也可以手动修改

规划目录结构，比如：src放源代码，dist就是根据src源代码使用gulp打包之后可以用来上线的代码，dist是不用动的，我们写代码在src里面写，但是最后运行的是dist目录

在当前项目局部安装gulp， npm i gulp -D，高版本npm会自动帮我们 –save 保存在package.json文件的依赖里，但是现在新版本的npm不需要加这个参数了，会默认保存；-D的意思是安装成开发依赖，也就是说这个包只有开发环境需要，线上产品环境不需要。这样的话即使删除node_modules也可以直接运行 npm i 或者yarn就可以根据package.json里面的所有依赖包信息把这些依赖包全局安装进来

创建一个gulpfile.js文件，注意：文件名一定要叫gulpfile！！！然后在这个文件里制定各种任务。

管理路径，把所有的路径集中用paths对象来管理，包括源文件路径和目标路径

首先是path

const path = {
    html: {
        src: 'src/**/*.html', // src下面的所有文件夹下的所有html文件，下面的js，css以此类推
        dest: 'dist' // 处理的结果放到dist目录
    },
    css: {
        src: 'src/css/**/*.css', // src下面css目录里的所有文件夹下的所有css文件
        dest: 'dist/css' // 处理的结果放到dist下的css目录里
    },
    js: {
        src: 'src/js/**/*.js',
        dest: 'dist/js'
    },
    img: {
        src: 'src/images/**/*',
        dest: 'dist/images'
    },
    libs: {
        src: 'src/libs/**/*',
        dest: 'dist/libs'
    }
}

二、html任务
执行npm i gulp-htmlmin -D安装压缩html的插件，然后制定压缩任务，再通过module.exports 把这个任务暴露出去，就可以执行gulp html 来运行这个任务了

const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin')
const html = () => {
    // 需要把任务代码return
    return gulp.src(path.html.src)
        .pipe(htmlmin({
        	removeComments: true,//清除HTML注释
        	collapseWhitespace: true,//压缩HTML
        	collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
      		removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
      		removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
      		removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
      		minifyJS: true,//压缩页面JS
      		minifyCSS: true//压缩页面CSS 
    	}))
    	.pipe(gulp.dest(path.html.dest))
}
module.exports = {
  html
}

三、js任务
先ES6转ES5，然后再压缩，最后在导出那里加上js任务

安装压缩js的包npm i gulp-uglify -D

安装ES6转ES5的包npm i gulp-babel @babel/core @babel/preset-env -D

const uglify = require('gulp-uglify')
const babel = require('gulp-babel')

const js = () => {
    return gulp.src(path.js.src)
        .pipe(babel({
        	presets: ['@babel/env']
    	}))
        .pipe(uglify())
        .pipe(gulp.dest(path.js.dest))
        .pipe(connect.reload())
}
module.exports = {
    html,
    js
}

四、css任务
压缩css：npm i gulp-clean-css -D

const cleanCss = require('gulp-clean-css')
const css = () => {
  return gulp.src(path.css.src)
      .pipe(cleanCss())
      .pipe(gulp.dest(path.css.dest))
}
module.exports = {
    html,
    js,
    css
}

五、css前缀
给需要兼容的css样式自动加上兼容性前缀：npm i gulp-autoprefixer -D

const cleanCss = require('gulp-clean-css')
const autoPrefixer = require('gulp-autoprefixer')
const css = () => {
    return gulp.src(path.js.src)
        .pipe(autoprefixer({
        	cascade: false
    	}))
      .pipe(cleanCss())
      .pipe(gulp.dest(path.css.dest))
}
module.exports = {
    html,
    js,
    css
}

六、使用sass
如果用到sass来写样式，那么还要把css任务做进一步修改：

sass编译成成css：npm i node-sass gulp-sass -D

首先，path对象里css的src属性路径要把后缀名css改成scss，再修改css任务

const cleanCss = require('gulp-clean-css')
const autoPrefixer = require('gulp-autoprefixer')
const sass = require('gulp-sass')

const css = () => {
    return gulp.src(path.js.src)
    	.pipe(sass())
        .pipe(autoprefixer({
        	presets: ['@babel/env']
    	}))
       .pipe(cleanCss())
       .pipe(gulp.dest(path.css.dest))
}

七、开启服务器
npm i gulp-connect -D项目根目录是dist，所以项目中的一切路径都写成/开头的绝对路径，/指的就是dist，避免模块化之后相对位置发生变变化导致路径错误

const connect = require('gulp-connect')
const server = () => {
    connect.server({
        root: 'dist', // 项目根路径是dist
        livereload: true, // 服务器支持热更新
        port: 2333 // 配置端口号2333
    })
}

八、删除dist
由于dist目录是每次执行任务时自动生成的，所以为了避免上一次旧的代码对新的代码造成影响，我们一般会在开启任务之前先把dist目录删掉： npm i del -D

const del = require('del')
const clean = () => del('dist')

九、文件移动
还有一些图片或者引入的第三方的文件需要做一个移动处理

// img任务：复制到dist里
const img = () => gulp.src(path.img.src).pipe(gulp.dest(path.img.dest))
// libs任务：文件的复制
const libs = () => gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))

十、监听
监听html、js和css文件的变化，重启对应任务，在被监听的任务后面都要重启服务器

// watch任务：监听一些文件的修改，一旦被修改了就自动重启对应的任务
const watch = () => {
    gulp.watch(path.html.src, html)
    gulp.watch(path.css.src, css)
    gulp.watch(path.js.src, js)
}
// 再在html、css和js任务后面都加上一句.pipe(connect.reload())，比如css任务改成这样：
const css = () => {
  return gulp.src(path.css.src)
      .pipe(sass())
      .pipe(cleanCss())
      .pipe(gulp.dest(path.css.dest))
      .pipe(connect.reload())
}

十一、默认任务
任务导出做一下修改，单个导出只能单个执行，所以我们可以把所有要执行的任务放在默认任务里，就只需要在命令行里执行gulp即可执行所有任务：导出默认任务流，先同步执行delDist，再异步执行其他任务

module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, img, libs, server, watch))

十二、跨域
如果需要跨域访问其他接口，则需要配置跨域，需要依赖另一个插件：npm i http-proxy-middleware -D

const connect = require('gulp-connect')
const { createProxyMiddleware } = require('http-proxy-middleware')

const server = () => {
  connect.server({
    root: 'dist',
    livereload: true,
    port: 2333,
    // 中间件：函数返回一个数组，数组配置跨域代理
    middleware () {
      return [
        // 将以/api为开头的请求代理到域 http://localhost:80
        createProxyMiddleware('/api', {
          target: 'http://localhost:80',
          changeOrigin: true
        })
      ]
    }
  })
}

现在，我们只需要在命令行里运行gulp 项目就能启动起来了，然后在浏览器里输入 http://localhost:2333就能访问主页啦。

最后，贴上完整代码如下：

const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin'),
      cleanCss = require('gulp-clean-css'),
      del = require('del'),
      uglify = require('gulp-uglify'),
      babel = require('gulp-babel'),
      connect = require('gulp-connect'),
      sass = require('gulp-sass'),
      { createProxyMiddleware } = require('http-proxy-middleware')
// 在每次开启新任务之前先把dist删掉
const delDist = () => del('dist')
// 先把所有的任务用到的文件源路径和目标路径做一个统一规划
const path = {
  html: {
    src: 'src/**/*.html',
    dest: 'dist'
  },
  css: {
    src: 'src/css/**/*.scss',
    dest: 'dist/css'
  },
  js: {
    src: 'src/js/**/*.js',
    dest: 'dist/js'
  },
  img: {
    src: 'src/images/**/*',
    dest: 'dist/images'
  },
  libs: {
    src: 'src/libs/**/*',
    dest: 'dist/libs'
  }
}
// 制定html任务：通过函数的方式
const html = () => {
  // 需要把任务代码return
  return gulp.src(path.html.src)
    .pipe(htmlmin({
      removeComments: true,//清除HTML注释
      collapseWhitespace: true,//压缩HTML
      collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
      removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
      removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
      removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
      minifyJS: true,//压缩页面JS
      minifyCSS: true//压缩页面CSS 
    }))
    .pipe(gulp.dest(path.html.dest))
    .pipe(connect.reload())
}
// css任务：先把scss文件编译成css，再压缩
const css = () => {
  return gulp.src(path.css.src)
    .pipe(sass())
    .pipe(cleanCss())
    .pipe(gulp.dest(path.css.dest))
    .pipe(connect.reload())
}
// js任务
const js = () => {
  return gulp.src(path.js.src)
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest(path.js.dest))
    .pipe(connect.reload())
}
// img任务：复制到dist里
const img = () => gulp.src(path.img.src).pipe(gulp.dest(path.img.dest))

// libs任务
const libs = () => gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))

// server任务
const server = () => {
  connect.server({
    root: 'dist',
    livereload: true,
    port: 2333,
    // 中间件：函数返回一个数组，数组配置跨域代理
    middleware () {
      return [
        // 将以/api为开头的请求代理到域 http://localhost
        createProxyMiddleware('/api', {
          target: 'http://localhost',
          changeOrigin: true
        })
      ]
    }
  })
}
// watch任务：监听一些文件的修改，一旦被修改了就自动重启对应的任务
const watch = () => {
  gulp.watch(path.html.src, html)
  gulp.watch(path.css.src, css)
  gulp.watch(path.js.src, js)
}
// gulp.series 是同步执行任务，第一个执行完了才能执行第二个
// gulp.parallel 是异步执行任务，多个任务同时运行
module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, img, libs, server, watch))

package.json

{
  "name": "for-my-rose-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Dary",
  "license": "ISC",
  "dependencies": {
    "gulp": "^4.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "del": "^5.1.0",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-connect": "^5.7.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-sass": "^4.1.0",
    "gulp-uglify": "^3.0.2",
    "http-proxy-middleware": "^1.0.4",
    "node-sass": "^4.14.1"
  }
}

转载：http://www.xiongdalin.com/2019/12/27/gulp4/