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 ...
随机推荐
- HBase数据访问的一些常用方式
类型 特点 场合 优缺点分析 Native Java API 最常规和高效的访问方式 适合MapReduce作业并行批处理HBase表数据 Hbase Shell HBase的命令行工具,最简单的访问 ...
- 约束3：default约束
默认值约束(Default约束)的作用是在执行insert命令时,如果命令没有显式给指定的列赋值,那么把默认约束值插入到该列中:如果在Insert命令中显式为指定的列赋值,那么将该列插入用户显式指定的 ...
- Spring学习(十七)----- Spring自动代理创建者
1. BeanNameAutoProxyCreator示例 在此之前,必须手动创建一个代理bean(ProxyFactryBean). <beans xmlns="http://www ...
- Qt-网易云音乐界面实现-8 主导航的实现-QtabWidget
哎呀,堕落了,快有小两周没哟更新了,是在是没有动力了,浏览量连三位数都没有,是在是没有写下去的信心. 还有就是这个网易云音乐的代码量绝对是不可小视的,完全低估了这个软件的能量.昨天仔细想了一下,写不下 ...
- weblogic在linux和window下的安装
weblogic在linux和window下的安装 weblogic下载地址 Windows server2008 一直下一步没什么坑 centos6.5 使用rpm安装jdk8 JDK下载 安装jd ...
- webgl绘制粗线段
webgl1不支持设置线段宽度,这就只好通过shader来实现了,参考了踏得网的例子,引用地址:http://wow.techbrood.com/fiddle/43140.先在此感谢踏得网创始人之一 ...
- 在WebGL场景中进行棋盘操作的实验
这篇文章讨论如何在基于Babylon.js的WebGL场景中,建立棋盘状的地块和多个可选择的棋子对象,在点选棋子时显示棋子的移动范围,并且在点击移动范围内的空白地块时向目标地块移动棋子.在这一过程中要 ...
- Unity特殊文件夹详解
##1.Editor Editor文件夹可以在根目录下,也可以在子目录里,只要名子叫Editor就可以.比如目录:/xxx/xxx/Editor 和 /Editor 是一样的,无论多少个叫Editor ...
- spring-framework-reference(5.1.1.RELEASE)中文版——Core部分
前言 最近在学习Spring框架,在学习的同时,借助有道翻译,整理翻译了部分文档,由于尚在学习当中,所以该篇文章将会定时更新,目标在一个月左右时间翻译完全部版本. 虽然大部分内容为翻译,但是其中可能会 ...
- systemctl status ssh.service 服务重启出现报错
Case: ubuntu在从Ubuntu 16.04 LTS 升级到18.04 的时候,执行 do-release-upgrade -d 后,发现ssh无法登陆服务器, Solution: 1.通过s ...