1

我尝试使用 broccolijs、babel 和 browserSync 制作自定义构建管道。到目前为止按预期工作；我可以使用 ES6 脚本，并且我的文件被监视：保存文件后，它会自动构建和刷新页面。现在我做

broccoli build dist

用于构建连接的可分发版本。

我想知道是否可以清理dist文件夹，并在那里构建连接版本。

server.js文件现在看起来像这样：

var broccoli = require("broccoli");
var brocware = require("broccoli/lib/middleware");
var mergeTrees = require("broccoli-merge-trees");
var Watcher = require("broccoli-sane-watcher");
var browserSync = require("browser-sync");

const funnel = require('broccoli-funnel');
const concat = require('broccoli-concat');
const esTranspiler = require('broccoli-babel-transpiler');
const pkg = require('./package.json');

const src = 'src';

const indexHtml = funnel(src, {
  files: ['index.html']
});

const js = esTranspiler(src, {
  stage: 0,
  moduleIds: true,
  modules: 'amd',

  // Transforms /index.js files to use their containing directory name
  getModuleId: function (name) { 
    name = pkg.name + '/' + name;
    return name.replace(/\/index$/, '');
  },

  // Fix relative imports inside /index's
  resolveModuleSource: function (source, filename) {
    var match = filename.match(/(.+)\/index\.\S+$/i);

    // is this an import inside an /index file?
    if (match) {
      var path = match[1];
      return source
        .replace(/^\.\//, path + '/')
        .replace(/^\.\.\//, '');
    } else {
      return source;
    }
  }
});

const main = concat(js, {
  inputFiles: [
    '**/*.js'
  ],
  outputFile: '/' + pkg.name + '.js'
});

// http://stackoverflow.com/questions/32190327/add-livereload-to-broccolis

var tree = mergeTrees([main, indexHtml]); // your public directory
var builder = new broccoli.Builder(tree);
var watcher = new Watcher(builder); 

watcher.on("change", function(results) {
    if (!results.filePath) return;

    // Enable CSS live inject
    if (results.filePath.indexOf("css") > -1) {
        return browserSync.reload("*.css");
    }

    browserSync.reload();
});

browserSync({
    server: {
        baseDir: "./",
        middleware: brocware(watcher)
    }
});
4

0 回答 0