dev

Author: littledu

_tasks/TaskBuildDist.js

@@ -1,3 +1,4 @@
+var fs = require('fs');
 var del = require('del');
 var path = require('path');
 var ejs = require('gulp-ejs');
@@ -19,6 +20,7 @@ var posthtml = require('gulp-posthtml');
 var posthtmlPx2rem = require('posthtml-px2rem');
 var RevAll = require('gulp-rev-all');   // reversion
 var revDel = require('gulp-rev-delete-original');
+var changed = require('./common/changed')();
 
 var paths = {
     src: {
@@ -33,6 +35,13 @@ var paths = {
         htmlAll: './src/html/**/*',
         php: './src/**/*.php'
     },
+    tmp: {
+        dir: './tmp',
+        css: './tmp/css',
+        img: './tmp/img',
+        html: './tmp/html',
+        sprite: './tmp/sprite'
+    },
     dist: {
         dir: './dist',
         css: './dist/css',
@@ -64,38 +73,43 @@ module.exports = function (gulp, config) {
         ]
     }
 
-    // 清除目标目录
+    // 清除 dist 目录
     function delDist() {
         return del([paths.dist.dir]);
     }
 
+    // 清除 tmp 目录
+    function delTmp() {
+        return del([paths.tmp.dir]);
+    }
+
     //编译 less
     function compileLess() {
         return gulp.src(paths.src.less)
             .pipe(less())
             .pipe(lazyImageCSS({imagePath: lazyDir}))
             .pipe(tmtsprite({margin: 4}))
-            .pipe(gulpif('*.png', gulp.dest(paths.dist.sprite), gulp.dest(paths.dist.css)));
+            .pipe(gulpif('*.png', gulp.dest(paths.tmp.sprite), gulp.dest(paths.tmp.css)));
     }
 
     //自动补全
     function compileAutoprefixer() {
-        return gulp.src('./dist/css/style-*.css')
+        return gulp.src('./tmp/css/style-*.css')
             .pipe(postcss(postcssOption))
-            .pipe(gulp.dest('./dist/css/'));
+            .pipe(gulp.dest('./tmp/css/'));
     }
 
     //CSS 压缩
-    function miniCSS(){
-        return gulp.src('./dist/css/style-*.css')
+    function miniCSS() {
+        return gulp.src('./tmp/css/style-*.css')
             .pipe(minifyCSS({
                 safe: true,
                 reduceTransforms: false,
                 advanced: false,
                 compatibility: 'ie7',
                 keepSpecialComments: 0
             }))
-            .pipe(gulp.dest('./dist/css/'));
+            .pipe(gulp.dest('./tmp/css/'));
     }
 
     //图片压缩
@@ -104,7 +118,7 @@ module.exports = function (gulp, config) {
             .pipe(imagemin({
                 use: [pngquant()]
             }))
-            .pipe(gulp.dest(paths.dist.img));
+            .pipe(gulp.dest(paths.tmp.img));
     }
 
     //复制媒体文件
@@ -116,16 +130,16 @@ module.exports = function (gulp, config) {
     function uglifyJs() {
         return gulp.src(paths.src.js, {base: paths.src.dir})
             .pipe(uglify())
-            .pipe(gulp.dest(paths.dist.dir));
+            .pipe(gulp.dest(paths.tmp.dir));
     }
 
     //雪碧图压缩
     function imageminSprite() {
-        return gulp.src('./dist/sprite/**/*')
+        return gulp.src('./tmp/sprite/**/*')
             .pipe(imagemin({
                 use: [pngquant()]
             }))
-            .pipe(gulp.dest(paths.dist.sprite));
+            .pipe(gulp.dest(paths.tmp.sprite));
     }
 
     //html 编译
@@ -144,7 +158,7 @@ module.exports = function (gulp, config) {
             .pipe(usemin({  //JS 合并压缩
                 jsmin: uglify()
             }))
-            .pipe(gulp.dest(paths.dist.html));
+            .pipe(gulp.dest(paths.tmp.html));
     }
 
     //webp 编译
@@ -166,18 +180,54 @@ module.exports = function (gulp, config) {
         });
 
         if (config['reversion']) {
-            return gulp.src(['./dist/**/*'])
+            return gulp.src(['./tmp/**/*'])
                 .pipe(revAll.revision())
-                .pipe(gulp.dest(paths.dist.dir))
+                .pipe(gulp.dest(paths.tmp.dir))
                 .pipe(revDel({
                     exclude: /(.html|.htm)$/
                 }))
                 .pipe(revAll.manifestFile())
-                .pipe(gulp.dest(paths.dist.dir));
+                .pipe(gulp.dest(paths.tmp.dir));
         } else {
             cb();
         }
     }
+    
+    function findChanged(cb) {
+
+        var diff = changed('./tmp');
+        var tmpSrc = [];
+
+        if(process.argv[2].indexOf(':all') > -1){
+            return gulp.src('./tmp/**/*', {base: paths.tmp.dir})
+                .pipe(gulp.dest(paths.dist.dir))
+                .on('end', function(){
+                    delTmp();
+                })
+        }
+
+        if(diff){
+            for(var i in diff){
+                tmpSrc.push('./tmp/' + i);
+                console.log(i + ' has changed!');
+            }
+
+            if(!tmpSrc.length){
+                console.log('Nothing changed!');
+                delTmp();
+                cb();
+            }else{
+                return gulp.src(tmpSrc, {base: paths.tmp.dir})
+                    .pipe(gulp.dest(paths.dist.dir))
+                    .on('end', function(){
+                        delTmp();
+                    })
+            }
+        }else{
+            cb();
+        }
+    }
+
 
     //加载插件
     function loadPlugin(cb) {
@@ -200,7 +250,13 @@ module.exports = function (gulp, config) {
         compileHtml,
         reversion,
         supportWebp(),
+        findChanged,
         loadPlugin
     ));
+
+    //注册 build_dist 任务
+    gulp.task('build_dist:all', gulp.series(
+        'build_dist'
+    ));
 };
 

_tasks/common/changed.js

@@ -0,0 +1,57 @@
+var md5 = require('crypto-md5');
+var path = require('path');
+var rd = require('rd');
+var fs = require('fs');
+var _ = require('lodash');
+
+function changed(dir) {
+
+    var manifestPath = path.resolve('./src/manifest.json');
+    var manifest = {};
+    var originManifest = {};
+    
+    //如果存在 manifest.json, 则加载保存
+    if (fs.existsSync(manifestPath)) {
+        originManifest = require(manifestPath);
+    }
+
+    //遍历目录, 根据内容 md5 加密
+    rd.eachFileFilterSync(dir, function (file) {
+        var index = path.relative(dir, file);
+
+        //过滤掉 隐藏文件 和 manifest.json
+        if (path.extname(file) && index !== 'manifest.json' && fs.existsSync(file)) {
+
+            var data = fs.readFileSync(file);
+
+            if (data) {
+                manifest[index] = md5(data, 'hex');
+            }
+        }
+
+    });
+
+    //将新的 manifest.json 保存
+    fs.writeFile(manifestPath, JSON.stringify(manifest), function (err) {
+        if (err) throw err;
+    });
+
+    //找出有变动的文件
+    if(originManifest){
+        var diff = {};
+
+        _.forEach(manifest, function (item, index) {
+            if (originManifest[index] !== item) {
+                diff[index] = item;
+            }
+        });
+    }
+
+    return diff;
+
+}
+
+
+module.exports = function(){
+    return changed;
+};

_tasks/common/webp.js

@@ -43,43 +43,43 @@ module.exports = function (config, done) {
     return function () {
         return gulp.series(
             function compileSprite() {
-                return gulp.src('./dist/sprite/**/*')
+                return gulp.src('./tmp/sprite/**/*')
                     .pipe(gulpWebp())
-                    .pipe(gulp.dest('./dist/sprite'));
+                    .pipe(gulp.dest('./tmp/sprite'));
             },
             function compileImg () {
-                return gulp.src('./dist/img/**/*')
+                return gulp.src('./tmp/img/**/*')
                     .pipe(gulpWebp())
-                    .pipe(gulp.dest('./dist/img'));
+                    .pipe(gulp.dest('./tmp/img'));
             },
             //智能寻找 webp
             function find2Webp (cb) {
-                render_webp('./dist/sprite');
-                render_webp('./dist/img');
+                render_webp('./tmp/sprite');
+                render_webp('./tmp/img');
                 if(imgArr.length){
                     reg = eval('/(' + imgArr.join('|') + ')/ig');
                 }
                 cb();
             },
             function compileCss () {
-                return gulp.src(['./dist/css/**/*.css', '!./dist/css/**/*.webp.css'])
+                return gulp.src(['./tmp/css/**/*.css', '!./tmp/css/**/*.webp.css'])
                     .pipe(rename({suffix: '.webp'}))
                     .pipe(replace(reg, function (match) {
                         if(match){
                             return match.substring(0, match.lastIndexOf('.')) + '.webp';
                         }
                     }))
-                    .pipe(gulp.dest('./dist/css'));
+                    .pipe(gulp.dest('./tmp/css'));
             },
             function insertWebpJs () {
                 var preload_script = '<script>window.imgMap = ' + JSON.stringify(imgMap) + '</script>';
 
-                return gulp.src('./dist/html/**/*.html')
+                return gulp.src('./tmp/html/**/*.html')
                     .pipe(replace('data-href', 'href'))
                     .pipe(replace(/(link.*?)href/ig, '$1data-href'))
                     .pipe(replace('</head>', webpScript))
                     .pipe(replace('</head>', preload_script))
-                    .pipe(gulp.dest('./dist/html'));
+                    .pipe(gulp.dest('./tmp/html'));
             }
         );
     }

package.json

@@ -31,7 +31,8 @@
     "posthtml-px2rem": "^0.0.3",
     "rc": "^1.1.6",
     "rd": "^0.0.2",
-    "tmt-ejs-helper": "^0.0.1"
+    "tmt-ejs-helper": "^0.0.1",
+    "crypto-md5": "^1.0.0"
   },
   "description": "A f2e project workflow based on Gulp",
   "repository": {
@@ -56,4 +57,4 @@
   },
   "homepage": "https://github.com/weixin/tmt-workflow",
   "readmeFilename": "README.md"
-}
+}