gulp任务

Posted 小猪ab

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了gulp任务相关的知识，希望对你有一定的参考价值。

项目使用的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\']);
});
View Code

 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"
  }
}
View Code

 

gulp添加版本号还要改一些东西，如下

http://www.tuicool.com/articles/UbaqyyJ

以上是关于gulp任务的主要内容，如果未能解决你的问题，请参考以下文章

我怎样才能改变我的gulp文件，以便在代码库发生变化时运行构建任务？

如何使用键盘快捷键运行Gulp任务

Gulp 同步任务问题

Gulp循环监视任务

如何在 gulp 中获取可用任务列表

初探 gulp