构建工具-Gulp 相关知识


layout: layout
title: 『构建工具-Gulp』相关内容整理
date: 2017-04-26 22:15:46
tags: Gulp
categories: Tools
---

Gulp- 简介

Automate and enhance your workflow | 用自动化构建工具增强你的工作流程

Gulp 是什么？

gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；
使用它，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器，它能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

Gulp的核心概念？

流，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。在流中，定义了一些处理数据的基本操作，如读取数据，写入数据等，程序员是对流进行所有操作的，而不用关心流的另一头数据的真正流向。流不但可以处理文件，还可以处理动态内存、网络数据等多种数据形式。

而gulp正是通过流和代码优于配置的策略来尽量简化任务编写的工作。这看起来有点“像jQuery”的方法，把动作串起来创建构建任务。早在Unix的初期，流就已经存在了。流在Node.js生态系统中也扮演了重要的角色，类似于*nix将几乎所有设备抽象为文件一样，Node将几乎所有IO操作都抽象成了stream的操作。因此用gulp编写任务也可看作是用Node.js编写任务。当使用流时，gulp去除了中间文件，只将最后的输出写入磁盘，整个过程因此变得更快。

Gulp的特点?

  • 易于使用:
    通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理。
  • 构建快速:
    利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
  • 易于学习:
    通过最少的 API，掌握 gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
  • 插件高质:
    gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

Gulp- 环境搭建

gulp 是基于 node 实现的，那么我们就需要先安装 node。

Node是一个基于Google V8 JavaScript引擎建立的一个平台，可以利用它实现Web服务，做类似PHP的事。

npm install -g gulp  # 全局安装gulp
gulp -v  # 查看gulp是否安装成功

?  ~ gulp -v
   [20:17:32] CLI version 3.9.1

Gulp- 构建项目

使用Gulp来构建项目:

mkdir Gulp && cd Gulp && npm init -y && npm install gulp --save-dev
#使用npm初始化项目并且安装Gulp模块,能够看到如下的package.json文件中已经包含了Gulp的相关信息。
{
  "name": "Gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

gulpfile.js文件的使用：

gulp也需要一个文件作为它的主文件，在gulp中这个文件叫做gulpfile.js。

创建gulpfile.js文件，与package.json文件一样放在项目根目录中，之后需要做的就是在gulpfile.js文件中定义任务了。

在gulpfile.js文件中写入以下内容：

    var gulp = require('gulp');
    gulp.task('default', function() {
      console.log("Gulp OK!");
    });

完成之后在Terminal中运行gulp命令，然后会看到刚才在task任务中要输出的内容.

?  gulp
[00:35:29] Using gulpfile ~/WebStrom-Work/Gulp/gulpfile.js
[00:35:29] Starting 'default'...
Gulp OK!
[00:35:29] Finished 'default' after 141 μs

Gulp- API

gulp.src()

语法：

gulp.src(globs[, options])

输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。

名称 类型 含义
globs String 或 Array 所要读取的 glob 或者包含 globs 的数组。
options Object 通过 glob-stream 所传递给 node-glob 的参数。

gulp.dest()

语法：

gulp.dest(path[, options])

能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

  • path 类型： String or Function ,文件将被写入的路径（输出目录）。也可以传入一个函数，在函数中返回相应路径，这个函数也可以由 vinyl 文件实例 来提供。
  • options
    类型： Object , 为一个可选的参数对象，通常我们不需要用到

gulp.task()

语法：

 gulp.task(name[, deps], fn)
  • name
    类型： String，任务的名字，如果你需要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。
  • deps
    类型： Array，一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。
    $xslt demo gulp.task(‘mytask‘, [‘array‘, ‘of‘, ‘task‘, ‘names‘], function() { // 做一些事 });
    注意： 你的任务是否在这些前置依赖的任务完成之前运行了？请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。
  • fn
    该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。

gulp.watch()

语法：

gulp.watch(glob[, opts], tasks)

gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务。

  • glob类型： String or Array ,一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。
  • opts 类型： Object

传给 gaze 的参数。

  • cb(event)
    类型： Function ,每次变动需要执行的 callback。

参考：Gulp-API

Gulp- 常用插件

压缩JS -> gulp-uglify:

安装 gulp-uglify:

 npm install gulp-uglify --save-dev

示例代码：

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('javascript',function () { // javascript: 任务名称
    gulp.src('./src/js/*.js')  // src: 定位到需要压缩的js文件目录下
        .pipe(uglify()) // 执行压缩文件
        .pipe(gulp.dest('./dist/js')); // 输出到指定目录
});

API参考：gulp-uglify

压缩CSS -> gulp-minify-css:

安装 gulp-minify-css：

npm install gulp-minify-css --save-dev

示例代码：

var gulp = require('gulp');
var minify = require('gulp-minify-css')

gulp.task('css',function () {
    gulp.src('./src/css/*.css')
    .pipe(minify())
    .pipe(gulp.dest('./dist/css'));
});

API参考：gulp-minify-css

压缩图片 -> gulp-imagemin：

安装 gulp-imagemin：

npm install gulp-imagemin --save-dev

示例代码：

var gulp = require('gulp');
var image = require('gulp-imagemin');

gulp.task('image',function () {
    gulp.src('./src/images/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'));
});

API参考：gulp-imagemin

编译Less-> gulp-less:

安装 gulp-less：

npm install gulp-less --save-dev

示例代码：

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less',function () {
    gulp.src('./src/less/*.*')
        .pipe(less())
        .pipe(gulp.dest('./dist/less'));
});

API参考：gulp-less

自动刷新-> gulp-livereload：

安装gulp-livereload：

npm install gulp-livereload --save-dev

示例代码：

在每个gulp.task()方法中的gulp.src()方法后追加   .pipe(livereload());    即可。

需要配合谷歌浏览器插件 LiveReload插件来使用，实现自动刷新。

API参考：gulp-livereload

Google Chrome Plugin：LiveReload

完整gulpfile.js文件：

var gulp = require('gulp'); // Gulp
var uglify = require('gulp-uglify');  // JavaScript
var minify = require('gulp-minify-css'); // CSS
var imagemin = require('gulp-imagemin'); // Images
var less = require('gulp-less'); // Less
var livereload = require('gulp-livereload') // LiveReload

// 执行所有任务
gulp.task('default', ['javascript','css','less','image']);

gulp.task('javascript',function () { // jsscript: 任务名称
    gulp.src('./src/js/*.js')  // src: 定位到需要压缩的js文件目录下
        .pipe(uglify()) // 执行压缩文件
        .pipe(gulp.dest('./dist/js')); // 输出到指定目录
});

gulp.task('css',function () {
    gulp.src('./src/css/*.css')
        .pipe(minify())
        .pipe(gulp.dest('./dist/css'));
});

gulp.task('less',function () {
    gulp.src('./src/less/*.*')
        .pipe(less())
        .pipe(gulp.dest('./dist/css'));
});

gulp.task('image',function () {
    gulp.src('./src/images/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'));
});

Gulp- 参考资料

常见web项目目录：

在当前项目的根目录下执行tree命令，即可看到项目的整个目录结构，如果没有tree命令，在Mac系统下可以使用brew进行安装：

?  Glup tree ../Glup
../Glup

├── build # 项目构建脚本
├── src # 源码目录
│?? ├── css # CSS文件
│?? ├── fonts # 字体文件
│?? ├── images # 图片文件
│?? ├── js # js脚本文件
│?? ├── less # less文件
│?? └── sass # sass文件
├── dist # 编译出来的发布版本目录
│?? ├── css
│?? ├── fonts
│?? ├── images
│?? └── js
├── docs # 文档
├── test # 测试脚本
├── gulpfile.js # Gulp工具构建项目的主文件
├── node_modules # npm包存放目录
├── package-lock.json #npm5.0以上项目依赖文件
├── package.json # npm包管理配置文件
├── LICENSE # 授权协议
└── README.md # 项目说明文件

原文地址：https://www.cnblogs.com/zhangyangdev/p/11517996.html

时间： 2024-09-29 23:16:15

构建工具-Gulp 相关知识的相关文章

web 环境搭建00前端自动化构建工具(gulp)

web 环境搭建----前端自动化构建工具(gulp): 1----先下载安装node.js 2----然后在node.js命令行安装:npm install gulp -g (全局下载安装gulp插件) 3----然后进入到项目文件夹(命令cd 文件夹名),在项目文件夹中安装依赖文件:npm install gulp --save-dev (根据依赖文件下载gulp插件) 4----在项目文件夹目录下初始化:npm init (初始化文件) {初始化文件后项目中会出现packgae.json文

(转载)前端构建工具gulp使用

前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn Gulp插件网 http://gulpjs.com/plugins/ Awesome Gulp https://github.com/alferov/awesome-gulp StuQ-Gulp实战和原

记学习前端构建工具gulp的过程，略心酸

初学前端的时候就听过友人说,前端不好学,很多软件都是要自己下载安装插件的,当时是很不以为然的,不就是下载几个软件外加安装插件吗?!怎么会很难呢!后面才发现自己真的错了. 今天刚好准备好好看看前端构建工具gulp的使用,于是乎就各种上网查资料.刚开始的时候有点摸不着头脑,这个东西不是一个软件,拿来就用,需要自己配置环境,自己根据需求安装package,完全是自己DIY的一个工具. 下面就把整个安装过程,记录下来,方便以后查看吧. 先明确几个概念:1.gulp是基于node.js环境下工作的:2.命

（转）前端构建工具gulp入门教程

前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序,

构建工具Gulp

前面的话 与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单.通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效 入门 如果会使用grunt,则gulp学起来,并不困难.主要包括以下几步 1. 全局安装 gulp $ npm install --global gulp 2. 作为项目的开发依赖(d

前端自动化构建工具gulp记录

什么是gulp 答:Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新.. 为什么要用gulp? 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带来的误会,可以利用构建工具,给每一个静态文件添加一个版本号,这样浏览器就会认为是新的文件,就不存在缓存机制. 2.性能优化:文件合并,减少http请求:文件压缩,减少文件体积,加快下载速度: 3.效率提升:

前端自动化构建工具——gulp

gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了) 然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样:(使用jshint插件校验js代码) var jshin

gulp相关知识（2）

将之前的东西的理论部分整理了一下—— gulp 前端构建工具 它可以帮助我们完成一些自动化操作 它需要一些插件的支持 var gulp = require('gulp'); --> gulp命令 require('yargs').argv; 它可以监听gulp后面添加的参数 关闭 gulp 服务器: 执行 ctrl + c var less = require('gulp-less'); -->> less预处理器,目的就是把 .less文件转换成普通css文件 var header =

JS模块化开发（四）——构建工具gulp

gulp.js——基于流的自动化构建工具 步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev gulp 3. 在项目根目录下创建一个名为 gulpfile.js 的文件: var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 }); 4.