Gulp简单介绍

时间 2019-12-14

标签 gulp 简单介绍栏目 JavaScript 繁體版

原文原文链接

Gulp

介绍

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

特色

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

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

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

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

安装

下面咱们来经过npm来安装一下gulp。gulp

#初始化项目package.json
npm init

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

#局部安装gulp
npm install gulp@3 --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的基本功能，将目录结构模拟成项目的目录结构，大体以下:less

// 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便可。