项目使用的gulp自动化任务

//定义输出文件夹名称

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需要安装的一些模块

{

  "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

gulp任务的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案（一）

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  4. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案（二）

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  5. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  6. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  7. 前端自动化构建工具gulp记录

    一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...

  8. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  9. gulp批量打包文件并提取公共文件

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...

  10. 使用gulp解决RequireJS项目前端缓存问题（二）

    1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...

随机推荐

  1. <转>[WinForm] VS2010发布、打包安装程序(超全超详细)

    1. 在vs2010 选择“新建项目”→“ 其他项目类型”→“ Visual Studio Installer→“安装项目”: 命名为:Setup1 . 这是在VS2010中将有三个文件夹, 1.“应 ...

  2. java中的权限修饰符的理解

    首先了解概念: 在java中有四种权限修饰符:范围从大到小分别是:public.protect.default(friendly).private,它们之间的区别是: public: Java语言中访 ...

  3. jmeter仅一次控制器

    仅针对 1个线程的 多线程的那个不生效  想实现多次执行某个请求只执行一次 需要设置为单线程 循环次数设置为多次就可以了 

  4. 首师大附中互测题：LJX的校园：入学典礼【C003】

    [C003]LJX的校园:入学典礼[难度C]—————————————————————————————————————————————————————————————————————————————— ...

  5. jQuery的.bind()、.live()和.delegate()之间区别

    摘要:jQuery的.bind()..live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及 ...

  6. 向nginx发送reopen信号以重新打开日志文件

    先移动日志文件 mv /usr/local/openresty/nginx/logs/access.log /usr/local/openresty/nginx/logs/access.log.201 ...

  7. 团队Git工作流总结

    为什么使用Git “svn用了这么多年都好好的,为啥折腾搞Git?” “Git一点都不好用,提交个代码都提交不上去!” “Git这么复杂,命令多到记不住,而且完全用不到.哪有svn简单好用?”   推 ...

  8. 【DP】HDU 1176

    HDU 1176 免费馅饼 题意:中文题目不解释. 思路:因为是从中间出发所以思路卡了许久,还在之前做了道HIHO入门的题.能想到的点,从时间思考,然后初始化1s的时候,4,5,6,的数值要特别赋值. ...

  9. SQL中对于两个不同的表中的属性取差集except运算

    SQL中对两个集合取差集运算,使用except关键字,语法格式如下: SELECT column_name(s) FROM table_name1 EXCEPT SELECT column_name( ...

  10. pod 安装总结

    参考http://code4app.com/article/cocoapods-install-usage http://www.jianshu.com/p/32d9cfb91471 原文:http: ...