1

I try to make a custom build pipeline using broccolijs, babel and browserSync. So far works as expected; I can use ES6 script, and my files are watched: after saving a file, it builds and refresh the page automagically. Now I do

broccoli build dist

for build a concatenated distributable version.

I'm wondering if it possible clean the dist folder, and build there the concatenated version too.

The server.js file looks like this at the moment:

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