grunt一个angular项目

最新推荐文章于 2024-08-26 08:12:34 发布

原创最新推荐文章于 2024-08-26 08:12:34 发布 · 752 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#grunt #angular

grunt 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用grunt构建工具搭建Angular项目，包括安装node、生成package.json文件、安装并配置grunt及插件（如concat、uglify、jshint、watch、wiredep），以及使用bower安装AngularJS和Bootstrap等依赖。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

grunt搭建angular项目
安装node

命令
a:grunt test 测试合并，压缩，js代码检测，实时监听（执行task）
b:grunt wiredep 命令行运行 grunt wiredep ，自动将bower.json依赖的文件加入到index.html中

1.生成package.json文件
npm init
2.进入到项目文件,安装grunt
npm install grunt –save-dev
3.安装grunt-cli
npm install -g grunt-cli
4.创建Grunt配置文件Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
});
};
5.安装插件
注：插件安装成功都会在package.json中的devDepencies中显示
然后：需要在Gruntfile.js里面配置插件

a.安装concat插件：npm install grunt-contrib-concat --save-dev   //合并js文件
  配置插件
    配置插件    
    concat: {  
        options: {  
            // 定义一个用于插入合并输出文件之间的字符  
            separator: ';'  
        },  
        dist: {  
            // 将要被合并的文件  
            src: ['app/src/**/*.js'],  
            // 合并后的JS文件的存放位置  
            dest: 'app/dist/<%= pkg.name %>.js'  
        }  
    },  
    加载注册插件
    grunt.loadNpmTasks('grunt-contrib-concat');  
    grunt.registerTask('test', ['concat']);
b.安装安装uglify插件：npm install grunt-contrib-uglify --save-dev //concat任务中生成的文件
    配置插件
        uglify: {  
            options: {  
            // 此处定义的banner注释将插入到输出文件的顶部  
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'  
            },  
            dist: {  
                files: {  
                    //uglify会自动压缩concat任务中生成的文件  
                    'app/dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']  
                }  
            }  
        },
    加载注册插件
        grunt.loadNpmTasks('grunt-contrib-concat');
        grunt.loadNpmTasks('grunt-contrib-uglify');  
        grunt.registerTask('test', ['concat','uglify']);  
c.安装jshint插件：npm install grunt-contrib-jshint --save-dev
    注：对js代码进行规范检查
d.安装watch插件:npm install grunt-contrib-watch --save-dev
    watch用来监听文件，当文件发生变化时会执行tasks中指定的任务。
    watch: {  
        //监听的文件  
        files: ['<%= jshint.files %>','app/index.html'], //监听文件 
        tasks: ['jshint']                                //执行检测代码规范
    },
e.安装wiredep:npm install grunt-wiredep --save-dev 
    wiredep插件用来自动将bower_components中的包加入到index.html中

6.使用bower安装angularjs和bootstrap
注：为了让wiredep插件能够自动将bower安装的插件注入到index.html中，我们先生成bower的配置文件

注：bower安装插件后面加--save才能自动装到把css,js放入index.html
a.生成bower配置文件
    bower init
b.接着使用bower安装AngularJS
    bower install angularjs --save grunt 
c.安装bootstrap
    bower install bootstrap -save 
c.安装jquery
    bower install jquery -save