问题
I have a grunt tasks to concat and minify all my javascript files into one single file and the javascript file is in dist folder. "dist/<%= pkg.name %>.min.js'"
"Gruntfile.js"
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/main/resources/app/js/**/*.js',
'src/main/resources/app/config/*.js',
'src/main/resources/app/app/js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'src/main/resources/app/dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask("default", ["concat", "uglify"]);
};
Now, how can I use this minified version of javscript? Moreover, my index.html entry point of my code points to the non-minified version.
"index.html"
<div ui-view/>
<script data-main="config/require-conf" src="vendor/requirejs/require.js"></script>
回答1:
You could use usemin from https://www.npmjs.com/package/grunt-usemin. Usemin, with other tasks as
- concat
- uglify
- cssmin
- filerev
is able to minify all js and css in one single file. You only need to add a build:js as you can see in snippet below:
<!-- build:js SCLogic.min.js -->
<!-- Load app main script -->
<script src="app/app.js"></script>
<!-- Load services -->
<script src="app/services/authInterceptorService.js"></script>
<script src="app/services/authService.js"></script>
<script src="app/services/blablaService.js"></script>
<!-- Load controllers -->
<script src="app/controllers/indexController.js"></script>
<script src="app/controllers/homeController.js"></script>
<script src="app/controllers/loginController.js"></script>
<script src="app/controllers/blablaController.js"></script>
<script src="app/directives/validNumber.js"></script>
<script src="app/controllers/angular-locale_es-es.js"></script>
<!-- endbuild -->
回答2:
You can just include the js file the normal way.
<script src="path to the minified file"></script>
in your index.html. Minified file is just like a normal JS file. What it does is:
- It will merge all the mentioned JS files into a single file.
- It will then minify it i.e it will remove the white spaces and auto change the variable names.
- Advantage of this is you will have a lower size file and a single http request made from your browser which will help you load the page at a faster speed.
来源:https://stackoverflow.com/questions/33470694/how-to-use-minified-javascript