前端开发构建工具---Gulp介绍

What is gulp?

gulp 是一个基于Nodejs的任务运行器(合并、压缩、编译等任务)，类似Grunt，但gulp的原则是保持简单，使任务文件更像代码而不是配置。

Why gulp?

• 易用： 代码优于配置的原则拆分复杂的任务使其简单化，编写出易读的任务程序并保持可控性
  
• 易学：核心API少，易于上手
• 高效：基于流的操作无需将输出写入临时文件，加快构建速度
• 高质量：插件编写遵从单一责任原则------插件很简单并且只做一件事情

How  to use?

首先安装gulp

$ npm install gulp
$ cd project_path
$ npm install gulp --save-dev
//添加项目开发依赖

接下来介绍4个核心API：

1. gulp.task(name[, deps], fn)     建立任务
2. gulp.src(glob [, options])       返回可读文件流
3. gulp.dest(path)      返回可写文件流
   
4. gulp.watch(glob [, opts], tasks)      监视文件变化并且运行相应任务

这里以几个基本任务(合并、重命名、压缩js文件)为例：

1、安装相应插件：

 $ npm install gulp-concat --save-dev
//合并插件
$ npm install gulp-rename --save-dev
//重命名插件
$ npm install gulp-uglify--save-dev
//js压缩插件

2、编写gulpfils.js：

var gulp = require('gulp'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify');
gulp.task('process-scripts', function() {
return gulp.src('src/scripts/*.js')
// 获取src/scripts/文件夹下的所有js文件
.pipe(concat('main.js'))
// 合并后的文件命名为main.js
.pipe(gulp.dest('dest/scripts/'))
// 输出main.js到desc/scripts文件夹下
.pipe(rename({suffix: '.min'}))
// 重命名main.js为main.js.min
.pipe(uglify())
// 压缩main.js.min
.pipe(gulp.dest('dest/scripts/'))
//<span style="font-family: Arial, Helvetica, sans-serif;"> 输出main.js到/desc/scripts文件夹下</span>
})

3、运行任务：

 $ gulp

最后

以上就是健忘草莓为你收集整理的前端开发构建工具---Gulp介绍的全部内容，希望文章能够帮你解决前端开发构建工具---Gulp介绍所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。