gulp基本使用

node.js 安装 ， 官网下载msi文件安装即可

node -v 查看版本

npm 安装node.js的时候自带的，包管理器（包的安装、卸载等）

安装包命令：npm install 包名称 --save-dev 
--save: 将保存配置到package.json
-dev:保存至package.json的devDependencies节点

安装国内淘宝源

npm config set registry https://registry.npm.taobao.org
npm config get registry 

选装cnpm

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

安装gulp

全局安装
cnpm install gulp -g
gulp -v

配置文件package.json

cnpm init

项目里面安装gulp（即为本地安装）

cnpm install gulp --save -dev

安装gulp插件

cnpm install gulp-less --save-dev

项目里面新建

src/
	css/
	less/
gulpfile.js

gulpfile.js文件代码

// 导入包
var gulp = require('gulp'),
	less = require('gulp-less');
gulp.task('test',function(){
	gulp.src('src/less/index.less')
		.pipe(less())
		.pipe(gulp.dest('src/css'))
});
gulp.task('default',['test']);

gulp API

** 
	定义任务
	name:任务名
	deps:每一个依赖的任务名
	fn:回调
**
gulp.task(name, [,deps], fn)

**
	执行任务处理的文件
	globs :处理的文件路径（字符串或者数组）
** 	
gulp.src( globs[,option])

**
	处理完后文件的生成路径
**
gulp.dest(globs[,option])

执行任务(cmd执行下面命令)

gulp taskname

实战：安装gulp插件

定义站点目录

/project
	|-- dist
	|	|-- scripts
	|	|-- styles
	|	|-- images
	|	|-- fonts
	|	`-- index.html
	|--src
	|	|-- scripts
	|	|-- styles
	|	|-- images
	|	|-- fonts
	|	`--index.html
	|	|gulpfile.js
	|	|package.json
	`--README.md

安装gulp-concat 插件 减少网络请求

cnpm install gulp-concat --save-dev

配置gulpfile.js

var gulp = require('gulp'),
	concat = require('gulp-concat');
gulp.task('concat',function({
	gulp.src('src/scripts/*.js')
		.pipe(concat('all.js')) //合并后的文件名
		.pipe(gulp.dest('dist/scripts'));
}))

执行任务

gulp concat

安装gulp-uglify 插件 减少文件大小

cnpm install gulp-uglify --save-dev

配置gulpfile.js

var gulp = require('gulp'),
	uglify = require('gulp-uglify');
gulp.task('uglify',function(){
	gulp.src('src/scripts/*.js')
		.pipe(uglify())
		.pipe('dist/scripts')
})

执行任务

gulp uglify

安装 gulp-clean-css 插件 减小css文件大小, 并给引用url添加版本号避免缓存

cnpm install gulp-clean-css --save-dev

配置gulpfile.js

var gulp = require('gulp'),
	cleanCss = require('gulp-clean-css');
gulp.task('cleanCss',function(){
	return gulp.src('src/styles/*.css')
				.pipe(cleanCss())
				.pipe(gulp.dest('dist/styles'));
})

执行任务

gulp cleanCss

安装 gulp-imagemin 插件 压缩图片文件（jpg,png,gif,svg）

cnpm install gullp-imagemin --save-dev

配置文件gulpfile.js

var gulp = require('gulp'),
	imagemin = require('gulp-imagesmin');
gulp.task('imagemin',function(){
	gulp.src('src/images/*.{png,jpg,git,ico}')
		.pipe(imagesmin())
		.pipe(gulp.dest('dist/images'))
})

执行任务

gulp imagesmin

安装 gulp-htmlmin 插件 可以压缩js、css、去除页面空格、注释、删除多余属性

cnpm install gulp-htmlmin

配置gulpfile.js

var gulp = require('gulp'),
	htmlmin = require('gulp-htmlmin');
gulp.task('htmlmin',function(){
	var option = {
		removeComments:true,
		collapseWhitespace:true,
		collapseBooleanAttributes:true,
		removeEmtryAttributes:true,
		removeScriptTypeAttributes:true,
		removeStyleLinkTypeAttributes:true,
		minifyJS:true,
		miniCSS:true
	};
	return gulp.src('src/*.html')
				.pipe(htmlmin(option))
				.pipe(gulp.dest('dist'))
})

执行任务

gulp htmlmin

监听文件

配置gulpfile.js

gulp.task('watch',function(){
	gulp.watch('src/scripts/*.js',['scripts'])
})

执行任务

gulp watch