在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)是基于“流式”的。

参考:

Gulp、Grunt构建工具的更多相关文章

  1. 关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用

    关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用   工作环境:window下 在一切的最开始,安装node.js (中文站,更新比较慢http://nodejs.cn/) ...

  2. Grunt构建工具能做哪些事?

    Grunt到底有什么作用?一般用来干嘛? 很多前端的工作,包括Less编译.javascript压缩.Css压缩等零零碎碎的工作, 都可以让Grunt来做. 实际上在项目开发中,一般是前端代码 与 后 ...

  3. gulp自动化构建工具的使用

    gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...

  4. 前端工程化系列[04]-Grunt构建工具的使用进阶

    在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt ...

  5. 前端工程化系列[03]-Grunt构建工具的运转机制

    在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核 ...

  6. gulp 前端构建工具入门

    gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...

  7. gulp 前端构建工具使用

    gulp 前端构建工具使用 1.新建一个web  h5项目 2.准备好gulpfile.js文件 (1)下载链接:https://pan.baidu.com/s/116J-BaYOMRzeJW3i_J ...

  8. Gulp前端构建工具

    Gulp, 比Grunt更好用的前端构建工具 Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp ...

  9. 前端工程化系列[02]-Grunt构建工具的基本使用

    本文主要介绍前端开发中常用的构建工具Grunt,具体包括Grunt的基本情况.安装.使用和常见插件的安装.配置和使用等内容. 1.1 Grunt简单介绍 Grunt是一套前端自动化构建工具.对于需要反 ...

  10. gulp自动化构建工具

    gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ...

随机推荐

  1. FineCMS介绍

      产品简介 FineCMS(简称免费版.企业版.公益版)是一款基于PHP+MySql+CI框架开发的高效简洁的中小型内容管理系统,面向多终端包括Pc端网页和移动端网页,支持自定义内容模型和会员模型, ...

  2. Sass的命令编译

    [Sass]命令编译 命令编译是指使用你电脑中的命令终端,通过输入 Sass 指令来编译 Sass.这种编译方式是最直接也是最简单的一种方式.因为只需要在你的命令终端输入: 单文件编译: sass & ...

  3. QT分析之消息事件机制

    原文地址:http://blog.163.com/net_worm/blog/static/127702419201001432028526/ 上回我们分析到QPushButton的初始化,知道了Wi ...

  4. WPF比较两个随机数大小写,利用MVVM思想实现

    MVVM模式是把表现层和业务层完全分离,所以这里就使用MVVM制作一个极其简单的WPF的例子: 先看看最终图:

  5. 【nginx】nginx:利用负载均衡原理实现代码的热部署和灰度发布

    事情起因很简单,代码的改动量很大.而且刚接手服务器,对原有的代码进行了一定程度的重构.虽然在测试服务器上做了较多的测试工作,但是直接将代码送入生产环境还是不放心,万一配置出问题服务直接崩溃怎么解?万一 ...

  6. 当提交的表单类型为multipart/form-data时 后台的dopost则不能使用 setCharset来进行解码了 需要单独对字段使用 原始的new String(req.name("ISO-8859-1"),"utf-8")形式解码了

    当提交的表单类型为multipart/form-data时 后台的dopost则不能使用 setCharset来进行解码了 需要单独对字段使用 原始的new String(req.name(" ...

  7. 【bzoj1212】[HNOI2004]L语言 AC自动机

    题目描述 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写字母构成.一个单词W也是由若干小写字母构成.一个字典D是若干个单词的 ...

  8. python函数入门到高级

    函数的定义: def test(x): "The function definitions" x+=1 return x def:定义函数的关键字 test:函数名 ():内可定义 ...

  9. BZOJ4011 HNOI2015落忆枫音(动态规划+拓扑排序)

    DAG中每个点选一条入边就可以构成一棵有向树,所以如果没有环答案就是∏degreei. 考虑去掉含环的答案.可以看做把环缩点,剩下的点仍然可以任意选入边.于是去除的方案数即为∏degreei/∏deg ...

  10. tinyxml源码解析(中)

    转载于:http://www.cnblogs.com/marchtea/archive/2012/11/20/2766756.html 前言: 之前趁着这段时间比较空闲,也因为听闻tinyxml大名, ...