AngularJS + CoffeeScript 前端开发环境配置详解(3)

以下配置是从 generate-angular 中拷贝过来用的:

// Reads HTML for usemin blocks to enable smart builds that automatically // concat, minify and revision files. Creates configurations in memory so // additional tasks can operate on them useminPrepare: { options: { dest: '<%= config.dist %>' }, html: [ '<%= config.app %>/index.html' ] }, // Performs rewrites based on rev and the useminPrepare configuration usemin: { options: { assetsDirs: [ '<%= config.dist %>', '<%= config.dist %>/images' ] }, html: ['<%= config.dist %>/{,*/}*.html'], css: ['<%= config.dist %>/styles/{,*/}*.css'] }, // The following *-min tasks produce minified files in the dist folder imagemin: { dist: { files: [ { expand: true, cwd: '<%= config.app %>/images', src: '{,*/}*.{gif,jpeg,jpg,png}', dest: '<%= config.dist %>/images' } ] } }, svgmin: { dist: { files: [ { expand: true, cwd: '<%= config.app %>/images', src: '{,*/}*.svg', dest: '<%= config.dist %>/images' } ] } }, htmlmin: { dist: { options: { customAttrAssign: [/\?=/], collapseBooleanAttributes: true, collapseWhitespace: true, removeAttributeQuotes: true, removeCommentsFromCDATA: true, removeEmptyAttributes: true, removeOptionalTags: true, removeRedundantAttributes: true, useShortDoctype: true }, files: [ { expand: true, cwd: '<%= config.dist %>', src: ['{,*/}*.html', 'views/{,*/}*.html', 'templates/{,*/}*.html'], dest: '<%= config.dist %>' } ] } }

这里需要说明的是 app/index.html文件,也就是在配置中:

useminPrepare: { html: [ '<%= config.app %>/index.html' ] }

这个选项是给 usemin 插件去找脚本引用的,这里默认只是设定了 index.html 文件,因为这是一个Angular SPA项目,所以只有一个index.html文件作为主入口,如果你具有多个不同的视图模板,而且所引用的 script 都不要一样的话,可以将这些模板页明确地放在这个 html 数组选项中。

关于usemin的详细用法可以参考google的官方文档,以下只是对最常用的部分进行讲解,力求不去看官方那个庞大的英文文档也能快速地使用起来。

打开 index.html :

<!doctype html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>Project Title</title> <!-- build:css styles/vendor.css --> <!-- bower:css --> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" /> <!-- endbower --> <!-- endbuild --> <!-- build:css styles/main.css --> <link rel="stylesheet" href="styles/main.css"> <!-- endbuild --> <!-- build:js scripts/vendor.js --> <!-- bower:js --> <!-- endbower --> <!-- endbuild --> <!-- build:js({.tmp,app}) scripts/index.js --> <!-- endbuild --> <base target="_blank"> </head> <body ng-strict-di> <div ui-view></div> </body> </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/01027a6efbaa1e077b75be97a6fd0b1d.html