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 ...
随机推荐
- springboot整合Mybatis（一）——入门
一.概述 1.先导 mybatis入门随笔:http://www.cnblogs.com/jiangbei/p/6884641.html 2.引入依赖 <dependency> <g ...
- 不能存在多个@ManyToMany(fetch=FetchType.EAGER)
@LazyCollection(LazyCollectionOption.FALSE) 原地址:https://stackoverflow.com/questions/4334970/hibernat ...
- Kubernetes学习之路（十七）之statefulset控制器
目录 一.statefulset简介 二.为什么要有headless?? 三.为什么要 有volumeClainTemplate?? 四.statefulSet使用演示 (1)查看statefulse ...
- $watch, $watchCollection, $watchGroup的使用
官方文档 $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objec ...
- SpringCloud-声明式Rest调用Feign（四）
前言:一般情况下我们通常使用RestTemplate来实现声明式远程调用,但是当参数过多,那么效率就会变得很低,并且难以维护,所以在微服务当中也有声明式Rest调用的组件Feign 一.Feign简介 ...
- Linux日常积累
1. /etc/bashrc(有的 Linux 没有这个文件) 和 /etc/profile ,它们分别存放的是 shell 变量和环境变量,写在 /etc/profile 里面的是对所有用户永久 ...
- CF 675E Trains and Statistic
草稿和一些题解而已 因为指针太恶心了 所以query决定还是要试试自己yy一下 #include<cstdio> #include<cstring> #include<i ...
- 学习python,第五篇
Python中%r和%s的详解及区别 %r用rper()方法处理对象%s用str()方法处理对象 有些情况下,两者处理的结果是一样的,比如说处理int型对象. 例一: print "I am ...
- MUI的踩坑笔记
最近在做公司项目的手机端实现,稍微记录下遇到的坑 1.在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady( ...
- Protocol buffer的使用案例
Protocolbuffer(以下简称PB)是google 的一种数据交换的格式,它独立于语言,独立于平台.google 提供了多种语言的实现:java.c#.c++.go 和 python,每一种实 ...