Using gulpjs and bower, Id like to start with the bower.json file to call on what package dependencies I want (ideally start the build with html 5 boilerplate, then backbone). Since the whole point of using gulp is for easy project management I would like to understand how to auto insert the scripts in to my project (pulling from the bower_components dir) and add the path to my head tags, I assume this is a responsibility gulp should be handling, in the link below I am under the impression grunt does provide this functionality, so if grunt can gulp should be able to.
This tut seems to cover everything I am looking for, except it is using gruntjs with the plugin "grunt-bowercopy" http://simonsmith.io/managing-bower-components-with-grunt/
So does anyone know how to get gulp and bower to play nicely. It would be cool to download the html 5 boilerplate, then for my javascript include backbone/jquery as well as some css like fontawesome and such with one command bower update, and have it insert the script tags in my header, and pull the main files I need into my project (this would kill a lot of tedious work). I assume grunt does handle this specifically with the "grunt-bowercopy" plugin, so essentially I am looking for a plugin "gulp-bowercopy" or something that provides this?
I still have a lot to learn about gulp/grunt and how to really leverage them, but this seems like an awesome tool to have.
essentially I am looking for a plugin "gulp-bowercopy" or something that provides this
You should then consider looking into either:
gulp-bower
or gulp-bower-files
as they likely provide the same functionality as grunt-bowercopy.
You can just use wiredep directly like the gulp Yeoman generator does. Here's a code sample from the gulpfile.js.
var wiredep = require('wiredep').stream;
gulp.task('wiredep', function () {
gulp.src('app/styles/*.scss')
.pipe(wiredep({
directory: 'app/bower_components',
ignorePath: 'app/bower_components/'
}))
.pipe(gulp.dest('app/styles'));
gulp.src('app/*.html')
.pipe(wiredep({
directory: 'app/bower_components',
ignorePath: 'app/'
}))
.pipe(gulp.dest('app'));
});
Related
I'm using Angular, and as you know, there is Angular "1" (the old version) and Angular 2 (the newest) which include typescript.
This is my problem I've encountered today:
I'm doing an application using angular, so I've created the project folder (project-frontend) and installed locally grunt, with bower I've downloaded the packages for angular.
I've created the gruntfile.js and configured it with these tasks:
"grunt-contrib-concat": "^1.0.1"
"grunt-ng-annotate": "^2.0.2"
"grunt-contrib-uglify": "^2.0.2"
And with many others, like cssmin, htmlmin etc etc, but the problems occours with these tasks, or, precisely with uglify.
The problem is that if I concat all angular js files (angular.js, angular-rout.js, angular-resource.js ...) and I uglify everything, then, when i deploy my war in a Tomcat, i get this error:
TypeError: b is undefined
So, what i think that cause the problem is uglify, because I've tried to run the same tasks for another old project, which was having uglify 1.0.1 and everything works, I've also controlled that if I just run concat and ngAnnotate, the final angular files (the one from this project, and the one from the last) are pratically identical.
I don't know if this has to do something with typescript (seeing the error I thinked about that) because I assumed that typescript have been inserted into angular since 2.0.0 versions, and I'm currently working with a 1.5.8 version (I also tried 1.2.9).
I controlled my application code with jshint (it's the first task that i run) and there are no errors prompted in the terminal.
I've also tried to re-configure the tasks taking as example the old project Gruntfile.js file.
I don't know what to do anymore, I'm blocked with this problem and I don't know how to move further, some advices?
Ok, now that i've found the error, as i writed in the comments under my question, i figured out that concatenating js files like this:
src: 'bower_components/**/*.js'
Which should concatenate all js files inside folders and subfolders in my bower_components directory, simply don't know why but breaks angular final files, if i write
src: ['bower_components/angular/*.js',
'bower_components/angular-route/*.js',
'bower_components/angular-resource/*.js']
Which points directly to all files that need to be concatenated, everything works in my application with angular concatenated and uglified file
I don't know why there's this issue, beacuse if i print in terminal under my project-frontend folder this command:
echo bower_components/**/*.js
I can see this output:
bower_components/angular/angular.js bower_components/angular-resource/angular-resource.js bower_components/angular-route/angular-route.js
By the way this seems to be a solution to this type of problem, I hope this helps somebody in the future
I am using webpack in my Project, here is the tools:
HTML as - jade-html-loader
CSS as - sass-loader
Project written with AngularJS - all with components & templateUrl (ngTemplate-loader in webpack)
So I got 1 JS file in the end of the process.
All this stuff pretty cool, but I think that it will be good to create static HTML files for clients...
It's going to Improve performance(caching / no need to draw DOM elements throw JS) and it's better for browser - to download few small files, not one big JS...
I am wrong? I can't find good tools that generates static assets(html, css)/cache files.
In the end of the line - I need to find an easy way to require Jade files as templates(templateUrl) into Angular Component, but files needs to be static - so I can see them in "Sources" of the browser...
It is hard to explain - so I hope you can understand me =(.
I been there and what i learned is angular cache template are faster then static. You can also copy static html files to dist map using npm cpy tool but i will highly recommend you to use angular cache template. There is this tool you can use for converting you jade to html.
You don't need to build only one single file you could build one for the vendors and one for your app this will keep your app more clean and you can also make one for the only templates which load in angular from cache on demand. I hope i could explain. webpack come with lot's awesome plugins witch can make life easier! good luck
After week I agree that cache templates works fantastic! =).
I used plugin "webpack.optimize.CommonsChunkPlugin" to generate 2 files for my app:
Vendor - all node_modules/bower_components/libs (js+css).
App - all source of app - controllers/models/business logic/views (js,css(sass),html(jade+ngTemplate for angular)).
My entry looks like:
entry: {
app: './src/app.js',
vendor: [
"angular",
"angular-route",
... and other libs...
],
},
And there I found really cool thing: html-webpack-plugin - this plugin creates index.html file and automatically attaches all your generated JS files.
Add Used "hash" string to my files.
My dist looks like this:
/dist
/index.html
/app.xxxxxxxxx.js
/vendor.xxxxxxxxxx.js
Little magic with webpack.optimize.UglifyJsPlugin to minify all files.
And now I got lightweight, small app that waiting for deploy! =)
I have "angular-i18n" installed as a bower dependency.
When I run grunt serve or grunt build I have receive warning:
angular-i18n was not injected in your file. Please go take a look in
"/$APP_ROOT/bower_components/angular-i18n" for the file you need, then
manually include it in your file.
How can I remove this message?
Does making grunt insert this file into my index.html remove this warning?
Background
It appears that your Grunt tasks are using wiredep to look at your Bower dependencies and inject the tags for loading their associated files (link for CSS, script for JS, etc) into your HTML.
wiredep does this by looking at the bower.json file on your project to figure out what you need, then looking in the bower.json file of each dependency to figure out what they need, and so on. Having developed a dependency tree, wiredep uses the main property in the bower.json files to determine what files from each needed package should be linked into your HTML.
When a package does not have an appropriate bower configuration (missing bower.json or missing/improper main property), wiredep warns you about that problem so that you know it couldn't automatically add what you need. In other words, it's telling you that not all assets have been added to your built HTML, and that you need to manually intervene to add what's missing.
General solution
Generally, there is nothing you can do in your own code to correct this. Manually linking the file in your HTML (outside of the wiredep marked areas so as to avoid having it overwritten) will ensure your project works. wiredep, however, will always warn you when it runs because the package itself still has the problem. You'd need to open an issue to the owner of the problem package in order to ask them to correct their packaging meta info.
The project you're having issues with
I searched bower for the angular-i18n package and found that the project is hosted at https://github.com/angular/bower-angular-i18n . If you look at angular-i18n's bower.json you can see that it is missing the main property. This is why the warning is being issued.
As it turns out, though, it seems appropriate that this project does not offer a main property. The documentation for angular-i18n shows that you should bower install it, then manually link to the file that is appropriate for your desired locale. It would not be appropriate for this package to list a main file because it provides many files, none of which should be dictated as necessary by the package--it's a developer choice.
A possible solution for this case
If the warning really bothers you, or you do not like the need to manually link to the file, you could fork this package to your own GitHub account and modify the bower.json file to point main to the file you want loaded. Then you would remove angular-i18n as a dependency for your project, and add your fork's repo as a dependency instead.
Caveats:
This may cause issues keeping up to date if you are unfamiliar with maintaining Git repos/forks.
This will only work if angular-i18n is listed as an explicit dependency of your own project and is not being loaded in as a dependency for another project. If another project is loading this package, you'd have to start forking projects all the way down the tree such that you could override the configuration of each.
All in all, in this case it's probably best to manually link to the file you want and ignore the warning.
I'm getting this error message using angular-i18n in a yeoman project. The wiredep grunt task makes this error message. There are 2 solutions:
1. Exclude angular-i18n and include the file manually in the index.html
Gruntfile.js
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//,
exclude: [
'bower_components/angular-i18n'
]
}
}
index.html
<script src="bower_components/angular-i18n/angular-locale_de-de.js"></script>
or:
2. Override/Set main attribute of bower_components/angular-i18n/bower.json
Gruntfile.js
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//,
overrides: {
'angular-i18n': {
'main': 'angular-locale_de-de.js'
}
}
}
}
I choose to go with the second option overriding the main attribute. This way in the index.html the angular-i18n library still gets automatically injected by the grunt task.
I'm trying to figure out the right way to add any eventual new library (for example I need angularJS ui-router) in an onsen app.
I installed bower and then downloaded ui-router.
Since I do not know exactly the way Gulp is used, I got confused on what I'm suppose to do.
At the moment, I have the following folders:
bower_components, hooks, merges, node, modules, platforms, plugins, www
The index.html has the following reference:
What I suppose to do, now?
manually copy the ui-router js files in /www/lib/
configure gulp to copy the files automatically
change the script tag src and make the reference to the bower_component folder
change the Bower default folder
could you please guide me on sort it out?
tnx
At the end I chose the option 2.
I edited the file gulpfile.js adding a new custom task supposed to copy the missing bower libraries.
var mainBowerFiles = require('main-bower-files');
gulp.task('copy-bower-libs', function() {
return gulp.src(mainBowerFiles())
.pipe(gulp.dest(__dirname + "/www/lib/bower/js"))
});
We have an extjs application where the structure we laid out doesn't exactly match the structure Sencha recommends. In our structure we don't have an app.js but we do have a js where we mention the autoload and launch function, example as below along with the folder structure.
What we are looking is to minify all the JS files in admin folder and create one JS to be used in production, we tried looking at the Sencha CMD but of no luck. Can some one please point us for the exact steps for minifying our application for production use.
Ext.Loader.setConfig({
enabled: true,
paths: {
'Admin': '../../script/js/ace/admin',
'Ext.ux': '../../script/js/ext4/ux'
}
});
Ext.require('Admin.view.Administration');
Ext.application({
name: 'Admin',
appFolder: '../../script/js/ace/admin',
launch: function()
{
Ext.QuickTips.init();
var me = this;
Ext.create('Admin.view.Administration', {
renderTo: 'contentPanel'
});
}
});
We tried Cmd by generating JSB3 file, I know its deprecated in 4.2.1 but with the structure we have we felt that was the only option.
we tried the below command, but no jsb3 file got generated
sencha build admin.jsb3 <path to the admin js folder>
Thanks in advance, any pointers are really appreciated.
I posted this in Sencha forum, but I am expecting a much simpler option then they have provided.
Edit
we have multiple apps, and in most cases we try to use the js from other app folders.
For example in the below image we have utilities and admin apps, from utilities app we use SourceStore and the autoloader is defined as below to access the required
Ext.Loader.setConfig({
enabled: true,
paths: {
'Admin': '../../script/js/ace/admin',
'Utilities': '../../script/js/ace/utilities',
'Ext.ux': '../../script/js/ext4/ux'
}
});
If you let Sencha CMD to generate a skeleton application for you and then merge your existing code with it, then it will be really easy.
Otherwise you can try the old JSBuilder from Sencha as well.
I'd highly recommend checking out grunt with the grunt_sencha_dependencies plugin. Here's a tutorial.
At a high level, what you do is:
1) Run the sencha_dependencies plugin to generate a list of dependencies.
2) Pass the outputs to the uglify plugin to concat and minify the javascript.
3) Use grunt's copy task to replace to update your index.html with the minified output.
edit: I've dealt with Sencha CMD and it is awful. I would not wish it on my worst enemy. Grunt is just way easier.
I recommend you using JAWR. Basically you define in the jawr.properties file your bundles, and say which file or folder belongs to which bundle. A bundle is actually a bunch of JS files that are minified into another single one and can be requested separately in your servlets/JSP files. Besides, you can define dependencies between bundles (which by default are independent), so that when you include a bundle, other bundles are automatically included in your page. To include a bundle you use the special tag <jwr> in your servlet. Besides, you can enable the debug mode, so that when you develop, you can debug your code.
How it works: you add a servlet to your web.xml file to be loaded on start-up, which is also the stage when these bundles are generated (transparent to you).
Some tips:
Check this tutorial
Because in ExtJS the order in which the files are used is important, you should consider it when you define your bundles.
If you are willing to give Sencha CMD another shot, you could try using the sencha compile command.
sencha compile --classpath=folders-your-using,separated-by-commas concatenate --yui --output-file=output.js
--classpath is the folders you want to include.
--yui is the compressor
--output-file is the name of the javascript output.
I would recommend reading the sencha cmd guides. They can be a little intense, but sencha command packs so many tools in it that it probably deserves to be: http://docs.sencha.com/cmd/5.x/advanced_cmd/cmd_reference.html