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文件对应页面就会刷新，实现实时预览。

巴特西

Gulp插件笔记

gulp-html-import

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

简介:

示例:

browser-sync

API文档:

简介:

示例:

最新文章

热门文章