Gulp简单介绍

Gulp

介绍

自动化构建工具，可以通过gulp对我们的代码进行全自动的编译。可以实现代码的自动压缩、编译、实时监测等功能。

特点

  1. 任务化
  2. 基于流(数据流io:input/output)操作
    1. 整个操作都是基于数据流进行操作
    2. 具备属于gulp的内存，所有的操作全部在gulp的内存当中
    3. 对应着输入流和输出流。会将数据通过src方法输入，通过dest方法输出。
  3. 简易的API

官网网站:https://gulpjs.com/

中文网:https://www.gulpjs.com.cn/

插件中心:https://gulpjs.com/plugins/

安装

下面我们来通过npm来安装一下gulp。

#初始化项目package.json
npm init

#全局安装gulp-cli
npm install gulp-cli -g

#局部安装gulp
npm install [email protected] --save-dev

全局安装也可以使用 npm install --global gulp，但是却不能够随意的在项目目录切换gulp版本，不够灵活，所以选择使用gulp-cli。

安装完成之后，在项目目录下开启cmd，输入gulp，出现下面的提示则表示安装成功。

[22:40:15] No gulpfile found

使用

一般情况下，使用gulp,主要有两步操作，第一步，注册事件，第二步执行默认事件。

// 注册
gulp.task('事件名',function(){

})

// 默认事件
gulp.task('default',['参数'])

gulp演示配置

下面为了讲解gulp的基本功能，将目录结构模拟成项目的目录结构，大致如下:

// src 目录项目的根目录
src
    --| dist   编译之后的代码所在目录
        --|--| js  编译之后的js
        --|--| css 编译之后的css
    --| css    待编译的css
        --|--| a.css 用于测试的css文件
        --|--| b.css 用于测试的css文件
    --| js     待编译的js
        --|--| 01.js 用于测试的js文件
        --|--| 02.js 用于测试的js文件
    --| less   待编译的less文件
        --|--| c.less 用于测试的less文件
    index.html 首页文件
    gulpfile.js gulp配置文件

gulpfile.js文件的创建

首先，我们先来创建一个gulpfile.js文件，因为gulp执行之后会默认的在当前目录查找这个文件。

文件创建好之后，现在文件中引入gulp，并且先设置好default事件。

var gulp = require("gulp");

gulp.task("default",[]);

JS文件的处理

首先，我们先来学习如何压缩js代码。压缩js代码我们需要使用三个插件，先通过下面的命令进行安装。

npm install gulp-concat gulp-uglify gulp-rename --save-dev

安装完成后，我们可以在package.json文件中检查一下：

{
  "name": "src",
  "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",
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^1.4.0",
    "gulp-uglify": "^3.0.2"
  }
}

在上面的文件代码中，已经看到，我们新安装的插件已经成功的安装。

为了避免安装失败导致的报错，尽可能的在每次安装插件后都检查一下package.json文件，看一下是否插件被写入其中。

安装完成后，可以完成下面的代码：

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 注册事件
gulp.task('js',function(){
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/js/"))
})
// 默认事件
gulp.task("default",[]);

上面代码中，首先引入三个插件。

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

然后注册一个js事件。

gulp.task('js',function(){

})

在回调函数当中return返回数据。

gulp.task('js',function(){
  return ....
})

紧接着通过gulp的src方法来将需要编译的数据放入gulp内存中。

 return gulp.src("js/*.js")

*.js表示在js目录下找到后缀名为.js的全部文件。

然后通过管道流的形式进行下列操作。

    .pipe(concat("bundle.js")) // 合并代码为bundle.js
     .pipe(gulp.dest("dist/js/")) // 将合并的文件输出查看一下
     .pipe(uglify()) // 将文件进行压缩
     .pipe(rename({suffix:".min"})) // // suffix 后缀名 .min ，也可以不传入一个json，而是直接传入一个文件名，例如bundle.min.js
     .pipe(gulp.dest("dist/js/")) // // 将压缩的文件再次输出查看

完成代码后，在终端当中执行。

gulp js

既可以在dist/js目录查看到压缩之后的bundle.min.js文件。

less文件的处理

首先需要安装两个插件。

npm install gulp-less gulp-clean-css --save-dev

安装完成插件后执行下面的代码。

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// 注册事件
gulp.task('js', function () {
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest("dist/js/"))
})

// 注册less编译事件
gulp.task('less', function () {
    return gulp.src("less/*.less")
        .pipe(less()) // 编译less文件 为css文件
        .pipe(gulp.dest("css/")) // 将转换文件输出查看
})

// 默认事件
gulp.task("default", []);

上面代码中，首先引入插件。

var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");

注册事件。

gulp.task('less', function () {

})

将内容插入到gulp内存当中。

return gulp.src("less/*.less")

编译文件。

.pipe(less()) // 编译less文件 为css文件

输出到指定目录。

 .pipe(gulp.dest("dist/css")) // 将转换文件输出查看

css文件的处理

处理css文件，不需要额外的下载其他的插件，直接运行即可。

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// 注册事件
gulp.task('js', function () {
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest("dist/js/"))
})

// 注册less编译事件
gulp.task('less', function () {
    return gulp.src("less/*.less")
        .pipe(less()) // 编译less文件 为css文件
        .pipe(gulp.dest("css/")) // 将转换文件输出查看
})

gulp.task('css',function(){
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss({compatibility:'ie8'}))
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/css/"))

})
// 默认事件
gulp.task("default", []);

上述代码中，通过cleanCss方法进行代码压缩，并且传入参数compatibility，能够让代码的压缩适应ie8。

.pipe(cleanCss({compatibility:'ie8'}))

异步任务的执行

下面在来说一下默认事件，也就是异步任务的执行，我们只需要将我们注册的事件传入默认事件的第二个参数数组当中即可。

// 默认事件
gulp.task("default", ['js','less','css']);

此时，我们需要思考一个问题，less转换成css文件后才能执行css的解析，也就是说css的编译是依赖less的，为了处理这个问题，可以在css事件中传入第二个参数。

gulp.task('css',['less'],function(){
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss({compatibility:'ie8'}))
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/css/"))

})

这样，当我们在执行css之前就会先去等待less的编译完成。

下面执行gulp，就可以执行在cmd中输入gulp命令即可。

此时执行过程中，我们会发现执行的顺序其实是一个异步执行的顺序，如果我们想要采取同步顺序，只需要将每个事件中的return去掉即可。

半自动编译

想要实现半自动编译，我们需要下载一个插件。

npm install gulp-livereload --save-dev

安装完成后引入插件并且执行下面的代码：

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
var livereload = require("gulp-livereload");
// 注册事件
gulp.task('js', function () {
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest("dist/js/"))
        .pipe(livereload());// 实时监听
})

// 注册less编译事件
gulp.task('less', function () {
    return gulp.src("less/*.less")
        .pipe(less()) // 编译less文件 为css文件
        .pipe(gulp.dest("css/")) // 将转换文件输出查看
        .pipe(livereload());// 实时监听
})

gulp.task('css',['less'],function(){
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss({compatibility:'ie8'}))
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/css/"))
        .pipe(livereload());// 实时监听

})

// 注册半自动监听
gulp.task('watch',['default'],function(){
    // 开启监听
    livereload.listen();
    // 确认监听的目标以及绑定相应的任务
    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
})
// 默认事件
gulp.task("default", ['js','less','css']);

上面代码中，半自动监听的事件需要注册，并且传入参数default。

gulp.task('watch',['default'],function(){

})

然后在回调函数中开启监听。

livereload.listen();

并且确定监听的任务。

 gulp.watch('js/*.js',['js']);
 gulp.watch(['css/*.css','less/*.less'],['css'])

最后在所有的事件的最后都启用监听。

 .pipe(livereload());// 实时监听

之后，我们想要执行gulp，可以采用下面的命令。

gulp watch

这样只要我们一更改内容，那么就会自动编译。

全自动编译

首先我们来下载插件。

npm install gulp-connect --save-dev

插件安装完成后可以执行下面的代码。

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
var livereload = require("gulp-livereload");
var connect = require("gulp-connect")
// 注册事件
gulp.task('js', function () {
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest("dist/js/"))
        .pipe(livereload())// 实时监听
        .pipe(connect.reload())
})

// 注册less编译事件
gulp.task('less', function () {
    return gulp.src("less/*.less")
        .pipe(less()) // 编译less文件 为css文件
        .pipe(gulp.dest("css/")) // 将转换文件输出查看
        .pipe(livereload())// 实时监听
        .pipe(connect.reload())
})

gulp.task('css',['less'],function(){
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss({compatibility:'ie8'}))
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/css/"))
        .pipe(livereload())// 实时监听
        .pipe(connect.reload())

})

// 注册半自动监听
gulp.task('watch',['default'],function(){
    // 开启监听
    livereload.listen();
    // 确认监听的目标以及绑定相应的任务
    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
})
// 全自动监听
gulp.task('server',['default'],function(){
    // 配置服务器的选项
    // gulp-connect 会提供一个微型的服务器，执行之后会自动的读取所有的文件，然后提供一个服务器的地址，访问即可
    connect.server({
        root:"dist/",
        livereload:true,// 实时刷新
        port:5000 // 端口
    })

    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
})
// 默认事件
gulp.task("default", ['js','less','css']);

上面代码中，创建一个server事件。

gulp.task('server',['default'],function(){})

其中配置server的基础配置

connect.server({
        root:"dist/", // 服务器根目录
        livereload:true,// 实时刷新
        port:5000 // 端口
    })

同时需要在每一个事件最后执行加载。

.pipe(connect.reload())

配置完成后可以在cmd中直接执行：

gulp server

为了便于测试可以在dist目录下创建一个index.html，并且引入压缩之后的css和js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/build.min.css">
    <script src="./js/bundle.min.js"></script>
</head>
<body>
    <div class="index1"></div>
</body>
</html>

打开浏览器，输入http://localhost:5000即可访问。

自动打开网页

可以下载插件open。

npm install open --save-dev

然后在最后加上open方法的调用，并且在其中传入访问的地址。

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
var livereload = require("gulp-livereload");
var connect = require("gulp-connect")
var open = require("open");
// 注册事件
gulp.task('js', function () {
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest("dist/js/"))
        .pipe(livereload())// 实时监听
        .pipe(connect.reload())
})

// 注册less编译事件
gulp.task('less', function () {
    return gulp.src("less/*.less")
        .pipe(less()) // 编译less文件 为css文件
        .pipe(gulp.dest("css/")) // 将转换文件输出查看
        .pipe(livereload())// 实时监听
        .pipe(connect.reload())
})

gulp.task('css',['less'],function(){
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss({compatibility:'ie8'}))
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/css/"))
        .pipe(livereload())// 实时监听
        .pipe(connect.reload())

})

// 注册半自动监听
gulp.task('watch',['default'],function(){
    // 开启监听
    livereload.listen();
    // 确认监听的目标以及绑定相应的任务
    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
})
// 全自动监听
gulp.task('server',['default'],function(){
    // 配置服务器的选项
    // gulp-connect 会提供一个微型的服务器，执行之后会自动的读取所有的文件，然后提供一个服务器的地址，访问即可
    connect.server({
        root:"dist/",
        livereload:true,// 实时刷新
        port:5000 // 端口
    })

    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
    // 设置访问路径
    open("http://localhost:5000/");
})
// 默认事件
gulp.task("default", ['js','less','css']);

命令行输入gulp server即可。

原文地址：https://www.cnblogs.com/caominjie/p/11007904.html

时间： 2024-11-05 22:02:37

Gulp简单介绍的相关文章

自动化构建工具gulp简单介绍及使用

一.简介及安装: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率 gulp的优点:基于流的操作.任务化. 常用api:src .dest.watch.task.pipe 由于gulp是基于node的所以使用的时候需要通过npm或者cnpm安装全局安装(cnpm i -g gulp) 常用的gulp需要安装的包括gulp-cl

gulp 使用介绍

gulp 使用介绍 gulp gulp 插件 gulp的配置文件gulpfile.js gulp 语法 gulp 实例 gulp的缺点 gulp gulp是基于Node.js的前端自动化构建工具,主要用于代码打包.目前主流的前端打包工具,grunt,gulp,webpack.grunt现在似乎慢慢被gulp取代,而我使用gulp也是冲着大家说的配置简单去的,至于通道流,运行文件什么的其实还是次要的:webpack现在很火,听说功能强大,没有用过. npm install gulp -g 注意需要

python的列表，元组和字典简单介绍

引 入 java                                   python 存取多个值:数组或list集合 ------------------------> 列表,元组 key-value格式:    Map        ------------------------>    字典 自己学习发现,java跟python这两门面向对象语言在数据类型的定义上,很多思想都是互通的,这里不说java,简单介绍一下python的列表,元组和字典. 一.列表 List: 最通

javascript的return语句简单介绍

javascript的return语句简单介绍:return语句在js中非常的重要,不仅仅具有返回函数值的功能,还具有一些特殊的用法,有个清晰的把握是非常有必要的.下面就结合实例简单介绍一下return语句的作用.一.用来返回控制和函数结果:通常情况,return语句对于一个函数是很有必要的,因为往往需要函数在一系列的代码执行后会得到一个期望的返回值,而此值就是通过return语句返回,并且将控制权返回给主调函数.语法格式: return 表达式 代码实例如下: function add(){

Object-c集合的简单介绍

一.简单介绍 NSArray/NSMutableArray NSSet/NSMutableSet NSDictionary/NSMutableDictionary NSArray.NSSet.NSDictionary是不可变的,创建的时候初始化 NSMutableArray.NSMutableSet.NSMutableDictionary是可变的 二.使用介绍 NSArray是有序的数组 NSMutableArray *myArray=[[NSMutableArray alloc] init];

plsql的环境与介绍：环境的搭建和plsql的简单介绍

PLSQL编程 1.环境的搭建 (1)创建一个存储表空间 SQL> conn /as sysdbaConnected. SQL> create tablespace plsql datafile '/u01/oracle/oradata/ORCL/plsql01.dbf' size 1G; Tablespace created. (2)创建PLSQL用户SQL> create user plsql identified by plsql default tablespace plsql;

CSS之box-sizing的用处简单介绍

前几天才发现有 box-sizing 这么个样式属性,研究了一番感觉很有意思, 通过指定容器的盒子模型类型,达到不同的展示效果 例如:当一个容器宽度定义为 width:100%;  之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的 如果使用该样式,指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出,而是向内收缩的,这个效果感觉非常实用, 特别是 input 和 textarea 等 现在设置 100% 再直

【玩转微信公众平台之七】 PHP语法简单介绍

经过多篇的努力,我们终于成为了微信公众平台的开发者.但是别高兴的太早,就跟修真小说一样:修炼多年武破虚空,飞升到仙界后本以为成为了天仙即可跳出三界外,不在五行中.可实际到了仙界才发现,成仙只是修行的第一步......没错,成为开发者也才只是第一步,因为现在你的微信公众平台还没有任何功能,说难听点就是小白,说好听点就是白马王子,说可爱点就是小白白,说黄色点就是洗白白,说...----------------要想在微信公众平台添加功能,那就需要写代码:既然说到写代码,那么肯定是要用php(如果用AS

Zookeeper简单介绍

转自:ZooKeeper学习第一期---Zookeeper简单介绍 一.分布式协调技术 在给大家介绍ZooKeeper之前先来给大家介绍一种技术--分布式协调技术.那么什么是分布式协调技术?那么我来告诉大家,其实分布式协调技术 主要用来解决分布式环境当中多个进程之间的同步控制,让他们有序的去访问某种临界资源,防止造成"脏数据"的后果.这时,有人可能会说这个简单,写一个调 度算法就轻松解决了.说这句话的人,可能对分布式系统不是很了解,所以才会出现这种误解.如果这些进程全部是跑在一台机上的