gulp是前端自动化工具，它可以进行html压缩、css压缩合并、js检查压缩、图片压缩、编译less、编译sass等，还可以自动完成开发过程中一些重复的的任务，使我们的工作效率大大的提高呀！那具体如何配置以及使用gulp呢?
1.安装node.js
1.1 因为gulp是基于node,所以首先我们需要搭建node环境。
这一步非常简单，进入node.js官网下载所对应的版本。
下载后傻瓜式安装即可。
1.2 打开命令行(window + r)
node -v 查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs
2.安装npm
2.1 npm是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）。
npm -v 查看npm版本号
2.2 使用npm安装插件
npm install gulp-less --save-dev 以安装less为例
2.3 由于npm安装插件是从国外服务器下载，可能出现异常，所以可以直接选择安装cnpm!
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm与npm的用法完全一致，执行命令时可以将npm用cnpm代替。
3.全局安装gulp
3.1 安装命令
cnpm install gulp -g
3.2 查看版本
gulp -v
4.新建pakage.json文件
4.1 package.json是基于nodejs项目必不可少的配置文件，存放在项目根目录下。
4.2 定位到项目文件
cd 项目文件位置
4.2 新建命令
cnpm init
然后一直回车，package.json就新建完成了。不过要注意的是此文件不能添加任何注释哦~
5.本地安装gulp
5.1 本地安装gulp（定位到项目文件）
cnpm install gulp --save-dev
在这里要跟大家说明的是全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp的插件。
5.2 安装插件
cnpm install gulp-sass --save-dev 以安装sass插件为例
cnpm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename gulp-jshint-html-reporter --save-dev 常用插件
6.新建gulpfile.js文件
6.1 gulpfile.js是gulp项目的配置文件, 基本如下：
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp');
var less = require('gulp-less'); //编译less
var sass = require('gulp-sass'); //编译sass
var htmlmin = require('gulp-htmlmin'); //html压缩
var minifycss = require('gulp-minify-css'); //css压缩
var concat = require('gulp-concat'); //文件合并
var uglify = require('gulp-uglify'); //js压缩
var rename = require('gulp-rename'); //重命名
var jshint = require('gulp-jshint'); //js检查
var imagemin = require('gulp-imagemin'); //压缩图片
var cache = require('gulp-cache'); //图片压缩缓存
var clean = require('gulp-clean'); //清空文件夹
var rev = require('gulp-rev'); //更改版本号
//定义一个less任务（自定义任务名称）
gulp.task('less', function () {
return gulp.src('./src/style.less') //需要操作的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('./dest')) //文件导出的位置
})
//定义一个sass任务（自定义任务名称）
gulp.task('sass', function () {
return gulp.src('./src/style2.scss')
.pipe(sass())
.pipe(gulp.dest('./dest'))
})
//语法检查
gulp.task('jshint', function () {
return gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
//压缩html
gulp.task('htmlmin', function () {
var options = {
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeComments: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
minifyJS: true,
minifyCSS: true
};
gulp.src('./src/html/*.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('html'));
});
//压缩css
gulp.task('minifycss', function () {
return gulp.src('./src/css/*.css')
.pipe(concat('main.css')) //合并所有css到all.css
.pipe(gulp.dest('css')) //输出文件夹
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(minifycss()) //执行压缩
.pipe(gulp.dest('css')); //输出文件夹
});
//压缩，合并 js
gulp.task('minifyjs', function () {
return gulp.src('./src/js/*.js')
.pipe(concat('event.js')) //合并所有js到main.js
.pipe(gulp.dest('js')) //输出到文件夹
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest('js')); //输出
});
//压缩图片
gulp.task('minifyImg', function () {
return gulp.src('./src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('image'));
})
//文件清理
//执行压缩前，先删除以前压缩的文件
gulp.task('clean', function () {
return del(['./css/all.css', './css/all.min.css', './lib/all.js', './lib/all.min.js'])
});
//定义默认任务
//压缩js需要在检查js之后操作
gulp.task('default', ['less', 'sass', 'jshint'], function () {
gulp.start('minifycss', 'minifyjs', 'minifyImg', 'htmlmin');
});
7.运行gulp
最后回到命令行，直接输入gulp即可运行！
gulp
网友评论