自动化打包工具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/"))
});