npm、grunt、bower实现前端项目自动化

所需的安装指令：

modernizr官方网站：https://modernizr.com/

grunt-modernizr网站：https://www.npmjs.com/package/grunt-modernizr

Customizr网址：https://github.com/modernizr/customizr#config-file

安装grunt-modernizr命令：

npm install grunt-modernizr –save-dev

grunt-modernizr命令：

grunt modernizr:dist

node下载地址：https://nodejs.org/en/

执行命令：npm install -g grunt-cli

安装package.json配置项：npm install

grunt官网的插件列表页面：

http://www.gruntjs.net/plugin ，我们能看到grunt到目前位置的所有插件。

常用的grunt插件：

Contrib-jshint——javascript语法错误检查；

Contrib-watch——实时监控文件变化、调用相应的任务重新执行；

Contrib-uglify——压缩javascript代码

Contrib-concat——合并多个文件的代码到一个文件中

npm install grunt-contrib-uglify –save-dev

在grunt.initConfig方法中配置 uglify 的配置参数：

在webstrom里设置js语法检查：

file -> Settings -> languages&Frameworks -> Javascript -> Code Quality Tools -> JSHint click Enable and reference to the .jshintrc in your Project.

使用jshint插件：

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

使用csslint插件（检查css语法错误）:

使用watch插件（真正实现自动化）:

npm install grunt-contrib-watch –-save-dev

使用concat插件（合并）：

npm install grunt-contrib-concat –save-dev

建立本地服务器：grunt-contrib-connect：

npm install grunt-contrib-connect –save-dev

一次性安装命令：

npm install –save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

load-grunt-tasks：省事的插件

npm install –save-dev load-grunt-tasks

time-grunt 插件：可用来显示每一个任务所花的时间和百分比

对CSS进行合并压缩：

需要安装grunt-css

npm install –save-dev grunt-css

把less代码编译成css：

npm install –save-dev grunt-contrib-less

git创建本地仓库：

git操作：

git init

git add README.md

git commit -m “first commit”

git remote add origin https://github.com/CTianjinNan/modernizr.git

git push -u origin master

安装bower：

npm install bower –g

bower安装js包：

bower install - -save handlebars

配置好依赖项：bower install

增加图片压缩，SCSS文件编译功能：

安装sass编译插件：

整个流程：http://www.imooc.com/article/14315

1、安装ruby：安装说明http://jingyan.baidu.com/article/48b558e33558ac7f38c09aee.html

安装地址：

https://www.baidu.com/s?wd=ruby%E4%B8%8B%E8%BD%BD&rsv_spt=1&rsv_iqid=0x8e04986400036710&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_enter=0&oq=ruby%E5%AE%89%E8%A3%85&inputT=1876&rsv_t=b519jJisAPHmoq9Eh2rPaS3XulOksslbXsa7V13SlxnFX2SP4d8WBA3JFYjIhxP6XURf&rsv_pq=e40576bc0006e31b&rsv_sug3=85&rsv_sug1=57&rsv_sug7=100&rsv_sug2=0&rsv_sug4=2656

2、修改gem源：

参考1：http://jingyan.baidu.com/article/4853e1e51c770f1909f726fe.html

参考2：http://www.cnblogs.com/nemolmt/p/6047947.html