use indices instead of filenames as keys for cache

gulpfile.js

@@ -56,10 +56,12 @@ gulp.task('eslint', () => (
   .pipe(eslint.format())
 ));
 
+const cacheObj = templateCache();
+
 gulp.task('templates', () => {
   var stream = merge2([
     gulp.src(paths.cache),
-    gulp.src(paths.templates).pipe(templateCache()),
+    gulp.src(paths.templates).pipe(cacheObj),
   ])
   .pipe(concat('cache.js'));
   if (isProd) stream = stream.pipe(uglify());
@@ -74,16 +76,18 @@ gulp.task('js-bg', () => {
   return stream.pipe(gulp.dest('dist'));
 });
 
-gulp.task('js-options', () => {
+gulp.task('js-options', ['templates'], () => {
   var stream = gulp.src(paths.jsOptions)
+  .pipe(cacheObj.replace())
   .pipe(concat('options/app.js'))
   .pipe(footer(';define.use("app");'));
   if (isProd) stream = stream.pipe(uglify());
   return stream.pipe(gulp.dest('dist'));
 });
 
-gulp.task('js-popup', () => {
+gulp.task('js-popup', ['templates'], () => {
   var stream = gulp.src(paths.jsPopup)
+  .pipe(cacheObj.replace())
   .pipe(concat('popup/app.js'))
   .pipe(footer(';define.use("app");'));
   if (isProd) stream = stream.pipe(uglify());
@@ -140,7 +144,6 @@ gulp.task('svg', () => (
 ));
 
 gulp.task('build', [
-  'templates',
   'js-bg',
   'js-options',
   'js-popup',

package.json

@@ -29,8 +29,7 @@
     "merge2": "^1.0.2",
     "ncp": "^2.0.0",
     "qunitjs": "^2.0.0-rc1",
-    "through2": "^2.0.1",
-    "underscore": "^1.8.3"
+    "through2": "^2.0.1"
   },
   "author": "Gerald <[email protected]>",
   "repository": {

scripts/templateCache.js

@@ -1,8 +1,8 @@
 'use strict';
 
 const gutil = require('gulp-util');
+const replace = require('gulp-replace');
 const through = require('through2');
-const _ = require('underscore');
 const minify = require('html-minifier').minify;
 
 module.exports = function templateCache() {
@@ -20,27 +20,44 @@ define('templates', function (require, exports, module) {
     if (file.isNull()) return cb();
     if (file.isStream())
       return this.emit('error', new gutil.PluginError('VM-cache', 'Stream is not supported.'));
-    contents.push(gutil.template(contentTpl, {
-      name: JSON.stringify(('/' + file.relative).replace(/\\/g, '/')),
-      content: JSON.stringify(minify(String(file.contents), {
+    contents.push({
+      filename: ('/' + file.relative).replace(/\\/g, '/'),
+      content: minify(String(file.contents), {
         removeComments: true,
         collapseWhitespace: true,
         conservativeCollapse: true,
         removeAttributeQuotes: true,
-      })),
-      file: '',
-    }));
+      }),
+    });
     cb();
   }
 
   function endStream(cb) {
+    contents.sort((a, b) => {
+      if (a.filename < b.filename) return -1;
+      if (a.filename > b.filename) return 1;
+      return 0;
+    });
+    const nameMap = contents.reduce((res, item, i) => {
+      res[item.filename] = i;
+      return res;
+    }, {});
+    this.replace = () => replace(/cache.get\('(.*?)'\)/g, (cache, filename) => {
+      const key = nameMap[filename];
+      if (key == null) console.warn(`Cache key not found: ${filename}`);
+      return `cache.get(${key})`;
+    });
+    const templates = contents.map(item => {
+      return `cache.put(${nameMap[item.filename]}, ${JSON.stringify(item.content)});`;
+    }).join('\n');
     this.push(new gutil.File({
       base: '',
       path: 'template.js',
-      contents: new Buffer(header + contents.join('') + footer),
+      contents: new Buffer(header + templates + footer),
     }));
     cb();
   }
 
-  return through.obj(bufferContents, endStream);
+  const cacheObj = through.obj(bufferContents, endStream);
+  return cacheObj;
 };