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学习笔记4
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...
- gulp学习笔记3
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- gulp 安装笔记
1.全局安装cnpm(淘宝的npm国内镜像),gulp,rimraf(卸载用插件)npm install -g cnpm --registry=https://registry.npm.taobao. ...
- gulp 插件
原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具gr ...
- gulp学习笔记
第一步:安装Node 首先,gulp 是基于 Nodejs 的自动任务运行器,所以安装gulp之前,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,下载并安装No ...
- gulp使用笔记
gulp简介 gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试.检查.合并.压缩.格式 ...
- gulp插件(gulp-jmbuild)，用于WEB前端构建
源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...
- gulp插件gulp-usemin简单使用
关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将H ...
随机推荐
- [ATL/WTL]_[初级]_[关于graphics.DrawImage绘图时显示不正常的问题]
场景 1.使用win32绘图时, 最简单的api是使用 graphics.DrawImage(image,x,y)来绘制, 可是这个api有个坑,它的图片显示完整和设备分辨率(显卡)有关. 说明 1. ...
- Oracle 表备份还原
方法1: create table mdmuser20120801 as select * from mdmuser 方法2: create table mdmuser20120801 as se ...
- Java中getConstructors()、getDeclaredConstructors()、getConstructor(Class<?>... parameterType)、getDeclaredConstructor(Class<?>... parameterType)的区别
区别一 在方法名末尾有s的是返回一个数组,没有s的是返回单个构造器. 区别二 在方法名中加Declared的是返回所有的构造方法,不加Declared的只返回public访问权限的构造器 区别三 有参 ...
- 使用ASP.NET Identity以手机短信实现双重验证
这篇文章将展示怎么使用SMS短信启动双重验证 创建一个ASP.NET 5项目 一开始,使用Visual studio 2015创建一个新的ASP.NET Web应用程序: 在下一步中选择ASP.NET ...
- iOS分类Category探索
什么是Category? Category是Objective-C 2.0之后添加的语言特性,Category的主要作用是为已经存在的类添加方法,一般称为分类,文件名格式是"NSObject ...
- Visual Studio的框选代码区块功能
要从Visual Studio里复制代码粘贴到其他地方,会因为对齐的问题,造成粘贴的时候,代码左边带有大量的空格. 而VS有一个很好的功能就是框选功能,使用方法是,将光标放置在要框选代码的最左边,然后 ...
- CHAPTER 24 History of Our Planet 第24章 我们行星的历史
CHAPTER 24 History of Our Planet 第24章 我们行星的历史 Uncovering the bones of ancient beasts is only part of ...
- docker 安装vim
执行以下命令 apt-get update apt-get install vim
- 北美跨境电商平台Wish透露未来一年在华规划
9月12日,北美跨境电商平台Wish在深圳透露了未来一年在中国区的重点规划.Wish中国区总裁丁浩川表示,在下一阶段,Wish公司将继续围绕 提升平台流量. 加强品类支撑. 深化库存管理. 推进物流改 ...
- Scrum Meeting 11.09
成员 今日任务 明日计划 用时 徐越 解决bug:可以重复点赞:answer被选为best answer后点赞数归零:首页不能正确显示问题的回复数.修改搜索功能的代码 继续测试相关app功能,如果达 ...