I'm not sure if I'm correct or not but it seems that my gulp setup automatically creates a vendor.JS with all the dependencies I have in my bower.JSON and an app.JS with all th JS files i have on my project.
Both files are also uglified.
Is there a way to prevent that behavior and just get all the JS files injected in the index.HTML ?
First. If you want to set order of downloading scripts, you can use gulp-rigger.
After installing it you can create main.js file and set there:
//= path/to/script1.js
//= path/to/script2.js
...
//= path/to/scriptN.js
Next just uglify only this file.
Second. If you want to exclude files from gulp task processing, you can use next:
gulp.src(["/your_scripts_dir", "!your_scripts_js/*.min.js"]).
.pipe(...)
...
See also this answer https://stackoverflow.com/a/24648667/5397119
Related
my index.php is like the following :
<script src="app/bower_components/jquery/dist/jquery.min.js"></script>
<script src="app/bower_components/angular/angular.min.js"></script>
<script src="app/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="app/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
I would like to add webpack to bundle all these files and minify them
I did not find the way to do that.
I have installed npm , node and webpack
I manged to us webpack to simple files like: webpack entry.js bundle.js . but not for my angular app
Let me answer it in general and then specific to your use case.
IN GENERAL:
Webpack
is a module bundler
needs entry and output as minimum
configuration
Where do i configure/list-out all my application code?
You dont configure it but code it. Please read on...
How webpack knows what code/modules to pick up to bundle?
Webpack will look at the code configured for entry and then internally builds its module dependencies (as dependency graph).
How do you declare module dependencies?
In short: by using require("module-or-path-here") or import "module-or-path-here". Do note that the javascript (ES6 a.k.a ES2015) itself has native module support now. Here is a good article on JS modules.
What is dependency graph?
Webpack will start with the code configured for entry and then pick up its immediate dependencies. It then goes to find out the dependencies of those immediate dependencies and so on...
Once the dependency graph is complete, webpack will start processing them and bundle them into output.filename located at output.path
Fine, but i want to perform some resource (JS / CSS / SCSS / images, etc..) specific work for ex. minify js code. How to do that?
Webpack is flexible (and powerful) and allows to configure resource specific work via loaders and plugins.
IN SPECIFIC:
The modules in AngularJS (i.e. 1.x) are not same as the modules that webpack works with. As you can see, while declaring the modules in angularJS, you are defining modules with angular by calling angular.module.
One option is to make sure to bundle all your angular module definition files (i.e that consists of angular.module("module-name-here", ["depenndencies"])) first followed by the angular components that needs those modules. There are several way to do that. For ex. name all your angular modules declaration files with a common pattern and then configure webpack to pick them up first.
Minification is pretty simple to achieve with webpack. You can try one of the options pointed out in the webpack documentation.
I have a "huge" angular project, with lot directories with .less, .js, .html, .jpg etc. files:
I do not want to set the entry points and import/export statements in all of these files because it is impossible, I just want to include them to bundle 'dynamically' and run so I created a loader.js file which loads .js files:
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./src/', true, /\.js$/));
But now I have three problems:
1. This script loads only .js files (webpack says that I should use another loader for .html files)
2. I cannot load .html files separately in config because I will have a big amount of them.
3. This script loads .js files but there is a problem with dependencies. For example controller can be put earlier than module declaration what will cause an error.
To help you imagine my problem, I would like to include a library which contains a lot of .js and .html files. I do not know a structure of this library so I do not know what to import where but I want to have it in bundle.
How can I resolve my problem?
Regards
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"))
});
So everytime i add/remove/rename a file of my angularjs project the index.html file is changed accorgingly by the inject gulp process.
The consequence is that if in a team more people change file paths the index.html file is constantly conflicted and must be manually merged.
How can i solve this?
I think that a solution can be:
index template file that is versioned but only contains placeholders for the injection of external scripts and then a gulp process that builds at runtime a temporary index.html file that is not versioned.
How can i achieve this?
gulpfile.js ->
https://gist.github.com/bolza-admedo/32fec5026d2433c346fd
gulp.config.js -> https://gist.github.com/bolza-admedo/2712631f093a901be73c
add your resulting index.html to .gitignore, I assume you are using GIT as your source control.
.gitignore:
dist/index.html
you make your changes to index.html, then your gulp process builds another index.html that is placed in dist folder for example, that is along with other build artefacts, like JS and CSS are excluded from git repository
rule of thumb: everything that is produced by your build - is excluded from git
I have several modules that require some template partials to be loaded whenever the module is used. I am storing these files in a folder called partials inside each module subfolder. My starting point for my app is meanjs, and I am storing partials file are in public/modules//partials/*.html.
I have seen several ng-include and directive examples, but being new to AngularJS each sample I read confuses me further as to what is best practice / most AngularJS appropriate way to do this.
Store your partials whenever you wants.
To load them all use angular template cache.
Use Grunt or gulp to generate automatically. Personally I use gulp.
Here is my working example of one of my project.
install nodejs and npm
npm intall gulp -g
npm install gulp-angular-templatecache
create gulpfile.js
var templateCache = require('gulp-angular-templatecache'),
watch = require('gulp-watch');
gulp.task('generate', function () {
gulp.src('public/*/partials/*.html')
.pipe(templateCache('templates.js', {module: 'YOURMODULENAME', standalone: false}))
.pipe(gulp.dest('public/js'));
});
gulp.task('watch-partials', function () {
gulp.watch('public/*/partials/*.html', ['generate']);
});
then use it like this:
gulp generate - to regenerate partials
gulp watch-partials - watch file changes, if partials are changed it automatically run generate task for you. :)
One more thing, dont forget to include template.js in your html file
<script src="public/js/template.js"></script>
Every time you change your partial dont forget to regenerate your template cache.
You should take advantage of $templateCache. In your partials folder define the templates like this:
angular.module('yourTemplateModule', []).run('$templateCache', function ($templateCache) {
$templateCache.put('yourTemplate', '<div>...some HTML here...</div>');
}
Then create a module, named for example 'app.tpls', which has as dependencies all your template modules. Inject it as dependency to your main app module, probably located in meanjs and now you have your templates ready whenever you need them in your application. You retrieve them by calling:
$templateCache.get('yourTemplate');