Using the gulp tasks from the yeoman generated Aurelia app I'm trying to bundle a custom application. When I run gulp bundle the following error is reported.
Where can I find a log to help track down this file or the reference to this file?
Double check your config.js
I've seen this from time to time, and it's usually an issue of the config.js. You'll want to make sure:
The github, npm, or wherever your text plugin is located is above your '*' line.
The text plugin is mapped.
The plugin files are located where (1) and (2) are pointing.
So, something like this:
config.js
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*",
"*": "dist/*"
},
map: {
"text": "github:systemjs/plugin-text#0.0.4"
}
And jspm_packages/github/systemjs/plugin-text#0.0.4 exists.
If all else fails, try deleting your jspm_packages folder, and typing jspm install text.
Related
I was recently trying to debug errors in a next.js getting started project and realized that it didn't like a .babelrc file in a parent directory.
My questions are:
Why is the project throwing an error on a .babelrc configuration file in a parent directory that's not part of the project? Does it recursively look for a babel configuration file in all parent directories or did I at some point configure babel to look at that config file? How can I check what that configuration is?
Is this a quirk of next.js that makes it look for a configuration file in a parent directory?
I forgot if I had added that .babelrc configuration in the parent directory - is that something that I needed? What is the configuration? How should I update it to make the error go away?
ERROR in ./pages/index.js
Module build failed: ReferenceError: [BABEL] /Users/me/Projects/foo/foo-web/pages/index.js:
Using removed Babel 5 option: /Users/me/Projects/.babelrc.optional
- Put the specific transforms you want in the `plugins` option
.babelrc
"optional": ["es7.classProperties"]
babel is looking first .babelrc file is present in the root directory
you have to create the .babelrc file
npm install babel-plugin-transform-runtime
insert to .babelrc
{
"plugins": [
"transform-runtime"
]
}
more info
I am learning Ionic 2; writing code in Visual Studio code. I created project using following command:
> ionic start --v2 MyFirstIonic blank
And then
> cd MyFirstIonic
> ionic platform add android
When I build and run, > ionic run android, ionic creates assets folder in www directory and copies font files for Ionicons, Roboto, and Noto-sans, which are added in apk during build process. I'd like to exclude Ionicons, Roboto, and Noto-Sans from final build, and use FontAwesome files instead. How will I be able to achieve this?
You need to edit your node_modules/#ionic/app-scripts/copy.config.js.
Sample file here.
Remove copyFonts entry :
copyFonts: {
src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
dest: '{{WWW}}/assets/fonts'
},
from the file. This copies the ionicon fonts to your www folder.
Also remove the assets you do not need from src/assets folder.
You can edit copy.config.js file to add any other assets into the build process.
Refer answers here.
I would suggest you delete the unnecessary files from:
[project]/node_modules/ionic-angular/fonts/
(Keep the ionicons.* files.)
You'll still have to do that every time you update ionic-angular but it's easier and less error prone than keeping track of changes to the app-scripts bundle.
Additionally, comment out the roboto and noto-sans imports in:
[project]/src/theme/variables.scss
--
If you still want to update the script then the right way to do that is to copy the file locally as [project]/src/webpack.config.js and add the following entry to your package.json:
"config": {
"ionic_webpack": "./webpack.config.js"
}
--
Hope that helps!
For instance with bower I could do something like this to get only the scss files (excluding js):
{
"dependencies": {
"bootstrap-sass": "~3.3.5"
},
"overrides": {
"bootstrap-sass": {
"main": [
"assets/stylesheets/_bootstrap.scss"
]
}
}
}
I am having an hard time understanding how to do it with systemjs. in the config.js file I guess but even reading the docs I could not figure it out.
My use case is: while developing I am loading Material angular with systemjs but I want to load only the js files, not the css, which I want to manage indenpdently in my scss. Instead systemjs keep loading the file angular-material.css. I just started with systemjs and jspm, hope you can help.
nb: my problem is not related to the jspm build or bundle process but to the development time with these tools.
JSPM supports overrides as well. See https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#testing-configuration for configuration options.
Using JSPM overrides you can easily override the main file and directories and files that you need from a module.
Upd. The css dependency is defined in the registry: https://github.com/jspm/registry/blob/974beb8b6520f4c1b3c6373db32ad05da5c82446/package-overrides/github/angular/bower-material%400.4.0.json It needs to be overwritten with the local override.
I'm using ember as part of a bigger project and so both dev and production build into a subdirectory somewhere else. Can I specify output-path as a setting rather than on the commnad line?
You could modify your package.json and add in the scripts there such as:
"scripts": {
"buildprod": "ember build --environment=production --output-path=yourProdPath",
"builddev": "ember build --output-path=yourDevPath"
}
And just run them in the cli npm buildprod.
Create a file named .ember-cli inside the app folder and mention the output path. Ember will recognize the path automatically when we do "ember build"
{
"outputPath" : "D:/MyApplication/working/ember"
}
I have this ionic.project file:
{
"name": "foobar",
"app_id": "com.foo.bar",
"gulpStartupTasks": [
"styles",
"source",
"watch"
],
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
],
"sourceModules": {
"ionic": "git://github.com/driftyco/ionic.git",
"ng-cordova": "git://github.com/driftyco/ng-cordova.git"
}
}
But the gulp tasks are not being executed, I even added some console.logs to debug but nothing happened.
Any ideas?
UPDATE:
I've detected that the gulpStartupTasks are being executed asynchronously with the Ionic initialization, so when Ionic tries to find the www folder and don't find it (because my startup tasks haven't run yet) it fails and kill the process
But if I create an empty www folder to trick Ionic it works but opens a browser with an error saying that the index.html haven't been found
However, some seconds after that I see the startup tasks being executed in my shell
And if I refresh the page it works
How can I make these startup tasks run before ionic tries to find the www folder?
According to the latest Ionic-Cli documentation, if you want any gulp tasks to run before the app is served, add a serve:before task to the gulpfile.js file in your project root. In your case this would be:
gulp.task("serve:before", [
"styles",
"source",
"watch"
]);
I figured that Ionic wasn't ignoring gulpStartupTasks as I've previously updated the question, but rather executing them asynchronously to the server initialization.
To fix that I've added a postinstall script in my package.json to do the job of creating the www folder, processing the source files and then copying them to the www folder.
That solved the problem, but I still don't understand why gulpStartupTasks execute async instead of sync, it seems to be wrong. Don't you?
So I figured this out. I'm guessing that you, like myself, are editing in a different .sass or .scss file than the one that comes with ionic skeleton apps. In this case you need to add this new path to the gulp file or livereload will pick up the changes, but not actually perform the 'sass' command on the path with your new SASS file(s).
Here's my edited paths line in gulpfile.js
var paths = {
sass: ['./scss/**/*.scss', './www/sass/**/*']
};
'./www/sass/**/*' is where I put my new SASS files that I #import in the main ionic.app.scss file.
// Include all of Ionic
#import "www/lib/ionic/scss/ionic";
#import "www/sass/test";