I am attempting to create a layer for my project. I would like the layer to contain
myProject/controllers/MainApp and all of its dependencies that are in the myProject
package. I do not want to include any dojo, dijit or otherPackages in my layer.
This is what I have so far:
var profile = (function() {
var locationPrefix = "something";
return {
basePath: "../src",
releaseDir: "../dojoRelease",
releaseName: "lib",
action: "release",
packages: [
{
name: 'dojo',
location: locationPrefix + '/dojo/dojo'
}, {
name: 'dijit',
location: locationPrefix + '/dojo/dijit'
}, {
...
}, {
name: 'myProject',
location: 'myProject',
destLocation: 'myProject'
}
],
layers: {
"myProject": {
include: ["myProject/controllers/MainApp"],
// QUESTION: How can I use exclude to not include all dojo modules?
// tried several things but none seem to work. Can't find any doc
// on what exclude takes as input.
// exclude: ["dojo/dojo"],
boot: false,
customBase: true
}
}
};
})();
The problem is that when I look at my main.js.uncompressed.js it contins lots of things that are not
in myProject. These are the first few lines in the main.js.uncompressed.js file:
require({cache:{
'dojo/parser':function(){
define([
"require", "./_base/kernel", "./_base/lang", "./_base/array", "./_base/config", "./dom", "./_base/window",
"./_base/url", "./aspect", "./promise/all", "./date/stamp", "./Deferred", "./has", "./query", "./on", "./ready"
], function(require, dojo, dlang, darray, config, dom, dwindow, _Url, aspect, all, dates, Deferred, has, query, don, ready){
// module:
// dojo/parser
new Date("X"); // workaround for #11279, new Date("") == NaN
// data-dojo-props etc. is not restricted to JSON, it can be any javascript
function myEval(text){
return eval("(" + text + ")");
}
The source for:
dijit/_Widget
dojo/Stateful
dijit/Destroyable
dijit/_OnDijitClickMixin
dijit/a11yclick
and many other files also show up in the main.js.uncompressed.js file.
How can I limit the main.js.uncompressed.js file to be only the files
in my project? Thanks!
Update: I tried removing dojo, dijit, etc from the list of packages. This causes the main.js.uncompressed.js to generate more or less correctly, the compiler then hangs on generating the minified file. There are also many errors like this:
error(311) Missing dependency. module: myProject/controllers/someFile; dependency: dojo/_base/declare
error(311) Missing dependency. module: myProject/controllers/someFile; dependency: dojo/_base/lang
error(311) Missing dependency. module: myProject/controllers/someFile; dependency: dojo/Deferred
The problem is that when I look at my main.js.uncompressed.js it
contins lots of things that are not in myProject.
They might not be in myProject but are you sure you're not making use of any of them anywhere? For example in the output you include it shows that someFile is using dojo/_base/declare function. If you're using declare at the start of your someFile module then you'll need dojo in the layer to be able to run it.
error(311) Missing dependency. module: myProject/controllers/someFile; dependency: dojo/_base/declare
error(311) Missing dependency. module: myProject/controllers/someFile; dependency: dojo/_base/lang
error(311) Missing dependency. module: myProject/controllers/someFile; dependency: dojo/Deferred
Can't find any doc on what exclude takes as input.
It's the same format as the include - an array of string modules - see here:
http://dojotoolkit.org/documentation/tutorials/1.10/build/
http://dojotoolkit.org/reference-guide/1.10/build/
Using the boot property will also included some dojo code in your layer as you're telling the builder to make your layer bootable so it has to include the dojo code for module loading to let you load youre other modules.
Related
I'm working on app with grunt and typedoc.
I need to prepare documentation using TypeDoc but I have a problem with one scenario.
I have to exclude a few files from documentation which are externals libs.
I can't put those files into exclude section because those files are relating with another. If I tried to exclude it (by put those files into exclude section) I had a errors - something like cannot find to xxx into yyy.ts - where xxx is my excluded element and yyy is related file with xxx. Those
related files are neccessary on this documentation so I can't exclude those too.
I read into TypeDoc documentation about excludeExternals. So I thought that if I set up this boolean as true then I can to define externalPattern to exclude my external files. It's works but only if I put the name of one file - no more.
Do You know how to do it?
It is my typedoc config into gruntfile.js (without excludeExternals options):
typedoc: {
build: {
options: {
module: 'commonjs',
out: '../Documentation/',
name: 'MyApp',
target: 'es5',
exclude: [
'node_modules',
'**/*.d.ts'
],
excludePrivate: true,
mode: 'file'
},
src: [
...some source...
]
}
}
This is list of external files which I have to exclude: A.ts, B.ts, C.ts, D.ts ...
And this is my typedoc config into gruntfile.js (with excludeExternals options):
typedoc: {
build: {
options: {
module: 'commonjs',
out: '../Documentation/',
name: 'MyApp',
target: 'es5',
exclude: [
'node_modules',
'**/*.d.ts'
],
excludeExternals: true,
externalPattern: '**/*/A.ts',
excludePrivate: true,
mode: 'file'
},
src: [
...some source...
]
}
}
This config is working well. I have got a documentation without A.ts file. So now I need to put a few files, so I tried to put on externalPattern something like: **/*/(A|B|C|D).ts but without success (because during recompiling of documentation I had error: Process terminated with code 3. 'B' is not recognized as an internal or external command, operable program or batch file.).
Any ideas?
I found the solution. If I want to exclude externals files using externalPattern I should to write pattern something like that:
externalPattern: "**/*/{A,B,C,D}.ts"
{ } = allows for a comma-separated list of "or" expressions
, = or
Useful for me was this comment from topic about regex in gruntfile.
According to this comment, the right syntax would be **/*/+(A|B|C|D).ts. Also, it looks like you are running into a problem with your shell trying to interpret the pipe characters, so try adding double quotes around the whole thing:
externalPattern: '"**/*/+(A|B|C|D).ts"'
In a traditional Ember app, I have something along the lines of this in my ember-cli-build.js:
//ember-cli-build.js
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
babel: {
includePolyfill: true,
ignore: ['my-ember-ui/models/myFile.js'] // <-- question is here
},
Is there an equivalent to this when using an Ember Engine (or addon)? I couldn't find anything within ember-cli-babel or ember-engines.
I understand that ember-cli-build.js is just for the dummy app when using an engine, so I wouldn't make the change there. I attempted similar to above in the index.js file, but did not have any luck. The file was not ignored by babel. I need a way to ignore a particular file. Thanks!
Well, adding new rules to Cli.build.js is ok depends on what you want to do. However, I may have another solution that you can give it a try.
Babel will look for a .babelrc in the current directory of the file being transpiled. If one does not exist, it will travel up the directory tree until it finds either a .babelrc, or a package.json with a "babel": {} hash within.(.babelrc files are serializable JSON).
{
"plugins": ["transform-react-jsx"],
"ignore": [
"foo.js",
"bar/**/*.js"
]
}
or
{
"name": "my-package",
"version": "1.0.0",
"babel": {
// my babel config here
}
}
There should be another way which seems ok to use. the following does work:
babel src --out-dir build --ignore "**/*.test.js" // or simply add your file
For more information, you can read Babel document
Ember CLI docs says about /app/styles folder following:
Contains your stylesheets, whether SASS, LESS, Stylus, Compass, or plain CSS (though only one type is allowed, see Asset Compilation). These are all compiled into app.css.
I have the following files in /app/styles: app.css, one.css, two.css.
I would expect when starting server that in folder /dist/assets there will be file called appName.css and the content would be concatenation of all three files. Instead there is only content of app.css file. So I resolved this with #import in app.css:
#import url("one.css");
#import url("two.css");
That worked with 0.0.46, although not optimal because of more request were made to server. Now I updated to 0.1.1 and files one.css and two.css are no longer copied to /dist/assets folder.
But main question is: How can I achieve the concatenation of all css files in /app/styles folder? Am I missing something basic or are there some commands needed to be included into Brocfile.js?
Updated
Here is the snippet of Brocfile.js showing how we concatenate our CSS files:
var concat = require('broccoli-concat');
var cleanCSS = require('broccoli-clean-css');
var concatenatedCss = concat('app/styles', {
inputFiles: [
'reset.css',
'common.css',
'layout.css',
...
],
outputFile: '/assets/appName.css',
wrapInFunction: false
});
if (app.env === 'production') {
concatenatedCss = cleanCSS(concatenatedCss, {restructuring: false});
}
module.exports = app.toTree([concatenatedCss]);
We manually add files to inputFiles array.
It's known issue with 0.1.1 version: Static css compiler broken (0.1.x regression)
You probably should wait for update.
As for main question, try broccoli-concat.
Now there is this ember-cli-concat add-on available: https://github.com/sir-dunxalot/ember-cli-concat.
Looks super easy to use: https://github.com/sir-dunxalot/ember-cli-concat/wiki/Installation
I have a simple Gulp build process setup for testing. I've read the documentation many times but I can't seem to get Gulp-inject to inject the scripts I want into an index.html file.
My Gulp file looks like this:
gulp.task('inject1', function() {
return gulp.src('app/index.html')
.pipe(inject(gulp.src('./app/scripts/app.js', {read : false}))) // Not necessary to read the files (will speed up things), we're only after their paths
.pipe(gulp.dest("dist"));
});
gulp.task('inject2', function() {
return gulp.src('app/scripts/**/*.js', {read : false}) // Not necessary to read the files (will speed up things), we're only after their paths
.pipe(inject("./app/index.html"))
.pipe(gulp.dest("./dist"));
});
This is part of my Index.html:
<!-- inject:js -->
<!-- endinject-->
Both of these are copied from the documentation on github.
When I run either of these tasks the console just says "Started 'inject' Finished 'Inject' '
In my ./dist folder it creates an Index.html file but no js files are injected.
I've tried typing in the src and inject properties many different way but no luck. Any idea what I'm doing wrong?
First of all you have a mistake in your endinject tag:
<!-- endinject-->
should be
<!-- endinject -->
This plugin has worked great for me and others in various settings, so the problem is probably in your configuration.
Because when you are using streaming, you cannot be sure which files you pipe along, always try to use a plugin to see exactly what files you are piping. I recommend using gulp-using. Try this to debug your setup:
var debug = require('gulp-debug');
gulp.task('inject2', function() {
return gulp.src('app/scripts/**/*.js', {read : false})
.pipe(debug())
.pipe(inject("./app/index.html"))
.pipe(gulp.dest("./dist"));
});
Also make sure you use the same method to verify that you match your html file as well.
Other than that - it's just trial and error until you understand piping to get just the right files with the correct path.
If gulp-inject isn't injecting any files, that means you didn't pipe them correctly, or your target inject was not correct. The plugin works, and works great for me.
If you need to see an example working gulp file, check out this this gulpfile.js gist
I had the same problem with the following code:
var injectSrc = gulp.src(['./public/css/*.css', '.public/js/*.js'], {read: false});
var injectOptions = {
ignorePath: '/public'
};
var options = {
bowerJson: require('./bower.json'),
directory: './public/lib',
ignorePath: '../../public'
}
gulp.task('inject', function() {
return gulp.src('./src/views/*.html')
.pipe(debug())
.pipe(wiredep(options))
.pipe(debug())
.pipe(inject(injectSrc, injectOptions))
.pipe(debug())
.pipe(gulp.dest('./src/views'));
});
My index.html had the following:
<!--bower:css-->
<!--endbower-->
<!--bower:js-->
<!--endbower-->
<!--inject:css-->
<!--endinject-->
<!--inject:js-->
<!--endinject-->
Click on this link to see what my file structure was.
The inject was creating the css files correctly but not the js files. Also the bower dependencies were working just fine.
Finally I caught the missing '/' in the array passed to gulp.src(). After fixing that to:
var injectSrc = gulp.src(['./public/css/*.css', './public/js/*.js'], {read: false});
it works correctly.
I am trying to run the default service unit test in my project (Taken from the Angular Seed project on GitHub), but I keep getting the error "module is not defined".
I have read that it could be something to do with the order of the referenced JavaScript files, but I can't seem to get it to work, so hopefully one of you might be able to help.
My configuration for the test looks like this:
basePath = '../';
files = [
'public/javascripts/lib/jquery-1.8.2.js',
'public/javascripts/lib/angular.js',
'public/javascripts/lib/angular-.js',
'public/app.js',
'public/controllers/.js',
'public/directives.js',
'public/filters.js',
'public/services.js',
JASMINE,
JASMINE_ADAPTER,
'public/javascripts/lib/angular-mocks.js',
'test/unit/*.js' ];
autoWatch = true;
browsers = ['Chrome'];
junitReporter = { outputFile: 'test_out/unit.xml', suite: 'unit'
};
The service looks like the following:
angular.module('myApp.services', []).
value('version', '0.1');
The test looks like this:
'use strict';
describe('service', function() {
beforeEach(module('myApp.services'));
describe('version', function() {
it('should return current version', inject(function(version) {
expect(version).toEqual('0.1');
}));
});
});
And the error when running the test through testacular is this:
ReferenceError: module is not defined
You are missing the angular-mocks.js file.
I had the same problem, and I understood why it wasn't working:
The jasmine.js javascript must be referenced BEFORE the angular-mocks.js file.
Indeed, the angular-mocks.js checks if Jasmine is loaded, and only if it is it will add the module function to the window.
Here is an extract of Angular Mocks code:
(Edit after the few comments about 'hacking' I had below: this is just an extract of the code, this is not something you need to write yourself, it's already there!)
window.jasmine && (function(window) {
[...]
window.module = angular.mock.module = function() {
var moduleFns = Array.prototype.slice.call(arguments, 0);
return isSpecRunning() ? workFn() : workFn;
/////////////////////
[...]
};
In a nutshell:
Just reference your jasmine.js before angular-mocks.js and off you go.
The window.module function comes in angular-mocks.js and is a shorthand for angular.mock.module. As mentioned in the docs, the module function only works with Jasmine.
Using Testacular, the following example configuration file will load angular-mocks.js.
/** example testacular.conf.js */
basePath = '../';
files = [
JASMINE,
JASMINE_ADAPTER,
'path/to/angular.js',
'path/to/angular-mocks.js', // for angular.mock.module and inject.
'src/js/**/*.js', // application sources
'test/unit/**/*.spec.js' // specs
];
autoWatch = true;
browsers = ['Chrome'];
And, as suggested elsewhere, you can run Testacular with debug logging to see what scripts are loaded (you can also see the same in the inspector):
testacular --log-level debug start config/testacular.conf.js
The angular.mock.inject docs include a pretty complete example.
We use 'module' without 'angular' in our unit tests and it works fine.
CoffeeScript:
describe 'DiscussionServicesSpec', ->
beforeEach module 'DiscussionServices'
beforeEach inject ... etc.
which compiles to
JavaScript:
describe('DiscussionServices', function() {
beforeEach(module('DiscussionServices'));
beforeEach(inject(function ... etc.
The only time I see something like the error you described is if in the testacular.conf.js file the angular-mocks.js file is not listed in the files section before the specs trying to use 'module'. If I put it after my tests in the 'files' list I get
ReferenceError: Can't find variable: module
(Our tests are being run through PhantomJS)
I had included angular-mocks.js in my karma config, but was still getting the error. It turns out the order is important in the files array. (duh) Just like in the head of an html doc, if a script calls angular before it's defined, and error occurs. So I just had to include my app.js after angular.js and angular-mocks.js.
If you're using Yeoman and its angular-generator, you probably get this error. Especially when you do the Tutorial ( ._.)
I fixed it, by copying the angular-mocks.js file, from the bower_components/angular-mocks dir to the test/mock dir. Of course you have to be sure, that your karma.conf.js file is configured correctly.
Greetings!
I had this same issue when I was doing something like var module = angular.module('my',[]). I needed to make sure it was surrounded by IIFE