初次接触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插件笔记的更多相关文章

  1. gulp学习笔记4

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...

  2. gulp学习笔记3

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...

  3. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  4. gulp 安装笔记

    1.全局安装cnpm(淘宝的npm国内镜像),gulp,rimraf(卸载用插件)npm install -g cnpm --registry=https://registry.npm.taobao. ...

  5. gulp 插件

    原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具gr ...

  6. gulp学习笔记

    第一步:安装Node 首先,gulp 是基于 Nodejs 的自动任务运行器,所以安装gulp之前,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,下载并安装No ...

  7. gulp使用笔记

    gulp简介 gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试.检查.合并.压缩.格式 ...

  8. gulp插件(gulp-jmbuild)，用于WEB前端构建

    源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...

  9. gulp插件gulp-usemin简单使用

    关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将H ...

随机推荐

  1. v$pwfile_user表

    SQL> select * from v$pwfile_users;select * from v$pwfile_users; USERNAME SYSDB SYSOP SYSAS------- ...

  2. Openstack入门篇（十八）之Cinder服务-->使用NFS作为后端存储

    1.安装cinder-volume组件以及nfs [root@linux-node2 ~]# yum install -y openstack-cinder python-keystone [root ...

  3. 有哪些 Bootstrap 的学习案例？

    bootstrap经典实用案例 bootstrap经典实用案例(非常详细),从菜鸟到高手的过程是艰辛的,你渴望救助.这本教程就是你无言的助手,默默的帮你到永远. 带奋斗一起飞翔,因为有了它,让我拥有理 ...

  4. python并发编程之多进程理论知识

    一 什么是进程 进程:正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 举例(单核+多道,实现多个进程的并发执行): egon在一个时间段内有很多任务要做:python备课的任务,写书的任 ...

  5. Java动态代理：一个面包店的动态代理帝国

    文章首发于[博客园-陈树义],点击跳转到原文大白话说Java动态代理:一个面包店的动态代理帝国 代理模式是设计模式中非常重要的一种类型,而设计模式又是编程中非常重要的知识点,特别是在业务系统的重构中, ...

  6. 【windows server 2008R2】windows server 2008R2自动重启

    客户反映2018.3.20早上8点多数据库重启. 我找了半天原因,看了一下告警日志没发现什么问题.后来我再跟他确认,他说他练上去的时候正在准备桌面.这感觉像是服务器重启导致数据库重启. 于是我远程上去 ...

  7. Linux之linux入门

    学习linux之前先了解一下操作系统: 操作系统的定义:         操作系统(英语:operating system,缩写作 OS)是管理计算机硬件与软件资源的计算机程序,同时也是计算机系统的内 ...

  8. k8s常用命令记录

    目录 kubectl常用命令 kubectl get pod -n dev 查看日志 查看pod详情 删除pod 删除job 进入pod里面 查看namespace 创建namespace 删除nam ...

  9. Ubuntu 16.04.4 LTS环境中php7.0使用mysqli失败，数据库无法访问

    环境: Ubuntu 16.04.4 LTS php7.0 输入命令php -m,显示如下,发现没有mysqli模块 输入命令sudo apt install php-mysql,安装mysql模块, ...

  10. python自动化17-JS处理滚动条

    前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的. 这时候 ...