GulpGrunt构建工具

Posted 2020-06-20 圣耀

在Gulp中创建一个库从磁盘gulp.src读取源文件并通过磁盘管道写回内容到gulp.dest，可以理解成只是将文件复制到另一个目录。

var gulp = require(‘gulp‘);
gulp.task(‘build‘, function () {
  return gulp
    .src(‘./sample.js‘)
    .pipe(gulp.dest(‘./build‘));
});

复制文件完成了，但是它没有压缩这个JS文件。要做到这一点，你必须使用一个Gulp插件。在这种情况下，你可以使用gulp-uglify，流行的UglifyJS压缩编绎插件

var gulp = require(‘gulp‘);
var uglify = require(‘gulp-uglify‘);
gulp.task(‘build‘, function () {
  return gulp
    .src(‘./sample.js‘)
    .pipe(uglify())
    .pipe(gulp.dest(‘./build‘));
});

流使可以让您添加更多的插件，而只需要读取和写入磁盘一次。你也可以指定缓冲器中内容的大小。需要注意的是，如果你在压缩之前添加它，那么你得到的大小是unminified。

var gulp = require(‘gulp‘);
var uglify = require(‘gulp-uglify‘);
var size = require(‘gulp-size‘);
gulp.task(‘build‘, function () {
  return gulp
    .src(‘./sample.js‘)
    .pipe(uglify())
    .pipe(size())
    .pipe(gulp.dest(‘./build‘));
});

Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。

• gulp.task(name[, deps], fn)：注册任务
• name 是任务名称；deps 是可选的数组，其中列出需要在本任务运行要执行的任务；fn 是任务体，这是 gulp.js 的核心了，需要花时间吃透它，详情见此。
• gulp.src(globs[, options])：指明源文件路径
• 用过 Grunt 的话，globs 一定不会陌生，这里没什么变化；options 是可选的，具体请查看 gulp.js API
• gulp.dest(path)：指明任务处理后的目标输出路径
• gulp.watch(glob[, options], tasks)／gulp.watch(glob[, options, cb])：监视文件的变化并运行相应的任务。你没看错，watch 作为核心 API 出现在 gulp.js 里了，具体用法还是要多看文档，不过接下来我们会演示简单的例子。

var gulp = require(‘gulp‘);
var jshint = require(‘gulp-jshint‘);
var concat = require(‘gulp-concat‘);
var uglify = require(‘gulp-uglify‘);
var rename = require(‘gulp-rename‘);
  
// 语法检查
gulp.task(‘jshint‘, function () {
    return gulp.src(‘src/*.js‘)
        .pipe(jshint())
        .pipe(jshint.reporter(‘default‘));
});
  
// 合并文件之后压缩代码
gulp.task(‘minify‘, function (){
     return gulp.src(‘src/*.js‘)
        .pipe(concat(‘all.js‘))
        .pipe(gulp.dest(‘dist‘))
        .pipe(uglify())
        .pipe(rename(‘all.min.js‘))
        .pipe(gulp.dest(‘dist‘));
});
  
// 监视文件的变化
gulp.task(‘watch‘, function () {
    gulp.watch(‘src/*.js‘, [‘jshint‘, ‘minify‘]);
});
  
// 注册缺省任务
gulp.task(‘default‘, [‘jshint‘, ‘minify‘, ‘watch‘]);

 

Grunt和Gulp区别：

grunt优点

grunt的功能说来简单，就是管理一系列的Task。大部分的Task都是第三方的插件，安装好对应的NPM包，再loadNpmTasks就可以用了。它能使程序员使用javascript构建编绎工具时，几乎不费吹灰之力。你只需要寻找合适的插件，阅读它们的文档，然后安装和配置它。有基础足够大的插件库，几乎不需要开发自己的编译任务。

grunt缺点：

1.插件很难遵守单一责任原则。因为 Grunt 的 API 设计缺憾，使得许多插件不得不负责一些和其主要任务无关的事情。比如说要对处理后的文件进行更名操作，你可能使用的是 uglify 插件，也有可能使用的是 concat 插件（取决于工作流的最后一个环节是谁）。

2.用插件做一些本来不需要件来做的事情。因为 Grunt 提供了统一的 CLI 入口，子任务由插件定义，由 CLI 命令来调用执行，因此哪怕是很简单的外部命令（比如说运行 karma start）都得有一个插件来负责封装它，然后再变成 Grunt CLI 命令的参数来运行，多此一举。试图用配置文件完成所有事，结果就是混乱不堪

3.如果你有一个明显复杂的编绎过程，它可能会变得过于冗长。当开发一段时间以后，它往往很难将编绎过程作为一个整体。一旦你编绎流程任务到达两位数，几乎可以保证，你会发现自己不得不在多个目标(Targets)中跑同一个Task，以便你能够正确地执行任务流。由于任务是需要声明配置的，你也很难弄清楚任务真正的执行次序。需要为每个任务（或者每个编绎流）编写一份独立的配置文件，供你的团队使用。

4.Gruntfile维护起来困难。配置和运行分离: 配置Task和调用它们的地方离得很远；每个插件做的事太多:每个Task的结果必须写到磁盘文件，另一个Task再读；配置项过多:每个插件的配置规则还不尽相同。用每个插件，都得去学习一番。

 

Gulp

Gulp基于Node JS的一个机制，叫做stream，Gulp的每个插件从stream中读取输入，做一些处理，再输出到stream中。 每个插件不是拿来独立使用的。相反，它专注于完成单一职责。只有把合适的插件组合起来，才能完成具体的Task。前一级的输出，直接变成后一级的输入。Grunt有一个Grunt-Cli，而Gulp直接安装Gulp就行了。npm install -g gulp而Grunt的配置文件叫Gruntfile.js，而Gulp是gulpfile.js。

gulp.js 的五大特点：

1.使用 gulp.js，你的构建脚本是代码，而不是配置文件；

2.使用标准库（node.js standard library）来编写脚本；

3.插件都很简单，只负责完成一件事－基本上都是 20 行左右的函数；

4.任务都以最大的并发数来执行；

5.输入／输出（I/O）是基于“流式”的。

参考：

http://www.gulpjs.com.cn/

http://www.gruntjs.net/