什么是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'));
});
网友评论