Grunt 和 Bower 用法学习

关于自动化问题

清理临时文件，校验代码，连接并压缩javascript文件，拷贝资源文件和配置文件，运行测试等。

Automating the workflow with Grunt
Grunt 通过可以总过组件来任意的组织要执行的任务。已经自定义自己的组件。


npm install -g grunt-cli grunt


配置：
Gruntfile.js 


module.exports = function(grunt){
   //1 - Configuring each task
   grunt.initConfig({});
    //2 - Loading the plug-ins
   grunt.loadNpmTasks('plugin name');
   //3 - Creating a workflow by grouping tasks together
   grunt.registerTask('taskName',['task1','task2','task3']);
}


将所有的脚本都串联到一个文件将大大减少页面加载时请求的数量，从而提高性能。
压缩过程将会去除所有空格，断行，以及注释内容，将本地变量和函数的名变为短名字，这样减少了字节数来提高性能。
HTML和CSS文件也可以被缩小，图片也可以通过特定的压缩而优化。


1、清理：清理上一次部署时产生的文件，grunt-contrib-clean插件，需要配置清理那个文件路径下的文件，


npm intall grunt-contrib-clean  --save-dev


module.exports = function(grunt){
grunt.initConfig({
clean:{
dist:["dist/"]
}
});

grunt.loadNpmTasks("grunt-contrib-clean");

grunt.registerTask("dist",["clean"]);
}

2、语法校验: grunt-contrib-jshint

npm install grunt-contrib-jshint --save-dev

module.exports = function(grunt){
grunt.initConfig({
clean:{
dist:["dist/"]
},
jshint:{
all: ['Gruntfile.js','js/**/*.js','test/**/*.js']
}
});

grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-jshint");

grunt.registerTask("dist",["clean","jshint"]);
}

3、串联文件: grunt-contrib-concat 串联配置源文件到一个单一目标文件中。


npm install grunt-contrib-concat --save-dev


我们需要在配置时需要通过concat对象的src属性指定源文件和dest属性指定单一的目标文件。


module.exports = function (grunt) {
grunt.initConfig({
clean: {
dist: ["dist/"]
},
jshint: {
dist: ['Gruntfile.js', 'js/**/*.js', 'test/**/*.js']
},
concat: {
dist: {
src: ["src/**/*.js"],
dest: "dist/js/scripts.js"
}
}
});
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.registerTask("dist", ["clean", "jshint", "concat"]);
}




4、压缩文件：grunt-contrib-uglify


npm install grunt-contrib-uglify --save-dev


需要配置uglify对象的src和dest属性
module.exports = function (grunt) {
grunt.initConfig({
clean: {
dist: ["dist/"]
},
jshint: {
dist: ['Gruntfile.js', 'js/**/*.js', 'test/**/*.js']
},
concat: {
dist: {
src: ["js/**/*.js"],
dest: "dist/js/scripts.js"
}
},
uglify: {
dist: {
src: ["dist/js/scripts.js"],
dest: "dist/js/scripts.min.js"
}
}
});
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.registerTask("dist", ["clean", "jshint", "concat","uglify"]);
}




5、拷贝移动：有许多文件比如images，fonts和其它一些文件需要不做任何变化的拷贝到指定部署环境。
grunt-contrib-copy 可以拷贝文件和文件夹


npm install grunt-contrib-copy --save-dev


module.exports = function (grunt) {
grunt.initConfig({
clean: {
dist: ["dist/"]
},
jshint: {
dist: ['Gruntfile.js', 'js/**/*.js', 'test/**/*.js']
},
concat: {
dist: {
src: ["js/**/*.js"],
dest: "dist/js/scripts.js"
}
},
uglify: {
dist: {
src: ["dist/js/scripts.js"],
dest: "dist/js/scripts.min.js"
}
},
copy: {
dist: {
src: ["index.html", "lib/*", "partials/*", "css/*"],
dest: "dist/"
}
}
});
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.registerTask("dist", ["clean", "jshint", "concat","uglify", "copy"]);
}


6、测试：grunt-karma 
需要配置 karma.conf.js 文件 


npm install grunt-karma --save-dev


module.exports = function (grunt) {
grunt.initConfig({
clean: {
dist: ["dist/"]
},
jshint: {
dist: ['Gruntfile.js', 'js/**/*.js', 'test/**/*.js']
},
concat: {
dist: {
src: ["js/**/*.js"],
dest: "dist/js/scripts.js"
}
},
uglify: {
dist: {
src: ["dist/js/scripts.js"],
dest: "dist/js/scripts.min.js"
}
},
copy: {
dist: {
src: ["index.html", "lib/*", "partials/*", "css/*"],
dest: "dist/"
}
},
karma: {
dist: {
configFile: "karma.conf.js"
}
}
});
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-karma");
grunt.registerTask("dist", ["clean", "jshint", "concat","uglify", "copy", "karma"]);
}


7、运行：Grunt有一个web server插件叫做 grunt-connect 
npm install grunt-contrib-connect --save-dev


我们这里需要配置部署的基础路径以及服务运行的端口
module.exports = function (grunt) {
grunt.initConfig({
clean: {
dist: ["dist/"]
},
jshint: {
dist: ['Gruntfile.js', 'js/**/*.js', 'test/**/*.js']
},
concat: {
dist: {
src: ["js/**/*.js"],
dest: "dist/js/scripts.js"
}
},
uglify: {
dist: {
src: ["dist/js/scripts.js"],
dest: "dist/js/scripts.min.js"
}
},
copy: {
dist: {
src: ["index.html", "lib/*", "partials/*", "css/*"],
dest: "dist/"
}
},
karma: {
dist: {
configFile: "karma.conf.js"
}
},
connect: {
dist: {
options: {
port: 9001,
base: 'dist/'
}
}
}
});
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-karma");
grunt.loadNpmTasks("grunt-contrib-connect");
grunt.registerTask("dist", ["clean", "jshint", "concat","uglify", "copy", "karma", "connect:dist:keepalive"])
}


默认情况下，服务只有在Grunt运行时才能运行，所以我们要使用connect任务的keepalive选项。
package.json
{
"name": "parking",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-concat": "~0.4.0",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-copy": "~0.5.0",
"grunt-karma": "~0.8.3",
"karma": "~0.12.16",
"grunt-contrib-connect": "~0.8.0"
}
}


npm install


9、执行工作流
grunt <name of the task or workflow>


可以定义多个运行环境
connect: {
production: {
options: {
port: 9001,
base: 'dist/'
}
},
development: {
options: {
port: 9002,
base: '/'
}
}
}


我们也可以生成两个串联文件，一个是sources另一个是libraries.
concat: {
js: {
src: ["js/**/*.js"],
dest: "dist/js/scripts.js"
},
lib: {
src: ["lib/**/*.js"],
dest: "dist/lib/lib.js"
}
}


执行串联： grunt concat
执行单个串联：
grunt concat:js
grunt concat:lib




使用Bower管理包：
Bower是由Twitter创建用于前端应用的包管理。它只处理JavaScript类库，以及HTML，CSS和images


安装： npm install -g bower


查找包： bower search <package name>


安装包：bower install <package name>
        bower install <package name> --save

将从Git仓库下载内容放入bower_components/ 目录下，使用 --save时 bower.json 会被更新。


查看安装包：bower list


更新安装包： bower update<package name>


卸载安装包：bower uninstall <package name> --save




在我们安装一个包后，需要更新我们的index.html文件来将它包含到当前应用程序中。


<script src="bower_components/angular/angular.min.js"></script>


移除的包会保存在Bower的缓存中，在用户的主文件夹的cache/bower目录下
我们可以查看缓存的内容：
bower cache list


bower 还支持离线安装：bower install angular --offline


清除bower的缓存
bower cache clean

转载于:https://my.oschina.net/u/924064/blog/626345