什么是GULP?

            GULP 是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能

对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使

用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率

安装GULP

Gulp 是基于 node.js 环境运行的，所以我们首先需要安装 node.js 环境

Node.js的安装

1. 下载 nodejs 安装包

2到 nodejs 官网下载软件 https://nodejs.org

安装 Nodejs

在 Window 系统中直接下一步下一步式安装。安装好后 WIN+R 输入 cmd 调出 DOS 窗

口，输入 node -v 看看是否有版本信息，如果没有则查看系统变量 Path，把 path 配置上

去

如果在 cmd 中能够输出上图的信息，说明 node.js 的环境已经安装成功了，下面就可以

开始 gulp 的安装了

3. 推荐安装 cnpm

安装 cnpm

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

3.2 检测 cnpm 是否安装成功

执行 cnpm -v 显示版本号即安装成功

gulp  的安装

全局安装  gulp

打开 Node.js command prompt 或者 cmd 命令提示符

输入命令：npm install –g gulp

然后输入 gulp -v，看看是否有版本信息

项目文件根目录新建 package.json

注：package.json 是基于 nodejs 项目必不可少的配置文件，它是存放在项目根目录的普通 json

文件重点内容

  进入你的项目文件

示例：进入 D:/WWW/test 项目文件夹中

gulp 安装教程，使用教程，简单的自动化任务教程

执行命令 cnpm init 来新建 package.json

gulp 安装教程，使用教程，简单的自动化任务教程

检测 package.json 是否成功新建

查看项目文件根目录，是否新建 package.json，且内容是否和你终端中输入的一致。

注：可不使用 cnpm init 方式，可选择手动创建 package.json 配置文件

本地安装

建立项目，创建 gulpfile.js 和 package.json 文件。运行命令

cnpm install gulp --save-dev

安装本地 gulp。

---

安装相关插件

Gulp 提供了大量的常用插件，供我们使用，下面列举一些大家可能经常要使用的插件：

  sass 的编译（gulp-sass）

  less 编译 （gulp-less）

  重命名（gulp-rename）

  自动添加 css 前缀（gulp-autoprefixer）

  压缩 css（gulp-clean-css）

  js 代码校验（gulp-jshint）

  合并 js 文件（gulp-concat）

  压缩 js 代码（gulp-uglify）

  压缩图片（gulp-imagemin）

  自动刷新页面（gulp-livereload，谷歌浏览器亲测，谷歌浏览器需安装 livereload 插件）

  图片缓存，只有图片替换了才压缩（gulp-cache）

  更改提醒（gulp-notify）

---

less 和 和 sass  的编译（gulp-less ，gulp-sass ）

less 使用 gulp-less,安装：cnpm install –save-dev gulp-less

在 Gulpfile.js 执行如下代码：

var gulp = require('gulp'),

less = require("gulp-less");

gulp.task('test-less', function () {

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

.pipe(less())

.pipe(gulp.dest('dist/css'));

});

Sass  插件：

sass 使用 gulp-sass,安装：npm install –save-dev gulp-sass

在 Gulpfile.js 执行如下代码：

var gulp = require('gulp'),

sass = require("gulp-sass");

gulp.task('test-sass', function () {

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

.pipe(sass())

.pipe(gulp.dest('dist/css'));

});

---

压缩 HTML  页面 （gulp-htmlmin ）

Gulp-htmlmin 插件的安装：

cnpm install gulp-htmlmin --save-dev

安装成功后，我们在 gulpfile.js 中编写代码，完成页面的压缩：

var gulp = require("gulp");//gulp模块var gulp_htmlmin = require('gulp-htmlmin');//gulp-htmlmin插件模块//test-htmlmin任务gulp.task("test-htmlmin",function(){var options = {removeComments: true,//清除HTML注释collapseWhitespace: true,//压缩HTMLcollapseBooleanAttributes: true,//省略布尔属性的值==>removeEmptyAttributes: true,//删除所有空格作属性值==>removeScriptTypeAttributes: true,//删除的type="text/javascript"removeStyleLinkTypeAttributes: true,//删除和的type="text/css"minifyJS: true,//压缩页面JSminifyCSS: true//压缩页面CSS};gulp.src("src/*.html").pipe(gulp_htmlmin(options)).pipe(gulp.dest("dest/"))});

执行命令：

gulp test-htmlmin

---

使用 gulp-autoprefixer 根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇

洒地写代码，不必考虑各浏览器兼容前缀。【特别是开发移动端页面时，就能充分体现它的

优势。例如兼容性不太好的 flex 布局。】

本地安装 gulp-autoprefixer

cnpm install gulp-autoprefixer --save-dev

之后在 gulpfile.js 中书写任务：

var gulp = require("gulp");//gulp模块

var gulp_less = require("gulp-less");//gulp-less插件模块

var gulp_sass = require("gulp-sass");//gulp-sass插件模块

var gulp_htmlmin = require('gulp-htmlmin');//gulp-htmlmin插件模块

var autoprefixer = require('gulp-autoprefixer');//autoprefixer插件模块

//test-autoprefixer任务

gulp.task("test-autoprefixer",function(){

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

.pipe(autoprefixer({

browsers: ['last 2 versions', 'Android >= 4.0'],

cascade: true, //是否美化属性值 默认：true 像这样：

//-webkit-transform: rotate(45deg);

// transform: rotate(45deg);

remove:true //是否去掉不必要的前缀 默认：true

}))

.pipe(gulp.dest("dest/css/"))

});

在 cmd 中执行命令：

gulp test-autoprefixer

使用 gulp-minify-css 压缩 css 文件，减小文件大小，并给引用 url 添加版本号避免缓存。

重要：gulp-minify-css 已经被废弃，请使用 gulp-clean-css，用法一致。

本地安装 gulp-minify-css

github：https://github.com/jonathanepollack/gulp-minify-css

命令提示符执行 cnpm install gulp-minify-css --save-dev

//引入所需的模块

var gulp = require("gulp");//gulp模块

var gulp_less = require("gulp-less");//gulp-less插件模块

var gulp_sass = require("gulp-sass");//gulp-sass插件模块

var gulp_htmlmin = require('gulp-htmlmin');//gulp-htmlmin插件模块

var autoprefixer = require('gulp-autoprefixer');//autoprefixer插件模块

var cssmin_minify = require('gulp-minify-css');

var cssmin_clean = require('gulp-clean-css');

//确保已本地安装gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev]

var cssver = require('gulp-make-css-url-version');

//test-minify任务

gulp.task("test-minify",function(){

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

.pipe(cssmin_minify({

advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]

compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式；

'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]

keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]

keepSpecialComments: '*'

//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部

分前缀

}))

.pipe(gulp.dest("dest/css/"))

});

给 css 文件里引用 url 加版本号（根据引用文件的 md5 生产版本号），像这样：

//确保已本地安装gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev]

var cssver = require('gulp-make-css-url-version');

//cssmin_clean任务

gulp.task('test-cssmin', function () {

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

.pipe(cssver()) //给css文件里引用文件加版本号（文件MD5）防止缓存

.pipe(cssmin_clean())

.pipe(gulp.dest('dest/css'));

});

---

使用 gulp-uglify 压缩 javascript 文件，减小文件大小。

本地安装 gulp-uglify

github：https://github.com/terinjokes/gulp-uglify

命令提示符执行 cnpm install gulp-uglify --save-dev

gulpfile.js 文件：

gulp.task('jsmin', function () {

gulp.src('src/js/index.js')

.pipe(uglify())

.pipe(gulp.dest('dist/js'));

});

如果有多个文件压缩：

//多个文件

gulp.task('jsmin', function () {

gulp.src(['src/js/index1.js','src/js/login.js','src/js/js1.js','src/js/omg.js'])

//多个文件以数组形式传入

.pipe(uglify())

.pipe(gulp.dest('dest/js'));

});

也可以使用匹配方式：

//排除排除混淆关键字，多个参数

gulp.task('jsmin', function () {

//压缩src/js目录下的所有js文件

//除了test1.js和test2.js（**匹配src/js的0个或多个子文件夹）

gulp.src(['src/js/*.js', '!src/js/**/*.js'])

.pipe(uglify({

// mangle: true,//类型：Boolean 默认：true 是否修改变量名

mangle: {except: ['require' ,'exports' ,'module' ,'$']},//排除混淆关键字

compress: true,//类型：Boolean 默认：true 是否完全压缩

preserveComments: 'all' //保留所有注释

}))

.pipe(gulp.dest('dest/js'));

})

---

使用 gulp-concat 合并 javascript 文件，减少网络请求。

本地安装 gulp-concat

github：https://github.com/wearefractal/gulp-concat

命令提示符执行 cnpm install gulp-concat --save-dev

gulpfile.js 文件：

var concat = require('gulp-concat');

//合并js文件

gulp.task('test_concat', function () {

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

.pipe(concat('all.js'))//合并后的文件名

.pipe(gulp.dest('test/js'));

});

使用 gulp-imagemin 压缩图片文件（包括 PNG、JPEG、GIF 和 SVG 图片）。注意：安装时

很容易出错的。

本地安装 gulp-imagemin

github：https://github.com/sindresorhus/gulp-imagemin

命令提示符执行 cnpm install gulp-imagemin --save-dev

gulpfile.js 文件：

基本压缩：

var concat = require('gulp-concat');

//合并js文件

gulp.task('test_concat', function () {

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

.pipe(concat('all.js'))//合并后的文件名

.pipe(gulp.dest('test/js'));

});

gulp-imagemin 其他参数：

gulp.task('testImagemin', function () {

gulp.src('src/img.{png,jpg,gif,ico}')

.pipe(imagemin({

optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）

progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片

interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染

multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化

}))

.pipe(gulp.dest('dest/img'));

});

深度压缩图片

var imagemin = require('gulp-imagemin');

//确保本地已安装imagemin-pngquant [cnpm install imagemin-pngquant --save-dev]

var pngquant = require('imagemin-pngquant');

//深度压缩图片

gulp.task('testImagemin', function () {

gulp.src('src/img/*.{png,jpg,gif,ico}')

.pipe(imagemin({

progressive: true,

svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性

use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件

}))

.pipe(gulp.dest('dest/img'));

});

只压缩修改的图片。压缩图片时比较耗时，在很多情况下我们只修改了某些图片，没有

必要压缩所有图片，使用”gulp-cache”只压缩修改的图片，没有修改的图片直接从缓存文

件读取（C:\Users\Administrator\AppData\Local\Temp\gulp-cache）：

//确保本地已安装imagemin-pngquant [cnpm install imagemin-pngquant --save-dev]

var pngquant = require('imagemin-pngquant');

//确保本地已安装gulp-cache [cnpm install gulp-cache --save-dev]

var cache = require('gulp-cache');

gulp.task('testImagemin', function () {

gulp.src('src/img/*.{png,jpg,gif,ico}')

.pipe(cache(imagemin({

progressive: true,

svgoPlugins: [{removeViewBox: false}],

use: [pngquant()]

})))

.pipe(gulp.dest('dest/img'));

});

---