前端集成解决方案（二）[进阶]

grunt files的处理方式：

 1 grunt.initConfig({
 2     copy: {
 3         dist: {
 4             src: ‘<%= app %>/index.html‘,
 5             dest: ‘<%= dist %>/index.html‘
 6         }
 7     },
 8
 9     clean: {
10         dist: {
11             src: ‘<%= dist %>/index.html‘
12         }
13     }
14 });

 1 // 两个文件复制
 2 grunt.initConfig({
 3     //引入config配置
 4     config: config,
 5
 6     /**在命令行里，先安装好 grunt-contrib-copy 和 grunt-contrib-clean
 7     * Gruntfile.js文件配置完毕后，在命令行中运行grunt copy命令
 8     * */
 9     copy: {
10         dist: {
11             files: [
12                     {
13                        src:‘<%= config.app %>/index.html‘,
14                        dest:‘<%= config.dist %>/index.html‘
15                     },
16                     {
17                        src:‘<%= config.app %>/js/script.js‘,
18                        dest:‘<%= config.dist %>/js/script.js‘
19                     }
20             ]
21         }
22
23     },
24
25     clean: {
26         dist: {
27             src:[‘<%= config.dist %>/index.html‘, ‘<%= config.dist %>/js/script.js‘]
28         }
29     }
30
31 });

 1 //多个文件复制
 2 grunt.initConfig({
 3     //引入config配置
 4     config: config,
 5
 6     /**在命令行里，先安装好 grunt-contrib-copy 和 grunt-contrib-clean
 7     * Gruntfile.js文件配置完毕后，在命令行中运行grunt copy命令
 8     * */
 9     copy: {
10         dist: {
11             //键是目标文件，值是源文件
12             files:{
13                 ‘<%= config.dist %>/index.html‘:‘<%= config.app %>/index.html‘,
14                 ‘<%= config.dist %>/js/script.js‘:‘<%= config.app %>/js/script.js‘
15             }
16         }
17
18     },
19
20     clean: {
21         dist: {
22             src:[‘<%= config.dist %>/index.html‘, ‘<%= config.dist %>/js/script.js‘]
23         }
24     }
25
26 });

1 //清除目录下的所有文件夹和文件
2 clean: {
3     dist: {
4         // ** 匹配任意字符和反斜杠
5         // * 值匹配普通字符
6         src:[‘<%= config.dist %>/**/*‘]
7     }
8 }

 1 clean: {
 2     dist: {
 3         // ** 匹配任意字符和反斜杠
 4         // * 值匹配普通字符
 5         src:[‘<%= config.dist %>/**/*‘],
 6             filter: ‘isFile‘ // 只删除文件，js文件夹被保留
 7         }
 8 }
 9
10 //另一种方式，只删除文件，js文件夹被保留
11 clean: {
12     dist: {
13         src:[‘<%= config.dist %>/**/*‘],
14         filter: function (filepath) {
15             return (!grunt.file.isDir(filepath));
16         }
17     }
18 }

copy配置，各个参数的认识：

 1 copy: {
 2     dist: {
 3         files:[{
 4             expand: true,
 5             cwd: ‘<%= config.app %>‘,
 6             src: ‘**/*.js‘,
 7             dest: ‘<%= config.dist %>‘,
 8             ext: ‘.js‘,
 9             extDot: ‘last‘,
10             flatten: true
11         }]
12    }
13
14 }

安装yeoman
Yeoman：现代Web App的脚手架工具

Yeoman的作用：
在Web项目的立项阶段，使用yeoman来生成项目的文件，代码结构，
Yeoman自动将最佳实践和工具整合进来，大大加速和方便了后续的开发。

安装cmder便于管理命令行(windows)

//安装angular发生器
npm install -g generator-angular

mkdir angular-in-action
cd angular-in-action

//生成angular，learnangular是自定义的名称，可有可无
yo angular learnangular

//安装grunt
npm install grunt --save-dev

//bower安装要用的框架
bower install angular --save-dev

bower.json中查看bower安装的前端框架和组件