CODEWITHSUNDEEP
ember.jsember-clibabeljsbroccolijs
karthikaruna
karthikaruna

Reputation: 3236

EmberJS: Customize Ember CLI build

I want to transform a file and put it in another directory as a part of the dev and prod build processes. How can I achieve this?

Upvotes: 0

Views: 201

Answers (1)

NullVoxPopuli
NullVoxPopuli

Reputation: 65123

I think reading through all this will help: http://www.oligriffiths.com/broccolijs/

It's a tutorial an how broccoli works, and how it transforms trees of files.

For your particular situation, this page will be of interest: http://www.oligriffiths.com/broccolijs/05-es6-transpilation.html

specifically, this:

const funnel = require('broccoli-funnel');
const merge = require('broccoli-merge-trees');
const compileSass = require('broccoli-sass-source-maps')(require('sass'));
const babel = require('broccoli-babel-transpiler');

const appRoot = 'app';

// Copy HTML file from app root to destination
const html = funnel(appRoot, {
  files: ["index.html"],
  annotation: "Index file",
});

// Copy JS file into assets
let js = funnel(appRoot, {
  files: ["app.js"],
  destDir: "/assets",
  annotation: "JS files",
});

// Transpile JS files to ES5
js = babel(js, {
  browserPolyfill: true,
  sourceMap: 'inline',
});

// Copy CSS file into assets
const css = compileSass(
  [appRoot],
  'styles/app.scss',
  'assets/app.css',
  {
    sourceMap: true,
    sourceMapContents: true,
    annotation: "Sass files"
  }
);

// Copy public files into destination
const public = funnel('public', {
  annotation: "Public files",
});

module.exports = merge([html, js, css, public], {annotation: "Final output"});

hope this helps / gives you enough information to achieve what you need

Upvotes: 1

Related Questions