gulp 使用教程

一 简介

• gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
• gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

 安装nodejs

说明：gulp是基于nodejs，理所当然需要安装nodejs；

安装：打开nodejs官网（https://nodejs.org/en/），点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（windows系统下载.msi文件）。

• tips:安装完成之后注意将其配置到环境变量（系统变量path中），这样你就可以在全局范围内去使用它了

测试：按window + r 输入cmd回车，然后输入node -v

         然后输入npm -v 

          如果都能打印出相应版本信息，那么说明你配置成功了

成功安装显示如下:

 选装cnpm

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。

淘宝npm镜像网址：http://npm.taobao.org 

安装：使用命令执行

npm install cnpm -g --registry=https://registry.npm.taobao.org 

tips:

• 安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误
• cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm)

安装完成如下:

 生成项目描述文件 package.json

命令 :

• npm init
• cnpm init (可代替 npm init)

（需要项目名称、版本号、描述、入口文件、运行命令、作者、证书 ---- 一路按回车即可）

//得到的 package.json 如下

{
  "name": "gulp",      项目名称(必须)         
  "version": "1.0.0",  项目版本(必须)
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

二 全局安装gulp

命令 : cnpm i gulp@3 -g

全局安装gulp

@3 代表选择了 3 的版本

i 即为 install

-g 即为 --global

测试是否安装成功:gulp -v

三 当前目录内部安装 gulp 模块

命令:
cnpm i gulp@3 -D

cnpm i gulp@3 -S （二者选择其一即可）

-D 缩写 --save-dev 开发依赖

-S 缩写 --save 项目依赖

开发依赖： 开发过程中需要使用到的依赖的模块，项目上线时不需要的模块 --- 代码格式校验的模块

项目依赖： 项目上线仍然需要使用的模块

----- 如果不知道怎么选择，那你就写 -S

成功安装如下:

四 创建文件 gulpfile.js ,配置gulp

const gulp = require('gulp');

4.1 创建 index.html，使用gulp完成对于index.html的复制操作，复制到当前目录的dist目录内

//+++
// 复制index.html 到 dist 目录
gulp.task('copy-index', function () {
    gulp.src('./index.html')
        .pipe(gulp.dest('dist'))
})

命令行执行了 gulp copy-index 发现多了 dist目录，且目录下有一份一样的index文件

4.2 gulp/css/a.css + gulp/css/b.css

4.2.1 复制 gulp/css 至 dist/css

拿到css文件夹下所有文件

gulp.src('./css/**/*')

拷贝css文件夹下的所有文件以及文件夹内的文件

//+++
gulp.task('copy-css', function () {
    gulp.src('./css/**/*')
        .pipe(gulp.dest('dist/css'))  //所有文件拷贝到dist文件加内
})

指令:gulp copy-css

4.2.2 合并css文件

安装合并模块

指令:cnpm i gulp-concat -S

合并代码如下:

//++++
const concat = require('gulp-concat');  //引入合并模块
gulp.task('copy-css', function () {
    gulp.src('./css/**/*') // 拿到所有的css
        // ++++
        .pipe(concat('main.css')) // 合并
        .pipe(gulp.dest('dist/css'))
})

4.2.3 压缩css

安装压缩模块

指令:cnpm i gulp-minify-css -S

// ++++
const minifyCss = require('gulp-minify-css');  //引入压缩模块
gulp.task('copy-css', function () {
    gulp.src('./css/**/*') // 拿到所有的css
        .pipe(concat('main.css')) // 合并
        // ++++
        .pipe(minifyCss()) // 压缩
        .pipe(gulp.dest('dist/css'))
})

4.2.4 既要 未压缩的也要有压缩的

安装重命名模块

cnpm i gulp-rename -S

重命名

合并代码放到dist/css

压缩css 重命名 再放到dist/css

//+++
const rename = require('gulp-rename');  //引入重命名模块
gulp.task('copy-css', function () {
    gulp.src('./css/**/*') // 拿到所有的css
        .pipe(concat('main.css')) // 合并
        //+++
        .pipe(gulp.dest('dist/css'))
        .pipe(minifyCss()) // 压缩
        //+++
        .pipe(rename('main.min.css'))  //重命名为main.min.css
        .pipe(gulp.dest('dist/css'))
})

5.3 gulp/js/a.js + gulp/js/b.js

5.3.1 复制gulp/js 至 dist/js

本质也是文件的合并,操作方法一致

gulp.task('copy-js', () => {
    gulp.src('./js/**/*')
        .pipe(gulp.dest('dist/js'))
})

5.3.2 合并js代码至 dist/js

本质也是文件的复制,操作方法一致

gulp.task('copy-js', () => {
    gulp.src('./js/**/*')
        // +++
        .pipe(concat('main.js'))
        .pipe(gulp.dest('dist/js'))
})

5.3.3 压缩js

需要下载压缩js模块

指令: cnpm i gulp-uglify -S

//引用压缩js模块
const uglify = require('gulp-uglify');

gulp.task('copy-js', () => {
    gulp.src('./js/**/*')
        .pipe(concat('main.js')) // 合并js
        // +++
        .pipe(uglify()) // 压缩js
        .pipe(gulp.dest('dist/js'))
})

5.3.4 合并压缩重命名

gulp.task('copy-js', () => {
    gulp.src('./js/**/*')
        .pipe(concat('main.js')) // 合并js
        // +++
        .pipe(gulp.dest('dist/js'))
        .pipe(uglify()) // 压缩js
        // +++
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest('dist/js'))
})

5.4 gulp/assets --- 图片

5.4.1 复制图片至 dist/assets

//+++
gulp.task('copy-images', () => {
    gulp.src('./assets/**/*')
        .pipe(gulp.dest('dist/assets'))
})

5.4.2 压缩图片

需要下载压缩图片模块

指令:cnpm i gulp-imagemin -S

//引入压缩图片模块
const imagemin = require('gulp-imagemin');
gulp.task('copy-images', () => {
    gulp.src('./assets/**/*')
        // +++
        .pipe(imagemin()) // 压缩图片
        .pipe(gulp.dest('dist/assets'))
})

5.5 处理数据 data/home.json data/kind.json

没有后端接口时，自己的模拟数据

数据的复制 ,与文件的复制一样

// +++
gulp.task('copy-data', () => {
    gulp.src('./data/**/*')
        .pipe(gulp.dest('dist/data'))
})

6、一次性执行多个任务

任务的名称不要自己随意定义，就写build

// +++
gulp.task('build', ['copy-index', 'copy-css', 'copy-js', 'copy-images', 'copy-data'], () => {
    console.log('success')
})

7、gulp 服务器

下载服务器模块

指令:cnpm i gulp-connect -S

tip: server 任务名不能更改

//+++
gulp.task('server', () => {
    connect.server({
        // 说明服务器的根目录
        root: 'dist',
        livereload: true // 实时更新
    })
})

8、检测html文件、css文件、js文件、图片、数据的改变，执行不同的任务

任务监听,可以监听任务的改动

// +++
gulp.task('watch', () => {
    gulp.watch('index.html', ['copy-index'])
    gulp.watch('css/**/*', ['copy-css'])
    gulp.watch('js/**/*', ['copy-js'])
    gulp.watch('assets/**/*', ['copy-images'])
    gulp.watch('data/**/*', ['copy-data'])
})

9、同时默认执行 server 任务 和 watch 任务

gulp.task('default', ['server', 'watch'])

gulp

10、热更新 --- 主动更新页面

在页面、css、js、图片、数据相关任务最后执行一句话，重新启动服务器

实现更改文件后,页面实时更新

gulp.task('copy-data', () => {
   gulp.src('./data/**/*')
       .pipe(gulp.dest('dist/data'))
       .pipe(connect.reload()) //*********************************************
})