一、基本安装
1、安装gulp
1 $ npm install --global gulp
2、作为项目的开发依赖安装
1 $ npm install --save-dev gulp
3、在项目根目录下创建 gulpfile.js 的文件
1 var gulp = require(‘gulp‘)2 3 gulp.task(‘default‘,function(){4 ?????//将你的默认任务代码放在这里5 })4、运行gulp:
$ gulp
以下文章参考来源：作者：Rin阳 链接：https://www.jianshu.com/p/98db023b5b89
二、前端自动化Gulp工具常用插件
1、gulp-uglify(JS压缩)
gulp-uglify安装：
npm install --save-dev gulp-uglify
gulp-uglify用来压缩js文件，使用的是uglify引擎
var gulp = require(‘gulp‘); ?//加载gulpvar uglify = require(‘gulp-uglify‘); ?//加载js压缩// 定义一个任务 minifyjsgulp.task(‘minifyjs‘, function () { ???gulp.src([‘js/*.js‘,‘!js/*.min.js‘]) ?//获取文件，同时过滤掉.min.js文件 ???????.pipe(uglify()) ??//压缩 ???????.pipe(gulp.dest(‘dist/js‘)); ??//输出});
2、gulp-minify-css(css压缩)
gulp-minify-css安装：
npm install --save-dev gulp-minify-css
可以使用它来压缩css文件
var gulp = require(‘gulp‘);var minify = require(‘gulp-minify-css‘);gulp.task(‘cssmini‘, function () { ???gulp.src([‘css/*.css‘, ‘!css/*.min.css‘]) ?//要压缩的css ???????.pipe(minify()) ???????.pipe(gulp.dest(‘dist/css‘));});3、gulp-minify-html(html压缩)
gulp-minify-html 安装：
npm install --save-dev gulp-minify-html
可以使用它来压缩html文件
var gulp = require(‘gulp‘);var htmlmini = require(‘gulp-minify-html‘);gulp.task(‘htmlmini‘, function () { ???gulp.src(‘*.html‘) ???????.pipe(htmlmini()) ???????.pipe(gulp.dest(‘dist/minihtml‘));})4、gulp-imagemin(图片压缩)
gulp-minify-html 安装：
npm install --save-dev gulp-imagemin
可以使用gulp-imagemin的插件来压缩jpg、png、gif等图片。（imagemin也是有插件的，是基于imagemin产生的插件，所以前缀是imagenin开头）
压缩png插件-imagemin-pngquant安装：
npm install --save-dev imagemin-pngquant
gulipfile.js:
var gulp = require(‘gulp‘);var imagemin = require(‘gulp-imagemin‘);var pngquant = require(‘imagemin-pngquant‘); //png图片压缩插件gulp.task(‘default‘, function () { ???return gulp.src(‘src/images/*‘) ???????.pipe(imagemin({ ???????????progressive: true, ???????????use: [pngquant()] //使用pngquant来压缩png图片 ???????})) ???????.pipe(gulp.dest(‘dist/imgmini‘));});5、gulp-concat(文件合并)
gulp-concat 安装：
npm install --save-dev gulp-concat
合并css与js文件，减少http请求
var gulp = require(‘gulp‘);var concat = require("gulp-concat"); gulp.task(‘concat‘, function () { ???gulp.src(‘js/*.js‘) ?//要合并的文件 ???.pipe(concat(‘all.min.js‘)) ?// 合并匹配到的js文件并命名为 "all.js" ???.pipe(uglify()) //压缩 ???.pipe(gulp.dest(‘dist/js‘)); //输出});6、gulp-css-spriter(合成雪碧图)
gulp-css-spriter安装：
npm install gulp-css-spriter
gulpfile.js文件：
var gulp = require(‘gulp‘);
var spriter=require(‘gulp-css-spriter‘);
gulp.task(‘spriter‘,function(){ ???gulp.src(‘./src/assets/css/user.css‘) ???????.pipe(spriter({ ???????????‘spriteSheet‘:‘dist/imgmin/spritesheet.png‘,// 这是雪碧图自动合成的图 ???????????‘pathToSpriteSheetFromCSS‘:‘../../../dist/imgmin/spritesheet.png‘// 这是在css引用的图片路径 ???????})) ???????.pipe(gulp.dest(‘./dist/css‘));// 输出}) 7、执行多个任务、监听文件变化
gulp.task(‘build‘,[‘minifyjs‘,‘imagemin‘,‘cssmin‘]);// 监听文件变化 gulp.task(‘watch‘, function () { ????gulp.watch([‘static/mui/js/*.js‘,‘static/*.js‘,‘!static/mui/js/*.min.js‘,‘src/assets/img/*‘], [‘build‘]);// });gulp.task(‘default‘, [‘build‘,‘watch‘]);gulp.js 自动化构建工具学习入门
原文地址：http://www.cnblogs.com/hDanny/p/8087629.html