在VisualStudio中使用Grunt, Bower

前端越来越复杂。
用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']);