gulp的入门

gulp介绍

gulp的官方定义非常简洁： 基于文件流的构建系统 。
我简单的理解它就是个帮忙的工具，你可以写一个又一个的任务让它帮你做，比如压缩js，压缩css，文件合并等等。。。
特别要注意的是“流”，流的意义就是读取文件后可以一直连续不断的操作最后保存。

使用

1、安装nodejs

打开nodejs官网，点击下载按钮，它会根据系统信息选择对应版本。然后安装（安装路径随意）。
查看是否正确安装：命令提示符执行node -v，出现版本号即为正确安装。

2、全局安装gulp

全局安装gulp目的是为了通过她执行gulp任务
打开命令提示符执行输入 npm install gulp -g
查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

3、新建package.json文件

在命令提示符执行输入 npm init

现在在你刚刚执行的文件夹中就有了一个package.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "test",   //项目名称（必须）
  "version": "1.0.0",   //项目版本（必须）
  "description": "This is for study gulp project !",   //项目描述（必须）
  "homepage": "",   //项目主页
  "repository": {    //项目资源库
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": {    //项目作者信息
    "name": "surging",
    "email": "surging2@qq.com"
  },
  "license": "ISC",    //项目许可协议
  "devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

4、本地安装gulp插件

先安装本地gulp，执行 npm install --save-dev gulp
比如要安装编译less的插件（gulp-less），则输入 npm install gulp-less --save-dev

输入--save-dev 是为了保存在package.json的依赖插件里面，这样以后通过npm install 则可以自动安装保存依赖插件

5、新建gulpfile.js文件

gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件
看一下内容和注释，这里新建了一个任务，将less编译为css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');
 
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});
 
gulp.task('default',['testLess', 'elseTask']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务
 
//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径

6、运行gulp

命令提示符执行gulp 任务名称
编译less：命令提示符执行 gulp testLess
当执行gulp default或gulp将会调用default任务

总结

gulp的插件有很多这里只示范了一个，在项目中实际需要哪些功能的时候可以，在网上搜索具体插件安装到项目中

gulp