1、安装nodejs并选装cnpm;

npm install cnpm -g --registry=https://registry.npm.taobao.org

2、全局安装gulp;

cnpm install gulp -g

3、新建package.json文件;(第二次在项目中使用gulp时可跳过1、2步)

进入项目文件夹,cnpm init

4、本地安装gulp;

cnpm install gulp --save-dev 

5、安装gulp插件;

cnpm install ### --save-dev (###为插件名)

6、新建gulpfile.js文件;

 var gulp = require('gulp'),
htmlmin = require('gulp-htmlmin'); gulp.task('CompressHtml', function () {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
return gulp.src('index.html')//需压缩的HTML文件
.pipe(htmlmin(options))
.pipe(gulp.dest('dist/html'));//'dist'为存放文件夹
});

7、通过命令提示符运行gulp任务。

gulp 任务名称

gulp CompressHtml

gulp安装教程的更多相关文章

  1. windows下Gulp入门详细教程 &&gulp安装失败的原因(红色)

    以下教程亲自实践可行: 另外添加一个Gulp自动编译.压缩.更新.测试的教程链接:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...

  2. Gulp安装使用教程

    题记:为什么要使用gulp,网上有很多关于gulp的优势,而在我看来,这些都是工具的优势!工具的优势最主要体现在易用性上,听说gulp比grunt更易用,所以这里写个文档记录. 同样要保证nodejs ...

  3. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  4. Gulp安装流程、使用方法及cmd常用命令导览

    Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...

  5. gulp ( http://markpop.github.io/2014/09/17/Gulp入门教程 )

    前言 最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp,真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用Gulp Gulp基于Node.j ...

  6. Linux+apache+mono+asp.net安装教程

    Linux+apache+mono+asp.net安装教程(CentOS上测试的) 一.准备工作: 1.安装linux系统(CentOS,这个就不多讲了) 2.下载所需软件 http-2.4.4.ta ...

  7. Greenplum 源码安装教程 —— 以 CentOS 平台为例

    Greenplum 源码安装教程 作者:Arthur_Qin 禾众 Greenplum 主体以及orca ( 新一代优化器 ) 的代码以可以从 Github 上下载.如果不打算查看代码,想下载编译好的 ...

  8. git 安装教程

    昆,简单说下安装教程1,安装Git2,安装TortoiseGit3,打开第一步安装的git工具GIT BASH

  9. Docker和Docker-compose安装教程以及docker-elk,docker-storm安装教程

    此安装教程仅供我自己安装配置时查看,其他的人不可以偷看!!! 安装Docker 1. Update package information, ensure that APT works with th ...

随机推荐

  1. [置顶] python3 django models保存filefiled字段统一目录、不修改文件名的方法

    最经编写一个model时处理filefiled,使用post_form.save()进行新增和编辑文件保存位置不统一,如果出现重复文件名重复的话,上传文件名会被改名. 现有代码如下: models.p ...

  2. 改变PS1变量的颜色

    2016.1.11今天学了改变PS1的颜色,怎么增加PS1变量找到文件(.bash_profile),或者bashrc export PS1="\[\e[32;1m\]Test $PWD&g ...

  3. Spring配置xml版

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  4. redhat6.4 install 163 source

    1) 到http://mirrors.163.com的 centos帮助文档 中下载CentOS6-Base-163.repo文件,存放到/etc/yum.repo.d中 wget http://mi ...

  5. 清理memcached缓存

    清理memcached缓存 学习了:https://blog.csdn.net/allus0918/article/details/50481927 使用telnet登录 flush_all 命令:

  6. [Angular] Dynamic component rendering by using *ngComponentOutlet

    Let's say you want to rending some component based on condition, for example a Tabs component. Insid ...

  7. 算法导论(Introduction to Algorithms )— 第十二章 二叉搜索树— 12.1 什么是二叉搜索树

    搜索树数据结构支持很多动态集合操作,如search(查找).minmum(最小元素).maxmum(最大元素).predecessor(前驱).successor(后继).insert(插入).del ...

  8. liunx下安装第三方Python(PIP安装)

    wget https://pypi.python.org/packages/source/p/pip/pip-6.0.8.tar.gz $ tar zvxf pip-6.0.8.tar.gz $ cd ...

  9. 国内外DNS服务器地址列表大全

    DNS(Domain Name System)是域名解析服务器的意思,它在互联网的作用是把域名转换成为网络可以识别的IP地址. 通常来说,香港.韩国.日本等国的DNS服务器速度会比较快,大家可以多用几 ...

  10. CentOS6.8 搭建SVN并用钩子自动实现同步到web目录

    一 安装 yum install subversion 二 检查是否安装成功 svn --version 三 创建仓库目录 mkdir –p /home/svnroot/test 四 创建项目 svn ...