使用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-*就可以看到了。

来源：oschina

链接：https://my.oschina.net/u/2285811/blog/707514

标签

gulp

前端开发