项目使用的gulp自动化任务
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//定义输出文件夹名称 var distFolderH5 = "distH5"; var distFolderMofang = "distMofang"; //定义根目录路径 var baseUrl = "../"; //定义html目录路径 var tplUrl = "../tpl/"; //定义js目录路径 var jsUrl = "../js/"; //定义css目录路径 var cssUrl = "../css/"; //定义sass目录路径 var sassUrl = "../sass/"; //定义less目录路径 var lessUrl = "../less/"; //定义font目录路径 var fontUrl = "../fonts/"; //定义img目录路径 var imgUrl = "../img/"; //定义媒体目录路径 var mediaUrl = "../media/"; //定义第三方库目录路径 var libUrl = "../lib/"; //定义版本号文件输出根目录 var revDist = "../rev/"; //定义html版本号输出目录路径 var revTplUrl = "../rev/tpl/"; //定义js版本号输出目录路径 var revJsUrl = "../rev/js/"; //定义css版本号输出目录路径 var revCssUrl = "../rev/css/"; //定义font版本号输出目录路径 var revFontUrl = "../rev/fonts/"; //定义img版本号输出目录路径 var revImgUrl = "../rev/img/"; //定义媒体文件版本号输出目录路径 var revMediaUrl = "../rev/media/"; //定义第三方库版本号输出目录路径 var revLibUrl = "../rev/lib/"; setDistFolder(distFolderH5); function setDistFolder(distFolder){ //定义输出目录名称 distName = distFolder; //定义输出根目录 dist = "../"+distFolder+"/"; //定义html输出目录路径 distTplUrl = "../"+distFolder+"/tpl/"; //定义js输出目录路径 distJsUrl = "../"+distFolder+"/js/"; //定义css输出目录路径 distCssUrl = "../"+distFolder+"/css/"; //定义font输出目录路径 distFontUrl = "../"+distFolder+"/fonts/"; //定义img输出目录路径 distImgUrl = "../"+distFolder+"/img/"; //定义媒体输出目录路径 distMediaUrl = "../"+distFolder+"/media/"; //定义第三方库输出目录路径 distLibUrl = "../"+distFolder+"/lib/"; } var gulp = require('gulp'), //压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作 html = require('gulp-htmlmin'), //sass编译 sass = require('gulp-sass'), //对sass路径进行转换 slash = require('slash'), //less编译 less = require('gulp-less'), //css压缩 minifycss = require('gulp-clean-css'), //js压缩 uglify = require('gulp-uglify'), //文件合并 concat = require('gulp-concat'), //文件重命名 rename = require('gulp-rename'), //清空文件夹 clean = require('gulp-clean'), //压缩图片文件(包括PNG、JPEG、GIF和SVG图片) imagemin = require('gulp-imagemin'), pngquant = require('imagemin-pngquant'), //对文件名加MD5后缀 rev = require('gulp-rev'), //路径替换 revCollector = require('gulp-rev-collector'), //上传ftp服务器 ftp = require('gulp-ftp'), //上传sftp服务器 sftp = require('gulp-sftp'), //控制task顺序 gulpSequence = require('gulp-sequence'); //创建服务器 connect = require('gulp-connect'); //任务提醒 notify = require('gulp-notify'); //gulp-html参数配置 var htmlOptions = { //清除HTML注释 removeComments: true, //压缩HTML //collapseWhitespace: true, //省略布尔属性的值 <input checked="true"/> ==> <input /> collapseBooleanAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input /> removeEmptyAttributes: true, //删除<script>的type="text/javascript" removeScriptTypeAttributes: true, //删除<style>和<link>的type="text/css" removeStyleLinkTypeAttributes: true, //压缩页面JS //minifyJS: true, //压缩页面CSS //minifyCSS: true }; //tpl模板压缩 gulp.task('tpl',function(){ gulp.src(baseUrl+'index.html') .pipe(html(htmlOptions)) //.pipe(rev()) .pipe(gulp.dest(dist)) //.pipe(rev.manifest()) //.pipe(gulp.dest(revDist)) gulp.src(tplUrl+'**/*.html') .pipe(html(htmlOptions)) .pipe(rev()) .pipe(gulp.dest(distTplUrl)) .pipe(rev.manifest()) .pipe(gulp.dest(revTplUrl)) }); //css压缩添加版本号 gulp.task('cssMin', function() { return gulp.src(cssUrl+'*.css') .pipe(minifycss()) .pipe(rev()) .pipe(gulp.dest(distCssUrl)) .pipe(rev.manifest()) .pipe(gulp.dest(revCssUrl)); }); //css合并添加版本号 gulp.task('cssCon', function() { //需要处理的css文件,放到一个字符串数组里 return gulp.src(cssUrl+'*.css') //合并后的文件名 .pipe(concat('build.min.css')) //压缩处理成一行 .pipe(minifycss()) //文件名加MD5后缀 .pipe(rev()) //输出文件本地 .pipe(gulp.dest(distCssUrl)) //生成一个rev-manifest.json .pipe(rev.manifest()) //将 rev-manifest.json 保存到 rev 目录内 .pipe(gulp.dest(revCssUrl+'combine/')); }); //复制未压缩的js添加版本号 gulp.task('jsNotMin', function () { return gulp.src([jsUrl+'config.js']) .pipe(rev()) .pipe(gulp.dest(distJsUrl)) .pipe(rev.manifest()) .pipe(gulp.dest(revJsUrl+'notmin/')); }); //js压缩添加版本号 gulp.task('jsMin', function () { return gulp.src([jsUrl+'*.js', "!"+jsUrl+'config.js']) //.pipe(uglify()) .pipe(rev()) .pipe(gulp.dest(distJsUrl)) .pipe(rev.manifest()) .pipe(gulp.dest(revJsUrl+'min/')); }); //js合并添加版本号 gulp.task('jsCon', function () { return gulp.src([jsUrl+'*.js', "!"+jsUrl+'config.js', "!"+jsUrl+'shareMin.js']) .pipe(uglify()) .pipe(concat('build.min.js')) .pipe(rev()) .pipe(gulp.dest(distJsUrl)) .pipe(rev.manifest()) .pipe(gulp.dest(revJsUrl+'combine/')); }); //图片压缩添加版本号 gulp.task('img',function() { return gulp.src(imgUrl+'**/*') .pipe(rev()) .pipe(imagemin({progressive: true, svgoPlugins:[{removeViewBox:false}], use:[pngquant({quality: '70'})]})) .pipe(gulp.dest(distImgUrl)) .pipe(rev.manifest()) .pipe(gulp.dest(revImgUrl)) }); //sass编译 gulp.task('sass', function () { return gulp.src(sassUrl+'*.scss') .pipe(sass({outputStyle: 'compressed'})) .pipe(gulp.dest(cssUrl)) //.pipe(connect.reload()); }); //less编译 gulp.task('less', function () { return gulp.src(lessUrl+'*.less') .pipe(less()) .pipe(gulp.dest(cssUrl)); }); //添加版本号 gulp.task('revIndex', function () { return gulp.src([revDist+'**/*.json', dist+'index.html']) .pipe(revCollector({ replaceReved:true })) .pipe(gulp.dest(dist)) }); gulp.task('revTpl', function () { return gulp.src([revDist+'**/*.json', distTplUrl+'**/*.html']) .pipe(revCollector({ replaceReved:true })) .pipe(gulp.dest(distTplUrl)) }); gulp.task('revCss', function () { return gulp.src([revDist+'**/*.json', distCssUrl+'**/*.css']) .pipe(revCollector({ replaceReved:true })) .pipe(gulp.dest(distCssUrl)) }); gulp.task('revJs', function () { return gulp.src([revDist+'**/*.json', distJsUrl+'**/*.js']) .pipe(revCollector({ replaceReved:true })) .pipe(gulp.dest(distJsUrl)) }); //复制媒体文件和lib文件 gulp.task('copyFile', function () { gulp.src([mediaUrl+'**/*']) .pipe(rev()) .pipe(gulp.dest(distMediaUrl)) .pipe(rev.manifest()) .pipe(gulp.dest(revMediaUrl)); gulp.src([fontUrl+'**/*']) .pipe(rev()) .pipe(gulp.dest(distFontUrl)) .pipe(rev.manifest()) .pipe(gulp.dest(revFontUrl)); gulp.src([libUrl+'**/*']) .pipe(rev()) .pipe(gulp.dest(distLibUrl)) .pipe(rev.manifest()) .pipe(gulp.dest(revLibUrl)); }); //清空输出目录并删除改目录 gulp.task('clean', function() { return gulp.src([baseUrl+distName, baseUrl+'/rev'], {read: false}) .pipe(clean({force: true})); }); //var ftpConfig = { // "localPath": { // "base": "../dist/" // }, // "remotePath": { // "base": "dreamGame", // "project": "/var/disk/web/dev_local/app_web0/m.huanhuba.com/h5dev/dreamGame" // }, // "project":{ // "ftpTest": { // "use": true, // "host": "120.55.102.1", // "port":"220", // "user": "web", // "pass": "web123!@#" // } // } //} ////上传ftp服务器 //gulp.task('ftp', function () { // return gulp.src(ftpConfig) // .pipe(sftp({ // host: '120.55.102.1', // port: 220, // user: 'web', // pass: 'web123!@#' // })); //}) //使用connect启动一个Web服务器 gulp.task('connect', function () { connect.server({ //服务器根目录 root: baseUrl, //访问IP ip: '127.1.1.1', //访问端口 port: '8080', //是否启用热加载 livereload: false }); }); // gulp.task('reload', function () { // gulp.src(tplUrl+'*.html') // .pipe(connect.reload()); // }); //打包任务 //[]中的是异步,运行完后运行rev gulp.task("buildH5", function(cb){ setDistFolder(distFolderH5); gulpSequence(['clean'], ['tpl'], ['copyFile', 'cssMin', 'cssCon', 'jsNotMin', 'jsMin', 'jsCon', 'img'], ['revIndex', 'revTpl', 'revCss', 'revJs'])(cb) }); gulp.task("buildMofang", function(cb){ setDistFolder(distFolderMofang); gulpSequence(['clean'], ['tpl'], ['copyFile', 'cssMin', 'cssCon', 'jsNotMin', 'jsMin', 'jsCon', 'img'], ['revIndex', 'revTpl', 'revCss', 'revJs'])(cb) }); //监控 gulp.task('watch',function(){ //gulp.watch(tplUrl+'*.html', ['html']); gulp.watch(sassUrl+'**/*.scss', ['sass']); //gulp.watch(cssUrl+'**/*.css', ['cssMin', 'cssCon']); //gulp.watch(jsUrl+'**/*.js', ['jsMin', 'jsCon']); });
package.json需要安装的一些模块
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{ "name": "projectName", "version": "1.0.0", "description": "projectDesc", "devDependencies": { "bower": "^1.7.7", "del": "^2.2.0", "gulp": "^3.9.1", "gulp-clean": "^0.3.2", "gulp-clean-css": "^2.0.7", "gulp-concat": "^2.6.0", "gulp-connect": "^4.1.0", "gulp-ftp": "^1.1.0", "gulp-htmlmin": "^2.0.0", "gulp-imagemin": "^3.0.1", "gulp-jshint": "^2.0.0", "gulp-less": "^3.1.0", "gulp-notify": "^2.2.0", "gulp-rename": "^1.2.2", "gulp-rev": "^7.0.0", "gulp-rev-collector": "^1.0.3", "gulp-ruby-sass": "^2.0.6", "gulp-sass": "^2.3.1", "gulp-sequence": "^0.4.5", "gulp-sftp": "^0.1.5", "gulp-uglify": "^1.5.3", "gulp-util": "^2.2.14", "imagemin": "^5.1.1", "imagemin-pngcrush": "^4.1.0", "imagemin-pngquant": "^5.0.0", "jshint": "^2.9.1", "shelljs": "^0.3.0", "slash": "^1.0.0" }, "dependencies": { "textangular": "^1.5.4" } }
gulp添加版本号还要改一些东西,如下
http://www.tuicool.com/articles/UbaqyyJ