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