npm install -g gulp // 全局安装gulp命令
npm install --save-dev gulp // 在项目中安装依赖
项目依赖
"devDependencies": {
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.0.0",
"gulp-imagemin": "^3.4.0",
"gulp-load-plugins": "^1.5.0",
"gulp-rev": "^8.0.0",
"gulp-rev-collector": "^1.2.2",
"gulp-sequence": "^0.4.6",
"gulp-uglify": "^3.0.0",
"open": "0.0.5"
}
在项目的根目录中创建gulpfile.js 文件（代码可以根据实际 需要修改）
代码实例
'use strict';
// 载入外挂
// var gulp = require('gulp'),
// browserify = require('browserify'),//这里用不上，管理js依赖的
// source = require('vinyl-source-stream'),//同样这里用不上，和上面那个一起的
// uglify = require('gulp-uglify'),//混淆js
// clean = require('gulp-clean'),//清理文件
// notify = require('gulp-notify'),//加控制台文字描述用的
// buffer = require('vinyl-buffer'),
// less = require('gulp-less'),//转换less用的
// autoprefixer = require('gulp-autoprefixer'),//增加私有变量前缀
// minifycss = require('gulp-minify-css'),//压缩
// concat = require('gulp-concat'),//合并
// fileinclude = require('gulp-file-include'),// include 文件用
// template = require('gulp-template'),//替换变量以及动态html用
// rename = require('gulp-rename'),//重命名
// webserver = require('gulp-webserver'),//一个简单的server，用python的SimpleHttpServer会锁文件夹
// imagemin = require('gulp-imagemin'),//图片压缩
// gulpif = require('gulp-if'),//if判断，用来区别生产环境还是开发环境的
// rev = require('gulp-rev'),//加MD5后缀
// revReplace = require('gulp-rev-replace'),//替换引用的加了md5后缀的文件名，修改过，用来加cdn前缀
// addsrc = require('gulp-add-src'),//pipeline中途添加文件夹，这里没有用到
// del = require('del'),//也是个删除···
// vinylPaths = require('vinyl-paths'),//操作pipe中文件路径的，加md5的时候用到了
// runSequence = require('run-sequence');//控制task顺序
//引入gulp
var gulp = require('gulp'),
concat = require('gulp-concat'),
connect = require('gulp-connect'),
imagemin = require('gulp-imagemin'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector'),
clean = require('gulp-clean'),//清理文件
runSequence = require('gulp-sequence'),
uglify = require('gulp-uglify');//混淆js;
//这样的话 其他的模块可以直接使用 $ 符号来引入
// var $ = require('gulp-load-plugins')();
var open = require('open');
// 定义目录路径
var app = {
// 源代码
srcPath: 'src/',
// 预发布环境
buildPath: 'build/',
// 项目，发布目录上产部署
distPath: 'dist/'
}
// 将html拷贝到distPath中
// gulp.task('views', function(){
// gulp.src(app.srcPath + 'views/**/*.html')
// .pipe(revCollector())
// .pipe(gulp.dest(app.distPath + 'views'))
// .pipe(connect.reload());
// })
// 将html拷贝到distPath中
gulp.task('html', ['script'], function(){
gulp.src(['./rev/*.json', app.srcPath + 'index.html'])
.pipe(revCollector())
.pipe(gulp.dest(app.distPath))
.pipe(connect.reload());
gulp.src(app.srcPath + 'views/**/*.html')
.pipe(revCollector())
.pipe(gulp.dest(app.distPath + 'views'))
.pipe(connect.reload());
})
// 将js文件生成之后再 生成
//将 模拟的json 文件 拷贝到 devPath prdPath中
gulp.task('json',function(){
gulp.src(app.srcPath + 'data/**/*.json')
.pipe(gulp.dest(app.distPath + 'data'))
.pipe(connect.reload());
});
//将 index.less 文件 拷贝到 devPath prdPath中，index.less引入了所有的其他的less
gulp.task('less', function () {
gulp.src(app.srcPath+'style/index.less')
.pipe(less())
.pipe(cssmin())
.pipe(gulp.dest(app.distPath + 'css'))
.pipe(connect.reload());
})
// 拷贝 js 文件 将所有的源文件中的js 文件整合成index.js 然后拷贝过去
gulp.task('script',function(){
return gulp.src(app.srcPath + 'js/**/*.js')
.pipe(concat('index.js'))
.pipe(gulp.dest(app.srcPath + 'js'))
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest(app.distPath + 'js'))
.pipe(rev.manifest()) //- 生成一个rev-manifest.json
.pipe(gulp.dest('./rev'))
.pipe(connect.reload());
});
//拷贝 压缩 图片 最后放到发布目录下
gulp.task('image',function(){
gulp.src(app.srcPath + 'imgs/**/*.jpg')
.pipe(gulp.dest(app.distPath + 'imgs'))
.pipe(connect.reload());
});
//总的方法
// gulp.task('build',['image', 'script', 'less', 'json', 'html', 'lib']);
// gulp.task('build',['image', 'script', 'less', 'json', 'html', 'lib']);
// gulp.task('build', function (cb) {
// runSequence('clean', 'image', 'script', 'html')(cb);
// });
gulp.task('build', ['image', 'html']);
//清除旧文件，每次更新的时候
gulp.task('clean',function(){
gulp.src([app.distPath, './rev/'])
.pipe(clean());
})
//编写服务
gulp.task('serve', ['build'], function() {
connect.server({
//服务起来的入口
root: [app.distPath],
//文件更改后自动刷新页面
livereload: true,
//端口号
port: 1234
});
// 在 命令工具中执行 gulp serve 就相当于是启动了服务
//自动打开浏览器
open('http://localhost:1234/');
//监听 script 下边的 js 文件，并执行 script 方法
gulp.watch(app.srcPath + 'js/**/*.js', ['html']);
gulp.watch(app.srcPath + '**/*.html', ['html']);
gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
gulp.watch(app.srcPath + 'imgs/**/*', ['image']);
//这样文件变更了就会自动构建
});
//默认执行的任务，直接 执行 gulp 变行了。都编写完成后再终端 执行 gulp 便可以了。
gulp.task('default', ['serve']);