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. vue axios跨域请求,apache服务器设置

    问题所在axios请求会发送两次请求 也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求. 思路: 跨域--> ...

  2. python核心编程学习记录之多线程编程

  3. C#中out与ref区别

    一.ref(参考)与out区别 1.out(只出不进) 将方法中的参数传递出去,在方法中将该参数传递出去之前需要在该方法起始赋初值:在方法外传递的该参数可以不用赋值: 简单理解就是:将一个东西抛出去之 ...

  4. as well as

    一.as well 用法: 1.as well常用作状语,作“又:也”解,相当于too或also,常位于句末,无须用逗号与句子分开.如: I am going to London and my sis ...

  5. Java之基本类库学习

    JAVA基本类库: (一),输入相关 main(String[] args):设置输入参数 输入类:Scanner:Scanner sc=new Scanner(System.in); (二),系统相 ...

  6. java-selenium(二)富文本编辑框的处理

    首先先看一下什么是富文本编辑框 HTML源码 思路:首先先进入到iframe中,再用js写,最后切出iframe 如果想要换行可以在换行的地方加上<br> 如果添加的文本中包含单引号.双引 ...

  7. Solidworks如何在自定义的基准面上创建3D草图

    1 选择某个基准面 右击"基准面上的3D草图"   2 当基准面出现黄色框即为正确.

  8. Odoo 后端数据库postgreSQL事务级别

    Table of Contents 事务的特性 并行事务的问题 事务隔离级别 Odoo事务隔离级别 odoo事务控制         事务的特性 事务4个特性,简写未ACID 原子性(Atomicit ...

  9. SubVersion(SVN)的安装配置使用

    一. SubVersion服务器端安装 安装软件:Setup-Subversion-1.6.4.msi,下载地址:http://subversion.tigris.org/servlets/Proje ...

  10. IOS7下,AVAudioRecorder需要注意的一点

    iOs7下,使用AVAudioRecorder录音的时候,会在顶部出现一个红框,或者红框一闪而过,这时候需要设置AVAudioSession,如下代码: AVAudioSession * sessio ...