grunt一个angular项目

本文详细介绍如何使用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  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值