Gulp插件笔记

初次接触Gulp是出于网页模块化的需要，用过之后发现这个任务管理工具有很多实用的插件，意外地好用，于是打算写下这篇笔记把用到的Gulp插件记录一下。至于想了解Gulp基本用法的同学可以去Gulp官网查看API文档，一看便懂。

此处贴上地址https://www.gulpjs.com.cn/docs/api/

gulp-html-import

API文档: https://www.npmjs.com/package/gulp-html-import

简介:

引入html内容到另一个html文件的指定位置，生成引入后的完整html文件。

示例:

./components/component.html

<h1> Component to be imported </h1>

./pages/page.html

<html>
@import "component.html"
<h1> Page to import component </h1>
</html>

./gulpfile.js

var gulp = require('gulp');
var htmlImport = require('gulp-html-import');

gulp.task('import', function () {
    gulp.src('./pages/page.html') // 需要引入元素的页面
        .pipe(htmlImport('./components/')) // 引入的元素所在目录
        .pipe(gulp.dest('dist')); // 引入元素后html文件所在的目录
});

Terminal中键入gulp import，将会得到如下文件:

./dist/page.html

<html>
<h1> Component to be imported </h1>
<h1> Page to import component </h1>
</html>

这样，html文件就能轻松模块化啦~

browser-sync

API文档:

https://browsersync.io/docs/gulp

简介:

是否还在为难以即时预览设计效果感到苦恼？用browser-sync就对了！另提一句，Browsersync还支持GUI操作，并且有跨平台的特性，感兴趣的同学可以去他们官网看看https://www.browsersync.io/

示例:

gulpfile.js

var gulp = require('gulp');
var browserSync = require('browser-sync');

gulp.task('view', function () {
    browserSync.init({
      proxy: "127.0.0.1:8000", // 此处连接本地代理进行预览，也可用server参数设置文件路径进行浏览
      browser: "firefox" // 设置预览时所用浏览器，推荐使用firefox
    });
    gulp.watch('./dist/*.html', browserSync.reload); // 不断检查dist目录下所有html文件修改状况，一有修改就刷新页面
});

Terminal中键入gulp view后，只要html文件一保存，dist目录下所有html文件对应页面就会刷新，实现实时预览。