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
