我有一个咕噜任务Concat的和我所有的javascript文件再压缩成一个单一的文件以及JavaScript文件是DIST文件夹中。 DIST /<%= pkg.name%> min.js'
Gruntfile.js
module.exports =功能(呼噜声){ grunt.initConfig({ PKG:grunt.file.readJSON(的package.json), CONCAT:{ 选项:{ 分隔器: ';' }, 距:{ SRC:['。钢骨混凝土/主/资源/应用/ JS / ** / * JS', 的src / main /资源/应用/配置/ *。JS', 的src / main /资源/应用程序/应用程序/ JS'], DEST:DIST /<%= pkg.name%GT;的.js } }, 丑化:{ 选项:{ 横幅:/ *! &所述;%= pkg.name%GT; <%= grunt.template.today(DD-MM-YYYY)%GT; * / n' }, 距:{ 文件:{ 的src / main /资源/应用/距离/<%= pkg.name%GT; .min.js':'<%= concat.dist.dest%GT;'] } } } }); grunt.loadNpmTasks('咕噜-的contrib-CONCAT'); grunt.loadNpmTasks('咕噜-的contrib-丑化'); grunt.registerTask(默认,[CONCAT,丑化]);};
现在,我该如何使用javscript这个minified的版本?此外,我的code点我的index.html切入点,以非缩小的版本。
的index.html
<格UI画面/><脚本数据主要=配置/要求-conf的SRC =供应商/ requirejs / require.js>< / SCRIPT>
解决方案
您可以从 HTTPS使用usemin ://www.npmjs.com/package/grunt-usemin 。 Usemin,与其他任务
CONCAT 丑化 cssmin filerev能来缩小所有的JS和CSS在一个单一的文件。你只需要添加一个版本:JS,你可以在下面看到片段:
rr
< - 编译:JS SCLogic.min.js - >r <! - 加载应用程序的主脚本 - >r <脚本SRC =应用程序/ app.js>< / SCRIPT>r <! - 加载的服务 - >r <脚本SRC =应用程序/服务/ authInterceptorService.js>< / SCRIPT>r <脚本SRC =应用程序/服务/ authService.js>< / SCRIPT>r <脚本SRC =应用程序/服务/ blablaService.js>< / SCRIPT>r rr <! - 负载控制器 - >r <脚本SRC =应用程序/控制器/ indexController.js>< / SCRIPT>r <脚本SRC =应用程序/控制器/ homeController.js>< / SCRIPT>r <脚本SRC =应用程序/控制器/ loginController.js>< / SCRIPT>r <脚本SRC =应用程序/控制器/ blablaController.js>< / SCRIPT>r r <脚本SRC =应用程序/指令/ validNumber.js>< / SCRIPT>r r <脚本SRC =应用程序/控制器/角locale_es-es.js>< / SCRIPT>r r <! - endbuild - >
rrr
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>
解决方案
You could use usemin from https://www.npmjs.com/package/grunt-usemin. Usemin, with other tasks as
concat uglify cssmin filerevis 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 -->
相关推荐
最新文章