Develop Reference

Ember: How do I add a file into the treeForAddon after postBuild?

I have a case where I am using node-sass functions to generate a JS file after sass has completed compiling. I am outputting the file into the addon/utils directory; however, the file is not being picked until the project is built the second time.
I feel this would easily be solved if I ran SASS first and then compile the JS next (after trees have been updated with the new JS file), but I can't find anything that does that.
Any suggestions on how I could make this work?

Javascript project structure for dev and production using npm and grunt

I am trying to structure javascript files in a project. I have used NPM to manage the modules and planning to use Grunt to concatenate and compress the js and css files for deployment.
I am currently using the following structure
-[project root]
-- [node modules] :packages such as requirejs, jquery, semantic-ui etc using npm
--[war]
---[Dev]
----[css] multiple css files from modules (Question 2:?)
----[js] multiple js files from modeuls (Question 2:?)
- Gruntfile.js :for concatenate and compress
---[Production] -
----[css]:This is where the compressed and concatenated css files are kept
----[js] :This is where the compressed and concatenated js files are kept
Question 1: Is the above approach to structure the project correct ? Any other recommendations which allows to manage the packages, dev and production files.
Question 2: Can NPM or another tool allows me to pick up the js and css files from the [node modules] folder and place them to (dev>>css or dev>>js) folder ? If am doing this manually how do I track the versions ? Seems like I am missing something here, there must be a better solution.
Suggestions/recommendations/comments are much appreciated.
Thanks

The question is a bit too wide for SO format, but in general your structure is good. Instead of copying files from node_modules, you have your own JavaScript files under js and you import/require them to your own files.
//foo.js
//ES6 style imports
import {Foo as Bar} from "biz";
//Common JS style requires
var Bar = require("biz");
//AMD style requires
require(["biz"], function (Bar) {
If you want to use your node_modules in a browser, you'll want to bundle them using Browserify, Webpack, Rollup or similar. To automate this, you can easily use Grunt tasks such as grunt-browserify together with grunt-watch.
Same applies for your CSS files: You store your own files under css and if you need CSS files from node_modules you can import them to your own files: if you are using some preprocessor (such as SASS or LESS), the preprocessors usually inline your imports when building the .css-file. If you are just using plain .css files, see grunt-css-import for example.

tinyMCE build without css

I clone https://github.com/tinymce/tinymce
and run builder:
grunt bundle --themes modern --plugins table,paste...
It works fine,
but when I run tinymce.full.min.js, it loads from server css files:
skins/lightgray/skin.min.css
skins/lightgray/content.min.css
I have in my project common min.css file, where i can include those files
So, can i disable loading those css files from minified file with builder or do it in an other way?

You can choose the theme you want and define an own one if you like:
theme: 'my_theme',
or you can choose an other already existing theme like this one: https://pixabay.com/de/blog/posts/a-modern-custom-theme-for-tinymce-4-40/

Avoid multiple src files in my html page

I have a website I'm working on in Visual Studio 2013 and I'm mainly using AngularJS 1.2.6. In my index.html I have a src line for each .js file which for 3 page is 6 lines, 1 js file for each controller and 1 js page for each view.
Is there a way I could consolidate all of these lines into 1 .js file and call that .js file in my index.html?

Yes, you can use something like grunt.js to build a custom build script for your .js files. In your case, you may want to use grunt-contrib-concat with grunt-contrib-watch.
If you are not familiar with grunt, feel free to read the tutorial.

HTML5Boilerplate js structure

I'm wondering if someone can check my understanding of what the intended purpose of HTML5Boilerplate js directories. I understand that main.js is where I'm expected to place all site specific javascript that I author. Plugins.js is where I would place all jQuery plugins used. Both main.js and plugins.js will be concatenated and minified by the build process. Vendor.js holds javascript libraries. This directory will be minified (unless it is already minified) but not concatenated.
If this is true, then my question is where should something like cute slider which has a modular structure be placed? I'm thinking I want it to be minified and concatenated so it shouldn't go in the vendor directory. I don't believe I can add cuteslider's javascript to main.js or plugins.js without destroying it's modular structure. Should I create a new directory, and call it something like apps, to hold cuteslider code and then modify the build code to minified and concatenated it?
Here is a snippet of cuteslider's code structure
cute
cute.2d.module.js
cute.canvas.module.js
cute.css3d.module.js
cute.gallery.plugin.js
cute.slider.js
cute.transitions.all.js

First you have to consider cuteslider as a plugin.
Add the required files to make the plugin working (cute.slider.js, cute.transitions.all.js and respond.min.js) in the plugins.js.
Then add the js to load the slider into your page in the main.js as
$(document).ready(function() {
// code here to load cuteslider
});
The modular look have to be set only in the main.js file.