前端越来越复杂。
用Grunt来生成任务和处理。用npm和bower来管理客户端的包。
准备开发环境
node.js
首先在node.js的官方网站下载最新的node.js。
git
在git官网上下载并安装。
和mac不同，需要设置一下环境变量。
C:\Program Files (x86)\Git\bin
Compass(Mac下)
Compass安装需要依赖于Ruby Gems，执行下面的步骤：
sudo gem update --system
sudo gem install compass
运行上面的代码有可能会失败，是由于ruby的gem被和谐了，不过淘宝的ruby工程师提供了rubygems的国内镜像。
$ gem sources --remove https://rubygems.org/$ gem sources -a https://ruby.taobao.org/$ gem sources -l*** CURRENT SOURCES ***https://ruby.taobao.org
运行上面的代码再新执行，就成功了。
安装grunt bower
npm install -g grunt-cli bower
配置
安装grunt-init
grunt-init用来初始化Grunt项目。
npm install -g grunt-init
安装grunt-init-gruntfile模板
grunt-init-gruntfile用来生成最简单的gruntfile.js和package.json。
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
接着在web项目的根目录，执行下面的代码
grunt-init gruntfile
Paste_Image.png
执行成功后，就可以看到gruntfile.js和package.json已经生成了。
安装 npm 包
Paste_Image.png
vs2013上没有反应，报错。发现好像是被墙的原因。
用下面的代码把npm的地址换到国内淘宝提供的服务器就好了。
npm config delete http-proxy
npm config delete https-proxy
npm install -g cnpm --registry=http://r.cnpmjs.org
npm install microtime --registry=http://r.cnpmjs.org --disturl=http://dist.cnpmjs.org
bower
首先在项目目录下执行，初始化bower.json
bower init
安装我们必要的包
bower install bootstrap --save
bower install jquery --save
grunt教程
grunt是用来执行例如压缩、编译、单元测试、linting等工作的自动化工具。
less编译
首先我们需要用到两个npm包
"grunt-contrib-less": "*",
"grunt-contrib-watch": "*"
grunt-contrib-less是用来把less编译成css的，grunt-contrib-watch可以监视文件的改变并自动执行。
我们接下来编写我们的gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
less: {
//compile
compile: {
files: {
'assets/css/bootstrap.css': "bower_components/bootstrap/less/bootstrap.less"
}
},
//compress
yuicompress: {
files: {
'assets/css/bootstrap.min.css': "assets/css/bootstrap.css"
},
options: {
yuicompress:true
}
}
},
watch: {
scripts: {
files: ["bower_components/bootstrap/less/*.less"],
task:["less"]
}
}
});
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.registerTask("default", ['less', 'watch']);
};
Paste_Image.png
执行一下，less编译成功。
不过这里遇到了一个问题，css没有压缩。
因此在grunt上找到了另外一个插件grunt-contrib-cssmin来做css压缩工作。
在gruntfile.js中加入一个任务
cssmin: {
css: {
src: ["assets/css/bootstrap.css"],
dest:"assets/css/bootstrap.min.css"
}
},
尤其注意的是要把cssmin任务放在watch任务的前面。
grunt.registerTask("default", ['less',"cssmin", 'watch']);
