正文

gulp基本用法(代码片段)

author  author  2022-11-10  376

关键词：

Gulp

原文地址：http://www.ybao.org/book/gulp/828.html

一、简介

1.gulp.js是一个前端构建工具，与gruntjs类似。gulp使用node中的stream来读取和操作数据，其速度更快。

eg:每次修改代码都要做的编译ES6、sass、压缩html这些重复性工作。gulp脚本就是为了减少重复性工作而做的工作。

2.与grunt比较

1.性能更高

Grunt频繁的IO操作读写
读取A --> A.a() --> 写A --> 读取A --> A.b() --> 写A --> 读取A --> A.c() --> 写A --> complete/watch...

gulp是将项目任务流程以stream(流)的形式来做管道化处理
读取A并转为流信息 --> A.a() --> A.b() --> A.c() --> 写A --> complete/watch...

"流"：读取文件时，不按常规那样把文件一口气写入内存中，而是把文件转为数据流，收到多少数据就处理多少数据，像经过竹筒的涓涓流水那样，有水源过来了就马上处理后再送出去，知道水源全部流过该竹筒。

2.健壮性更好

gulp走的是递归编译的解析方式，有助于项目优化的健壮性。
比如：我们使用sass来编写样式，其中b.scss引入了_a.scss文件，如果我们修改了_a.scss的内容，gulp会即时更新b.scss对应的b.css编译文件，但Grunt是基于缓存机制的，故不会重新编译b.scss文件，导致问题。

3.配置更简洁

二、gulp使用

1.gulpfile.js文件

var gulp = require("gulp");
gulp.task(‘default‘,function()console.log("xxx"));

2.运行

gulp  //运行默认任务
gulp 任务名  //运行特定任务

三、gulp API

1.gulp.src(globs[,options])

输出符合所提供的匹配模式或者匹配模式的数组的文件。将返回一个stream可以被piped到别的插件中。

参数：

globs--String或Array，所要读取的glob或者包含globs的数组
options--Object通过glob-stream所传递给node-glob的参数
options.buffer:默认值true,若为false,那么会以stream方式返回file.contents而不是buffer的形式。这在处理一些大文件时候会很有用。
options.read：默认值为true,若设置为false,那么file.contents会返回空值null，也就是并不会去读取文件。
options.base:String，将会加在glob之前。

Grunt主要是以文件为媒介来运行它的工作流的，比如在Grunt中执行完一项任务后，会把结果写入到一个临时文件中，然后可以在这个临时文件内容的基础上执行其它任务，执行完之后又把结果写入到临时文件中...就这样反复下去。

而在Gulp中，使用的是node中的stram,首先获取到需要的stream，然后可以通过stream的pipe()方法把流写入到文件中。所以Gulp是以stream为媒介的，它不需要频繁的生成临时文件。

gulp.src()方法是用来获取流的，但是这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。

Gulp内部使用node-glob模块来实现文件匹配功能。

* 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分割符出现在末尾。
能匹配a.js、x.y、abc、abc/、但不能匹配a/b.js
**匹配路径中的0个或多个目录及子目录，需要单独出现，即它左右不能有其他东西，如果出现为末尾，也能匹配文件。
?匹配文件路径中的一个字符（不会匹配路径分割符）
[...]匹配方括号中出现的字符中的任意一个
gulp.src([‘js/.js‘,‘css/.css‘,‘*.html‘]);

使用数组的方式可以很方便的使用排除模式，在数组中的单个匹配模式前加上!即是排除模式，但是这个不能用在数组的第一个元素中。

2.gulp.dest(path[,options])

能被pipe进来，并且将会写文件。并且重新输出所有数据，因此你可以将它pipe到多个文件夹。如果文件夹不存在，将会自动创建它。
path: String or Function。写入文件的路径
options.cwd:输出目录的cwd（当前工作目录）参数，只在所给的输出目录是相对路径时候有效
options.mode:String,默认为0777.八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。

gulp的使用流程：首先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中。注意：我们给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名。它生成的文件名使用的是导入的文件流自身的文件名。

3.gulp.task(name[,deps],fn)：用来定义任务

gulp.task("myTask",["array","task","name"],function()...);

如果任务之间没有依赖，任务会按你书写的顺序去执行，如果有依赖则会先执行依赖的任务。

如果某个任务所依赖的任务是异步的，gulp不会等待所依赖的异步任务完成，而是会接着执行后续的任务。

如何解决所依赖的任务（异步任务）执行完之后再执行后续任务？

方案一：在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成，这个回调函数就是任务函数的第一个参数。

gulp.task("one",function(callback)
    setTimeout(function()
        console.log("one is done");
        callback();  //执行回调函数，表示这个异步任务已经完成
    ,5000);
)
gulp.task("two",["one"],function()
    console.log("two is done");
);

方案二：定义任务时返回一个流对象。适用于任务就是操作gulp.src获取到的流的情况。

gulp.task("one",function()
    var stream = gulp.src("js/**.js")
        .pipe(dosomething())
        .pipe(gulp.dest(‘build‘));
    return stream;
);

gulp.task("two",["one"],function()
    console.log("two is done");
);

方案三：返回一个promise对象

var Q = require("q");   //一个著名的异步处理的库
gulp.task("one",function()
    var deferred = Q.defer();
    setTimeout(function()
        deferred.resolve();
    ,5000);
    return deferred.promise;
);
gulp.task("two",["one"],function()
    console.log("two is done");
);

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

gulp.task("uglify",function()
    //dosomething;
);
gulp.task("reload",function()
    //dosomething;
);
gulp.watch("js/**.js",["uglify","reload"]);

gulp.watch(glob[,opts,cb]);

cb参数时一个函数。每当监视的文件发生变化时，就会调用这个函数，并且回给传入一个对象，该对象包含了文件变化的一些信息，type属性为变化的类型，added,changed,deleted；path属性是发生变化的文件的路径。

gulp.watch("js/**/*.js",function(event)
    console.log(event.type);
    console.log(event.path);
);

四、gulp常用插件

1.js文件压缩

npm install gulp-uglify --save-dev

var gulp = require("gulp"),
uglify = require("gulp-uglify");
gulp.task("minify-js",function()
    gulp.src("js/*.js")  //获取文件流
        .pipe(uglify())  //压缩js
        .pipe(gulp.dest(‘dist/js‘));  //输出压缩后的js
);

2.重命名

npm install gulp-rename --save-dev

var gulp = require("gulp"),
    rename = require("gulp-rename"),
    uglify = require("gulp-uglify");
gulp.task("rename",function()
    gulp.src("js/jquery.js")
        .pipe(uglify())
        .pipe(rename("jquery.min.js"))
        .pipe(gulp.dest(‘js‘));
)

3.css文件压缩

npm install gulp-minify-css

var gulp = require("gulp"),
    monifyCss = require("gulp-minify-css");
gulp.task("minify-css",function()
    gulp.src("css/*.css")
        .pipe(minifyCss())
        .pipe(gulp.dest(‘dist/css‘));
);

4.html文件压缩

npm install gulp-minify-html --save-dev

var gulp = require(‘gulp‘),
minifyHtml = require("gulp-minify-html");
gulp.task(‘minify-html‘, function () 
    gulp.src(‘html/*.html‘) // 要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest(‘dist/html‘));
);

5.js代码检查

npm install gulp-jshint --save-dev

var gulp = require("gulp"),
    jshint = require("gulp-jshint");
gulp.task("jsLint",function()
    gulp.src("js/*.js")
        .pipe(jshint())
        .pipe(jshint.reporter());  //输出检查结果
);

6.文件合并

npm install gulp-concat --save-dev

var gulp = require("gulp"),
concat = require("gulp-concat");
gulp.task("concat",function()
    gulp.src("js/*.js")
        .pipe(concat("all.js"))
        .pipe(gulp.dest("dist/js"));
);

7.图片压缩

npm install gulp-imagemin --save-dev

var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var imagemin = require("imagemin-pngquant");

gulp.task("default",function()
    return gulp.src("src/images/*")
            .pipe(imagemin(
                progressive:true,
                use:[pngquant()]  //使用pngquant来压缩png图片
            ))
            .pipe(gulp.dest("dist"));
);

8.自动刷新

npm install gulp-liverreload --save-dev

该插件最好配合谷歌浏览器使用，且要安装livereload chrome extension扩展插件

var gulp = require("gulp"),
    less = require("gulp-less"),
    livereload= require("gulp-livereload");
gulp.task("less",function()
    gulp.src("less/*.less")
        .pipe(less())
        .pipe(gulp.dest("css"))
        .pipe(livereload());
);
gulp.task("watch",function()
    livereload.listen();
    gulp.watch("less/*.less",["less"]);
);

9.less和sass编译

npm install gulp-less --save-dev

var gulp = require("gulp"),
    less = require("gulp-less");
gulp.task("compile-less",function()
    gulp.src("less/*.less")
    .pipe(less())
    .pipe(gulp.dest("dis/css"));
);

npm install gulp-sass --save-dev

 var gulp = require("gulp"),
    sass = require("gulp-sass");
gulp.task("compile-sass",function()
    gulp.src("sass/*.sass")
    .pipe(sass())
    .pipe(gulp.dest("dis/css"));
);

10.自动加载插件

npm install gulp-load-plugins --save-dev

自动加载package.json文件里的gulp插件。放置因插件过多而导致gulpfile.js文件中require(...)冗杂。

var gulp = require("gulp");
var plugins = require("gulp-load-plugins")();

11.Browsersync

npm install -g browser-sync

监听静态文件，需要使用服务器模式。BrowserSync将启动一个小型服务器，并提供一个URL来查看您的网站。

// --files路径是相对于运行该命令的项目
browser-sync start --server --files "css/*.css"
browser-sync start --server --files "**/*.css,**/*.html"

监听动态网站

如果您已经有其他本地服务器环境PHP或类似的，您需要使用代理模式。
BrowserSync将通过代理URL(localhost:3000)来查看您的网站。
browser-sync start --proxy "主机名" "css/.css"
在本地创建了一个PHP服务器环境，并通过绑定BrowserSync.cn来访问本地服务器，使用一下命令方式，BrowserSync将提供一个新的地址localhost:3000来访问Browsersync.cn，并监听其css目录下的所有css文件。
browser-sync start --proxy "Browsersync.cn" "css/.css"

在gulpfile.js文件里使用

var gulp = require("gulp");
var browserSync = require("browser-sync").create();
//静态服务器
gulp.task("browser-sync",function()
    browserSync.init(
        server:
            baseDir:"./"
        
    );
);
//代理
gulp.task("browser-sync",function()
    browserSync.init(
        proxy:"你的域名或IP"
    );
);

通过流的方式创建任务流程，这样您就可以在任务完成后调用reload，所有的浏览器将被告知变化并实时更新。

var gulp = require("gulp"),
var browserSync = require("browser-sync").create();
var sass = require("gulp-sass");
var reload = browserSync.reload;
//静态服务器+监听scss/html文件
gulp.task("server",["sass"],function()
    browserSync.init(
        server:"./app"
    );
    gulp.watch("app/scss/*.scss",["sass"]);
    gulp.watch("app/*.html").on("change",reload);
);
//scss编译后的css将注入到浏览器里实现更新
gulp.task("sass",function()
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(reload(stream:true));
);
gulp.task("default",["server"]);

浏览器重载

gulp.task("js",function()
    return gulp.src("js/*.js")
        .pipe(browserify())
        .pipe(uglify())
        .pipe(gulp.dest("dist/js"))
);
//创建一个任务确保js任务完成之前能够持续响应
//浏览器重载
gulp.task("js-watch",["js"],browserSync.reload);
//使用默认任务启动BrowserSync，监听JS文件
gulp.task("server",["js"],function()
    //从这个项目的根目录启动服务器
    browserSync(
        server:
            baseDir:"./"
        
    );
    //添加browserSync.reload到任务队列里
    //所有的浏览器重载后任务完成
    gulp.watch("js/*.js",["js-watch"]);
);

手动重载

//使用变量引用reload方法
var reload = browserSync.reload;
//编译SASS&自动注入到浏览器
gulp.task("sass",function()
    return gulp.src("scss/style.scss")
            .pipe(sass(includePaths:["scss"]))
            .pipe(gulp.dest("css"))
            .pipe(reload(stream:true));
)
//监听scss和html文件，当文件发生变化后做些什么
gulp.task("server",["sass"],function()
    browserSync(
        server:
            baseDir:"./"
        
    )
    gulp.watch("scss/*.scss",["sass"]);
    gulp.watch("*.html").on("change",browserSync.reload);
)

gulp基本用法

...几天一直在研究gulp的使用方法，今天抽时间来整理一下基本步骤。gulp的使用流程：安装nodejs->安装git（方便调出命令窗口，可选） ->全局安装gulp->项目安装gulp以及gulp插件->配置gulpfile.js->运行任务1.gulp是基于n... 查看详情

gulp基本用法

很多小伙伴一开始不知道怎么搭建gulp环境，这里我就简单的举个列子好了。一：gulp是基于Nodejs的自动任务运行器，因此必须安装node的，地址node官网也要安装npm，npm（nodepackagemanager）nodejs的包管理器，用于node插件管理（包括安... 查看详情

javascript基本gulp浏览器同步-观看(代码片段)

查看详情

json（gulp4）基本的gulpfile前端入门套件(代码片段)

查看详情

gulp简介gulp基本使用步骤gulp-cli工具gulpfile.js文件gulp插件(代码片段)

...缩、语法转换、抽离公共文件、自动实现浏览器刷新等。基本使用步骤：1.使用npminstallgulp下载gulp库文件。2.在项目文件夹中新建gulpfile.js文件&# 查看详情

gulp自动化构建的基本使用(代码片段)

...任务自动化，从而减少你所浪费的时间、创造更大价值。基本使用安装gulpnpmigulp-D在项目根目录下创建gulpfile.js文件functiondefaultTask(cb)//在此处写默认任务的代码cb() 查看详情

gulp4.0基本配置，超简单！(代码片段)

最近复习了一下gulp，目前是4.0版本。下图是基本目录结构，文件里面的内容可以随意添加，超详细简洁啊！直接上代码（依赖未完全使用）：项目的所有依赖都可以安装，每个都有详细的注释。constgulp=require(‘gulp‘);co... 查看详情

gulp.src基本选项适用于一个数组项(代码片段)

我在我的base中使用gulp.src选项我希望base将应用于我的src数组中的一个项目，但不是静止的：就我而言：gulp.src(['./languages/*.json','../../../Configuration/Client/help/*/**'],base:'../../../Configuration/Client').pipe(zip('my_zip_file.zip')) 查看详情

如何使用gulp？(代码片段)

...驭它。这是这篇文章的主要目的。帮助你了解Gulp的基础用法，助你早日完成一统天查看详情

gulp(代码片段)

gulp基本命令npmigulp-g//仅在首次执行需要npminit-y//生成package.json文件npmigulp@3--save-dev//在当前项目中安装gulpnpmigulp-concat--save-dev//合并文件npmigulp-uglify--save-dev//压缩混淆js//压缩cssnpmigulp-cssmin--save-dev//压缩htmlnpminst 查看详情

stringbuilder基本用法(代码片段)

//StringBuilder用法publicclassStringBuilderTestpublicstaticvoidmain(String[]args)StringBuildersb=newStringBuilder();//追加字符串sb.append("Java");//sb="Java";System.out.println(sb);//插入sb.insert(0,"Hello") 查看详情

volley基本用法(代码片段)

下载Volleygitclonehttps://android.googlesource.com/platform/frameworks/volleyAndroidManifest.xml中添加如下权限：<uses-permissionandroid:name="android.permission.INTERNET"/>StringRequest的用法Reques 查看详情

history基本用法(代码片段)

设置记录保存的数量：/etc/profile查看修改记录保存的文件：~/.bash_history如果是root用户就是在/root/.bash_history 查看详情

reactnavigation基本用法(代码片段)

/***Createdbyappleon2018/9/23.*/importReact,Componentfrom‘react‘;importAppRegistry,View,Text,Buttonfrom‘react-native‘;importStackNavigatorfrom‘react-navigation‘;constHomeScreen=(navigation)=&g 查看详情

正文

gulp基本用法(代码片段)

Gulp

一、简介

1.gulp.js是一个前端构建工具，与gruntjs类似。gulp使用node中的stream来读取和操作数据，其速度更快。

2.与grunt比较

1.性能更高

2.健壮性更好

3.配置更简洁

二、gulp使用

1.gulpfile.js文件

2.运行

三、gulp API

1.gulp.src(globs[,options])

输出符合所提供的匹配模式或者匹配模式的数组的文件。将返回一个stream可以被piped到别的插件中。

而在Gulp中，使用的是node中的stram,首先获取到需要的stream，然后可以通过stream的pipe()方法把流写入到文件中。所以Gulp是以stream为媒介的，它不需要频繁的生成临时文件。

gulp.src()方法是用来获取流的，但是这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。

Gulp内部使用node-glob模块来实现文件匹配功能。

2.gulp.dest(path[,options])

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

3.gulp.task(name[,deps],fn)：用来定义任务

如果任务之间没有依赖，任务会按你书写的顺序去执行，如果有依赖则会先执行依赖的任务。

如果某个任务所依赖的任务是异步的，gulp不会等待所依赖的异步任务完成，而是会接着执行后续的任务。

如何解决所依赖的任务（异步任务）执行完之后再执行后续任务？

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

gulp.watch(glob[,opts,cb]);

四、gulp常用插件

1.js文件压缩

npm install gulp-uglify --save-dev

2.重命名

npm install gulp-rename --save-dev

3.css文件压缩

npm install gulp-minify-css

4.html文件压缩

npm install gulp-minify-html --save-dev

5.js代码检查

npm install gulp-jshint --save-dev

6.文件合并

npm install gulp-concat --save-dev

7.图片压缩

npm install gulp-imagemin --save-dev

8.自动刷新

npm install gulp-liverreload --save-dev

该插件最好配合谷歌浏览器使用，且要安装livereload chrome extension扩展插件

9.less和sass编译

npm install gulp-less --save-dev

npm install gulp-sass --save-dev

10.自动加载插件

npm install gulp-load-plugins --save-dev

自动加载package.json文件里的gulp插件。放置因插件过多而导致gulpfile.js文件中require(...)冗杂。

11.Browsersync

npm install -g browser-sync

监听静态文件，需要使用服务器模式。BrowserSync将启动一个小型服务器，并提供一个URL来查看您的网站。

监听动态网站

在gulpfile.js文件里使用

通过流的方式创建任务流程，这样您就可以在任务完成后调用reload，所有的浏览器将被告知变化并实时更新。

浏览器重载

手动重载

gulp基本用法

gulp基本用法

javascript基本gulp浏览器同步-观看(代码片段)

json（gulp4）基本的gulpfile前端入门套件(代码片段)

gulp简介gulp基本使用步骤gulp-cli工具gulpfile.js文件gulp插件(代码片段)

gulp自动化构建的基本使用(代码片段)

gulp4.0基本配置，超简单！(代码片段)

gulp.src基本选项适用于一个数组项(代码片段)

如何使用gulp？(代码片段)

gulp(代码片段)

javahibernate基本用法(代码片段)

html基本用法(代码片段)

markdownansible模板的基本用法(代码片段)

javascript`createnamespacereducer`的基本用法(代码片段)

stringbuilder基本用法(代码片段)

volley基本用法(代码片段)

history基本用法(代码片段)

reactnavigation基本用法(代码片段)