gulp学习笔记--简单入门

一、准备工作

1、gulp是基于nodeJS的前端构建工具,所以全局安装nodeJS

2、利用npm全局安装gulp。

npm install -g gulp

3、在项目根目录下新建文件package.json。

注意：需要加上一对花括号。

4、在项目根目录下安装本地gulp。

npm install --save-dev gulp

安装好后就会生成node_modules文件夹。

5、在项目根目录下安装其他插件。

npm install --save-dev gulp-less
npm install --save-dev gulp-watch
npm install --save-dev require-dir
...
...

注意：为什么要加--save-dev？

因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包。

安装好后,node_modules文件夹如下：

package.json文件如下:

{
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-concat": "^2.6.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-less": "^3.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-sourcemaps": "^2.2.0",
    "gulp-uglify": "^2.0.0",
    "gulp-watch": "^4.3.10",
    "htmlmin": "0.0.7",
    "require-dir": "^0.3.1"
　　　　...

  }
}

6、在根目录下新建gulp文件夹，以及gulpfile.js文件。

　　a)在gulp文件下新建tasks文件夹以及config.js文件。

　　b)tasks下面新建不同的js文件，代表不同的任务。

　　c)config.js配置任务的相关配置。