使用gulp构建前端（一）

                                                       使用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 project

cd project

mkdir site

cd 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-*就能够看到了。