自动化打包工具gulp

GULP

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

安装gulp

gulp 是一个依赖于 node 的环境工具
所以我们需要先安装一个 全局 gulp 依赖
直接使用 npm 去安装就可以了
在控制面版输入 npm install gulp -g 进行全局安装
输入gulp --version 可以检查是否安装成功，如果成功会显示版本

使用 GULP

安装完毕以后，我们就可以使用 GULP 对我们的项目进行自动化构建了

首先我们要有一个项目

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

目录结构不一定都是这个样子
但是最好是一个便于管理的文件夹目录结构
因为是一个项目了，最好使用 npm 来帮我们管理一下
- 这样可以记录我们的下载使用了那些依赖
所以在项目文件夹 gulp-demo 里面执行一个 npm 初始化

 cd gulp_demo
 npm init -y

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

- gulp_demo
  + src 
  + package.json

项目 GULP 配置

我们之前已经安装过 gulp 全局依赖了
但是每一个项目都要在安装一次 gulp 的项目依赖
因为每一个项目的打包构建规则都不一样，所以不能全都配置成一个
所以我们要在项目里面再次进行 gulp 安装
```
$ cd gulp_demo
$ 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文件

在gulpfile.js进行配置，先引入gulp,对相应css文件进行压缩处理，需要在局部下载一个第三方依赖npm i gulp-cssmin -D

//1.引入gulp

const gulp = require('gulp")

//2.引入gulp-cssmin

const cssmin = require('gulp-cssmin')

//3.创建一个css任务，gulp.task()是用来创建任务的，参数一任务名，参数二函数（要做什么）

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

//4.在控制台使用指令  gulp css

gulp.src() 是指找到那些文件对其操作
gulp.pipe() 是指要做什么
gulp.dest() 是指输出到哪个目录下，如果没有这个目录存在会自动创建这个目录
执行完毕以后，就会在 gulp_demo 目录下生成一个 dist/ 文件夹，里面就有我们压缩好的 css 文件

自动添加前缀

我们希望在压缩css之前，能帮我们自动把前缀属性添加上，还需要在局部下载一个第三方依赖npm i gulp-autoprefixer -D

//1.引入gulp

const gulp = require('gulp")

//2.引入gulp-cssmin

const cssmin = require('gulp-cssmin')

//2-1 引入gulp-autoprefixer

const autoPrefixer = require('gulp-autoprefixer')

//3.创建一个css任务，gulp.task()是用来创建任务的，参数一任务名，参数二函数（要做什么）

gulp.task('css', function () {
    return gulp
    	.src('./src/css/**')   
    	.pipe(autoPrefixer({
        	browsers: ['cover 99.5%']
    	}))
    	.pipe(cssmin())       
    	.pipe(gulp.dest('./dist/css'))  
})

打包 JS 文件

也需在局部要下载一个依赖 npm i gulp-ugligy -D

// 我是 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')
//  引入 gulp-uglify
const uglify = require('gulp-urlify')


// 2-1. 创建一个 css 的任务
gulp.task('css', function () {
    return gulp
    	.src('./src/css/**')   
    	.pipe(autoPrefixer({
        	browsers: ['cover 99.5%']
    	}))
    	.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'))
})

处理html

下载依赖 npm i gulp htmlmin -D
const options = {
    collapseBooleanAttributes:true, //去掉属性为布尔值得属性值
    collapseWhitespace:true, //压缩空白空间
    minifyCSS:true,//压缩style标签css
    removeAttributeQuotes:true,//去掉属性之引号
    removeComments:true,//移除注释
    removeEmptyAttributes:true//移除空的属性
}

// 处理html
gulp.task('html',()=>{
    return gulp.src("./src/pages/*.html")
    .pipe(htmlmin(options))
    .pipe(gulp.dest("./dist/pages/"))
})

处理图片资源

局部下载以来 npm i gulp-imagemin -D
const imgmin = require("gulp-imagemin")

gulp.task("img",()=>{
return gulp.src("./src/images/*")
.pipe(imgmin())
.pipe(gulp.dest("./dist/images/"))
});