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

posted @   captainYi  阅读(226)  评论(0编辑  收藏  举报
编辑推荐:
· 聊一聊 C#前台线程 如何阻塞程序退出
· 几种数据库优化技巧
· 聊一聊坑人的 C# MySql.Data SDK
· 使用 .NET Core 实现一个自定义日志记录器
· [杂谈]如何选择:Session 还是 JWT?
阅读排行:
· 字节豆包,来园广告
· 一个.NET开源、易于使用的屏幕录制工具
· 【经验】几种数据库优化技巧
· 我用cursor, 半就开发了一个手机壁纸小程序,真的太强了
· 聊一聊 C#前台线程 如何阻塞程序退出
点击右上角即可分享
微信分享提示