I have an angular application that uses require.js to load all scripts. The application is deployed to the web server using Hudson CI. When the deploy job runs, I want to:
Minify all JavaScript files but preserve the original file names so that the require.js config file works out of the box.
Have an option to exclude specific JavaScript files while running uglify.
The JS files are distributed all across the application, which has an ontology similar to the following:
app/
common/
controllers/
factories/
services/
assets/
js/
Is there a way to do this?
you need grunt-contrib-uglify
for the excluding files requirement:
http://gruntjs.com/configuring-tasks#files
Related
Sorry that I'm not able to define a title that brings my question to a point. But I will try to explain my problem here:
We're using Grunt in our JavaScript projects to compile Sass files to CSS and to browserify and minify our JavaScript modules.
The Sass and JavaScript sources are located in multiple folders (one per app-module) with the following folder structure:
src/
styles/
base.scss
style.scss
js/
module1.js
module2.js
app.js
The Grunt tasks compiles this file into this structure:
dist/
styles/
style.css
js/
app.js
All files under dist are ignored by Git.
When we deploy our application, we create incremental updates which is basically a git diff --name-only to get a list of files that changed.
Here comes my problem: when I deploy the application, I will have to build all JavaScript and Sass files. As the compiled files are outside of Git, I have no clue which of these files have changed (compared to the latest release) or not.
The only solution that comes into my mind is adding the compiled CSS and JavaScript file to Git, too. But then we will have to struggle with merge conflicts in these files.
Any ideas or experiences how to optimize this workflow?
Update 2017-09-19:
I've changed the title to be more accurate as what I was searching for is a workflow to build incremental updates on a JavaScript-project that uses Grunt and Git.
You shouldn't keep compiled files in your repository - it doesn't make any sense to do so. It only causes merge conflicts and makes a mess in commit history. You should track all neccessary source and configuration files, so that anyone can build easily from any point in history. If you do that, then your problem comes down to
git checkout newVersion
<build>
git checkout oldVersion
<build>
diff newBuild oldBuild
Based on the answer by #Dunno, the workflow for creating updates is now as follows:
Incremental updates
Checkout HEAD into temporary directory with the help of git-archive
Build the project with grunt
Checkout the Commit before HEAD (HEAD^) into temporary directory with the help of git-archive
Build the project with grunt
Compare both directories with the help of git-diff --no-index (which allows to compare files in directories without an index)
Store these differences into an archive with the help of tar and gzip, ignore all files in src folders
Full updates
Checkout HEAD into temporary directory with the help of git-archive
Build the project with grunt
Store all project files into an archive with the help of tar and gzip, ignore all files in src folders
The usage of git-diff --no-index was really the life-saver, as neither diff nor rsync were able to report changes in the way I need them.
My application is using JSPM and SystemJS for module loading and is using angular.
My config.js file has angular map like:
"angular": "github:angular/bower-angular#1.5.8"
So when I do import angular from 'angular', I am getting the angular.js file from the Path specified in config.js file. That's good.
Now the requirement is I want to use minified third party javascript files (angular.min.js) in the app. But there is no minified files in jspm registry
So the initial loading time of my application is high because of so many large files e.g. angular.js, browser.js etc. that takes too much time to load.
I know, I can do a jspm bundle to minify all dependency files recursively which includes vendors' files also. But my questions are:
1 - Is it possible to use vendor's minified file (angular.min.js) directly with JSPM? It is good to use vendor's minified file rather than minifying them ourshelves, Isn't it?
2 - If above one is not possible, then how can I bundle only my application specific files and still able to use (bundle separately) minified angular.js file?
What is the recommended approach here?
In your config.js file you can map any file with a name and have it imported by SystemJs in the browser
So you could potentially do something like
"angular": "jspm_packages/...../angular.min" (The path to your file)
However the recommended approach would be to bundle and minify all your vendor files and as you mentioned, bundle your application specific files separately
You can do this with something like Gulp or Grunt to generate the 2 files
There are lots of examples online of how to do this but here is one to get you started
https://blog.dmbcllc.com/using-gulp-to-bundle-minify-and-cache-bust/
Once you have generated both files you add them to your html page via a script tag
<script src="Your File Path"></script>
Option 2 is the preferred approach and I would recommend spending the time to get setup as you only have to do it one time to get your head around it
I'm currently developing a web-app using node/npm and grunt. I'm new to web-development and come from java development. This is how my prototype's structure looks like:
prototype
|--app
|--index.html
|--index.js
|--dist
|--index.html
|--index.js
|--lib (currently empty)
|--Gruntfile.js
|--package.json
I plan on developing with following structure: My code will be modularized by using npm modules in the lib folder. Those will be included in the index.js. The index.html and index.js files in the app folder will be built for the browser using grunt-browserify and grunt-contrib-copy; results will be put into the dist folder. I also plan on using bootstrap.
In the bootstrap starting-guide, there is written (source), grunt dist would regenerate the dist folder with bootstrap included.
My first question is: How does that happen? I guess you have to place the bootstrap folders somewhere. Or do I need to install some bootstrap related package? In short: How does grunt "know about" bootstrap?
My second question is: How could I include this process in my gruntfile? Right now my gruntfile uses browserify to browserify the index.js and copy to copy the index.html. Those are registered at the goal (is this the right term?) default: grunt.registerTask('default', ['browserify', 'copy', ]);. I'd like to alter this goal by adding the bootstrap magic that happens in grunt dist.
Any help is much appreciated!
The target you are referring to is in bootstraps build environment. You can download this with npm install bootstrap#3 The grunt dist target they are referring too is contained in the downloaded node_modules\bootstrap\Gruntfile.js and is used to compile bootstrap itself for distribution.
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'dist-js']);
The dist target uses several grunt modules like grunt-contrib-htmlmin and grunt-contrib-cssmin and not all may be desired in your setup.
I would suggest taking a look at this file and each of the targets called and modules used for some more guidance on how to proceed.
If you just want to use bootstrap in your project you can download the already compiled and minified libary here and just add them to your project.
I am new to angular js. I followed the docs in their site on how to build an angular 2 app, but the problem is all the .js files are still living in the same directory of the .ts file which will be very problematic if my app grows or have many .ts files. How can make sure after compilation it will be put in the dist directory without using angular cli? Because it tried angular cli, it is very slow. It will take a minute just to reflect a simple changes in my file.
How can i use like this directory structure:
dist
index.html
myapp-component.js
another.js
-- etc...
src
index.html
myapp.component.ts
another.ts
-- etc...
and/or if it is possible to minify or make does js file into 1 big .js file only.
Also to put angular js source files/dependencies in the dist/library folder not from node_modules.
I'm building a hybrid web application with Django on the back end and Backbone on the front end.
The structure is as follows: I generate all the HTML in Django templates, use request.is_ajax to decide which templates to return, and use Backbone to pull in HTML as needed (I do this because I want to support non-JavaScript users).
Anyway, my question is this. As my JavaScript code gets more complex, I would like to be able to do the following things automatically:
Asynchronous JavaScript loading
Concatenating and minifying CSS files
Concatenating and minifying JavaScript files
JS-linting
I'm not too worried about image optimisation or package management. Is this possible with the setup I have? Currently it's a standard Django app:
/media
/js
main.js <-- Backbone code is in here
/plugins
backbone.js
underscore.js
/css
main.css
results.css
/img
/myapp
admin.py
models.py
views.py
/templates
/myapp
index.html <-- references to all JS and CSS files here
I'm not sure if I should be using Yeoman (or just grunt) or Brunch, or if there's a simpler way. Whatever I use, I am not sure if can just drop it into the js directory, or if the location of the templates will complicate things.
Currently I know how to use require.js to load the JS asynchronously, but I don't know how to concatenate, lint etc - hence looking for a tool. Maybe I should just write a shell script :)
I can advice to start with simply brunch. Brunch is simpler than grunt, because its plugins work reasonable out-of-box, without the need to write 500-lines-of-code-gruntfiles. It it also much faster, recompilation of your app will be done instantly.
Your setup shall look like this
public/ # The directory with static files which is generated by brunch.
app.js # Ready to be served via webserver.
app.css # Don’t change it directly, just run `brunch watch --server`.
assets/ # And then all changed files in your app dir will be compiled.
images/
frontend/ # Main brunch application directory. Configurable, of course.
app/ # Your code will reside here.
assets/ # Static files that shall not be compiled
images/ # will be just copied to `public` dir.
views/ # Create any subdirectories inside `app` dir.
file-1.js # JS files will be automatically concatenated to one file.
file-2.js # They will be also usable as modules, like require('file-2').
file-1.css # CSS files will be automatically concatenated to one file.
stuff.css # JS and CSS files may be linted before concatenation.
tpl.jade # You may have pre-compiled to JS templates. Also with `require`.
vendor/ # All third-party libraries should be put here. JS, CSS, anything.
scripts/ # They will be included BEFORE your scripts automatically.
backbone.js
underscore.js
package.json # Contains all brunch plugins, like jshint-brunch, css-brunch.
config.coffee # All params (you can concat to 2, 5, 10 files etc.)
# are set via this config. Just simple, 15 lines-of-code config.
To create new app, take a look at brunch skeletons which are like basic boilerplates. Pick any, then use brunch new --skeleton <url>, launch brunch watcher with brunch watch --server and you’re ready. When you will want to deploy your app, simply build stuff with brunch build --optimize which will automatically minify files.
I can advice to start with simply grunt. There are grunt task for all your needs:
grunt-contrib-usemin will replaces references to your original files with optimized vers
grunt-contrib-uglify will minify your JavaScript
grunt-contrib-mincss will minify your CSS
grunt-contrib-jshint runs jshint on your JavaScript files
use requireJs to load your files ansynchronous and grunt-contrib-requirejs to compile the files into one file if needed