Here is my GruntFile
files: {
'../index.html':
[
[
'../node_modules/**/*.min.js',
],
[
'../js/test/test.js',
'../css/main.css'
]
]
}
The issue with this, is that every min.js file inside my node_modules is gonna be injected. However, I would only like to include the main file of each dependencies (which sometimes can be in node_modules//dist/ and sometimes directly at the root of dep.
Is there a way to specify, only include the "main file" of each dep ?
Let me know if it needs clarification
I think I understand what you are saying. If you only want to include a certain file just explicitly state it. I don't know if this was obvious but the * symbol is a catch all.
Example:
files: {
'../index.html':
[
[
'../node_modules/dist/first.min.js',
'../node_modules/dist/js/second.min.js' <-- usually the last one doesn't have a comma.
],
[
'../js/test/test.js',
'../css/main.css'
]
]
}
Related
I want pm2 to stop watching folders which have a name like cache or tmp.
I tried a lot of manners in my app.json config file :
{"apps": [{
"name": "BSTAT",
"script": "./server/app.js",
"watch": true,
"ignore_watch": [
"HERE IS WHAT I HAVE TRIED ==>",
"*cache*",
"*/cache",
"cache/",
"*cache/*"
],
}]}
and also saw this question who doesn't seem to have an exemple of that case.
The only way that I find to resolve the problem was to put the exact path like server/my-module/cache
I can not bring myself to think this is not possible...that's why I request your help :)
you need a regex for this, e.g.:
ignore_watch : ['./**/*tests.js', ]
this pattern will ignore all files with name "tests.js" in all project folders
How do I setup my gruntfile.js to have a specific file be the last file included in uglify. For example, I have an autoloader.js file that I want to be the last file included in uglify. I have many other .js files so I'm dynamically combining all files in the directory.
I know if there's a file I want included first - I list it first eg:
files: {
'Scripts/application.js': [
'bower_components/moment/moment.js',
'Scripts/assets/defaults.js',
'Scripts/assets/api.js',
'Scripts/assets/**/*.js'
]
}
I want to keep the dynamic grabbing of all files as we add new files regularly. But I need my autoloader.js to be last.
I'm hoping there's a better way than renaming it to zAutoLoader.js
NOTE: The following does NOT work
files: {
'Scripts/application.js': [
'bower_components/moment/moment.js',
'Scripts/assets/defaults.js',
'Scripts/assets/api.js',
'Scripts/assets/**/*.js',
'Scripts/assets/autoloader.js
]
}
nor does
files: {
'Scripts/application.js': [
'bower_components/moment/moment.js',
'Scripts/assets/defaults.js',
'Scripts/assets/api.js',
'Scripts/assets/**/*.js',
!'Scripts/assets/autoloader.js'
'Scripts/assets/autoloader.js'
]
}
When my Node app includes the routes from my App I want to ignore non-js files e.g.
import './scss/App.scss' // i.e via Router.js -> Routes.js -> App.js
At the moment Node is obviously throwing a parse error as it's trying to parse the scss as js. The babel hook currently looks like this:
require('babel/register')({
stage: 0
});
Any ideas how I can make babel ignore them? Thanks
Turns out it was node that needed the tweak:
require.extensions['.scss'] = () => {};
You can create .babelrc file and set ignore rule:
{
"stage": 0,
"ignore": [
"*.scss"
]
}
You can read more about this here - https://babeljs.io/docs/usage/babelrc/
You can use babel-plugin-transform-import-ignore to ignore matched imports. All matched import statements will be removed after compilation.
{
plugins: [
[
"babel-plugin-transform-import-ignore",
{
patterns: [".scss"]
}
]
]
}
Setup:
A Gruntfile with the following task:
concat: {
build: {
files: {
'build/app.js': [
'src/.js',
'src//.js',
'!src/vendors/'
],
}
}
A lot of angular modules, with its controllers, services, and so on, with a structure like this:
a/
a.js // Module declaration like: angular.module('a',[])
a-controller.ks // Which sets a controller in its root module definition like: angular.module('a').controller()...
Issue:
The task concatenates all the js files it finds in the build folder to a single app.js file, and it does this fine, but messes up with the order of files when concatenating.
For instance, it concatenates first the controller file instead of the main folder file containing the module declaration, triggering the following error:
Module xxxx not available!
I suppose the issue lies in the way concat builds up the files and that is done by the grunt core and specifically the minimatch library, and the possibility it treats dashes to be first than letters, but I don't know how configure to change that behavior, and even know if that is possible.
Question:
So, the question is: How can I make Grunt/Grunt-concat to process dashed f first than the others in the same folder so the ordering is maintained?
Thanks
Update 1:
After digging more, It seems that it has nothing to do with the ordering inside a folder, but Grunt/Core sending the root files to the end and putting them the leaf ones first.
Just specify the order you want to concat your files, placing them in order, what I mean is, first add your single files that should be concatenated at start, after your full folder that does not need to have an order, and finally your final files, something rougth like this:
grunt.initConfig({
concat: {
js: {
src: ['lib/before.js', 'lib/*', 'lib/after.js'],
dest: 'bundle.js',
}
}
});
You will have to specify to the grunt-concat task the order you want your files built. For my projects, I typically keep a folder structure where controllers go in a app/controllers folder, services in services, and etc, but names can vary. I also keep an app.js that declares my app module and specifies the config handler for it. I use a config like this for grunt-uglify but the same can be done for concat with little to no changes:
uglify: {
development: {
files: {
'public/scripts/app.js': [
'public/app/app.js',
'public/app/controllers/*.js',
'public/app/directives/*.js',
'public/app/services/*.js'
]
}
}
}
I just copy paste my answer, the detail you want on second picture, i hope help you.
you may consider this solution
Separate the module declaration to xxx.module.js
In grunt-contrib-concat modify the config like below :
place this outside grunt.initConfig
var clientApp = './app/';
grunt-contrib-concat config
dist: {// grab module first, state the second
src: [
clientApp+'**/*-controller.js',
clientApp+'**/*.module.js',
clientApp+'**/*.state.js',
clientApp+'**/*.js'
],
dest: 'dist/<%= pkg.name %>.js'
}
i use state to so i have to define state too before trying to navigate to any state. This is preview my code, the module declaration is declared fist before anything, then my state. even minified doesnt create any problem.
I hope this help you.
i follow this johnpapa's style guide, your problem might solve there if my solution not work
I'm at the beginning of building my project and I get some errors that couldn't realize why they are being occured.
You can see contents of my app.profile.js file below. I execute
"build profile=../../app.profile.js -r" this line from command prompt and I get no error after the process is done. My problem is if I copy the release(built) version of these packages to the place where the unbuilt versions exist, I get too many javascript errors like "Error: multipleDefine". Even if I copy only dojo, dojox and dijit folders, same errors are keep occuring.
When I look the differences between built and unbuilt of two js files, (for example dojo/Deferred) the only difference I realize is this:
//built
define("dojo/Deferred", [
"./_base/lang",
"./promise/CancelError",
"./promise/Promise"
], function(
define([
"./_base/lang",
"./promise/CancelError",
"./promise/Promise"
], function(
So I'm a little bit stucked at the beginning. I want to try using layers to reduce http requests as soon as possible but I need some help about the situation I mentioned. Any help will be greatly appreciated, thanks.
app.profile.js:
var profile = {
basePath: "..",
layerOptimize: "shrinksafe.keepLines",
optimize: "shrinksafe",
releaseDir: "./release",
hasReport: true,
packages: [
{
name: "dojo",
location: "./dojo"
},
{
name: "dijit",
location: "./dijit"
},
{
name: "app",
location: "./app"
},
{
name: "dtk",
location: "./dtk"
},
{
name: "dojox",
location: "./dojox"
}
],
layers: {
"app/layers/core": {
include: [
"dojo/_base/declare",
"dtk/core/ILifeCycle",
"dtk/core/AppConfig",
"dtk/core/TopicContext",
"dtk/core/NavigationContext",
"dojo/require",
"dojo/_base/Deferred",
"dojo/DeferredList",
"dojo/_base/lang"
]
},
"app/layers/appcontext": {
include: [
"dtk/core/AppContext"
],
exclude: [
"app/layers/core"
]
}
}
};
The Dojo builder will add a module identifier to every module definition unless you tell it not to. This can produce the multipleDefine error.
From the builder documentation:
insertAbsMids (default = undefined)
[truthy] Causes the transform to ensure that every AMD define
application includes a module identifier argument.
[falsy] The
transform does nothing to the module identifier argument in define
applications. In particular, a falsy value doe not cause the
transform to remove a module identifier argument that exists in the
source code.
I was having exactly the same problem until I added insertAbsMids:false to my profile.
eg:
var profile = {
basePath: "./",
releaseDir: "release",
action: "release",
layerOptimize: "shrinksafe",
optimize: "shrinksafe",
cssOptimize: "comments",
mini: false,
insertAbsMids: false,
packages: [
{ name: "dijit", location :"dijit" },
{ name: "dojox", location :"dojox" },
{ name: "dojo", location :"dojo" }
]
}
If your problem is with the id that gets created in the AMD module define(id, [deps], factory)..
I was having a similar issue, I had to manually remove all the id's on the compressed files:
//built
define([
"./_base/lang",
"./promise/CancelError",
"./promise/Promise"
], function()
OR, I had to require the module using the id instead.
For example, I was requiring a module:
require(["app/Dialog"])
which was different than the id added.
require(["demo/app/Dialog"])
It was the only way I got it to work. Anyone else knows how to remove the id or reason why we should always have an id? Not sure if this is relavent to your question, but since you showed the differences.
This will build a layer, requiering all modules needed to create the dojox.image.Gallery besides the components mentioned in the discardLayer.
layers: [ {
name: "../dojox/discardLayer.js",
discard: true,
dependencies: [
"dojox.image.Gallery",
"dojox.image.SlideShow",
"dojox.image.ThumbnailPicker"
]
},{
name: "../drops/layer.js",
layerDependencies: [ "../dojox/discardLayer.js" ],
dependencies: [
"dojox.image.Gallery"
]
Try instead of exclude, use the layerDependencies key - i think the exlude looks for app/layers/core from withing your dojo_source tree and not in dojo_release tree.. So at time of build youre excluding an unknown component.
The above sample is something i've used to be able to override the 3 discarded components elsewhere, however it doesnt suit your needs.
You would need to Not set discard for your core layer and instead simply set it as a dependency (which will exclude all dependencies to the layers, which has allready been built).
Then, depending on which version of dojo youre using - you should call dojo.require("layers.core"); dojo.require("layers.appcontext") or require(["layers/core", "layers/appcontext"], function() { }); to assert that those layers are present.
Before using anything from their dependencies, pull in the requirement with another require call, e.g. dojo.require("dijit.form.Button"); new dijit.form.Button({ ... });. The layer will fill the components into a cached hash (dojo.cache) and to make sure theyre declared fully, pull in the requirement.