使用gulp构建前端（一）

  前端页面越来越多的时候，如何管理其实也是一个非常重要的东西，less文件编译成css文件不一定要借助编译软件，在打包的时候如何对css文件/js文件，进行压缩。其实满足上面三点的软件还是有点多的，但是使用比较简单的gulp就是其中的佼佼者。

   话不多说，使用gulp使用的是npm进行管理，所以我们需要去node.js官网去安装，windows下基本是傻瓜式的安装，就不做任何提醒，不过npm随着node.js安装就自动生成了。（查看 node  -v ,npm -v）。

    安装了npm过后，就开始安装gulp的插件，由于我们需要全局使用gulp的时候，就需要全局安装：

npm install gulp -g

  建立一些开发目录：

mkdir projectcd projectmkdir sitecd site

 使用npm init建立package.json（有提示输入）

{  "name": "chen",  "version": "1.0.0",  "description": "",  "main": "build/index.html",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "chen",  "license": "ISC",}

 本地安装gulp进行编译依赖（全局安装和本地安装区别是只能在这使用，而且要加入依赖）

-D, --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它npm install gulp --save-dev 或 npm install gulp -D

此时package.json如下：

{  "name": "chen",  "version": "1.0.0",  "description": "",  "main": "build/index.html",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "chen",  "license": "ISC",  "devDependencies": {    "gulp": "^3.9.1",  }}

在相同目录下建立一个gulpfile.js并开始写一些测试代码:

var gulp = require('gulp'); //本地安装gulp所用到的地方//入口任务   gulp.task('default', function(){   console.log("start");});

执行命令 gulp 查看结构，如果控制台没有报错，并显示start那么则环境搭建成功。

关于npm命令总结的比较好的网站:http://www.jb51.net/article/86253.htm

gulp的一些好网站：http://www.gulpjs.com.cn/docs/api/（gulp中文网）

http://www.ydcss.com/archives/18（有gulp英文网翻译，还有一些插件的例子）

查看gulp的一些插件的使用在github上面 查询 gulp-*就可以看到了。