gulp安装教程
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安装教程的更多相关文章
- windows下Gulp入门详细教程 &&gulp安装失败的原因(红色)
以下教程亲自实践可行: 另外添加一个Gulp自动编译.压缩.更新.测试的教程链接:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...
- Gulp安装使用教程
题记:为什么要使用gulp,网上有很多关于gulp的优势,而在我看来,这些都是工具的优势!工具的优势最主要体现在易用性上,听说gulp比grunt更易用,所以这里写个文档记录. 同样要保证nodejs ...
- (转)前端构建工具gulp入门教程
前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...
- Gulp安装流程、使用方法及cmd常用命令导览
Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...
- gulp ( http://markpop.github.io/2014/09/17/Gulp入门教程 )
前言 最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp,真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用Gulp Gulp基于Node.j ...
- Linux+apache+mono+asp.net安装教程
Linux+apache+mono+asp.net安装教程(CentOS上测试的) 一.准备工作: 1.安装linux系统(CentOS,这个就不多讲了) 2.下载所需软件 http-2.4.4.ta ...
- Greenplum 源码安装教程 —— 以 CentOS 平台为例
Greenplum 源码安装教程 作者:Arthur_Qin 禾众 Greenplum 主体以及orca ( 新一代优化器 ) 的代码以可以从 Github 上下载.如果不打算查看代码,想下载编译好的 ...
- git 安装教程
昆,简单说下安装教程1,安装Git2,安装TortoiseGit3,打开第一步安装的git工具GIT BASH
- Docker和Docker-compose安装教程以及docker-elk,docker-storm安装教程
此安装教程仅供我自己安装配置时查看,其他的人不可以偷看!!! 安装Docker 1. Update package information, ensure that APT works with th ...
随机推荐
- docer中运行crontab
1 安装 sudo apt-get install cron 2 启动 start cron 3 列出所有本机启动crontab任务 ls -l /etc/init.d 列出所有自建cron任务 ...
- HTML5游戏实战(1):50行代码实现正面跑酷游戏
前段时间看到一个"熊来了"的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法. CanTK(C ...
- 配置Linux实现静态路由
配置Linux实现静态路由 背景和原理 路由器的功能是实现一个网段到另一个网段之间的通信,路由分为静态路由.动态路由. 默认路由和直连路由.静态路由是手工指定的,使用静态路由的好处是网络安全保密性高. ...
- Python爬取抖音视频
最近在研究Python爬虫,顺便爬了一下抖音上的视频,找到了哥们喜欢的小姐姐居多,咱们给他爬下来吧. 最终爬取结果 好了废话补多说了,上代码! #https://www.iesdouyin.com/a ...
- Laravel请求/Cookies/文件上传
一.HTTP请求 1.基本示例:通过依赖注入获取当前 HTTP 请求实例,应该在控制器的构造函数或方法中对Illuminate\Http\Request 类进行类型提示,当前请求实例会被服务容器自动注 ...
- 创建你的第一个ionic+cordova应用(1)
前面我们安装了前端的神器webstorm11,体验到了强大的开发体验,接着我们来安装ionic 必备: Node.js (npm安装工具) 百度下载 官网下载 注:如果官网新版不能安装请用百度下载0 ...
- UltraISO 9.6.5.3237
注册信息: 用户名:Guanjiu 注册码:A06C-83A7-701D-6CFC
- 最简单的基于FFmpeg的移动端样例附件:Android 自带播放器
===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...
- 文件——文件指针——文件练习(随机产生N个手机号)——自动关文件
python 2 3file() #python 2读模式 写模式 追加模式 只要沾上了r,文件不存的就会报错读模式 r 读写模式 r+(可以写)1.不能写2.文件不存在报错f=open('123', ...
- oc 经常用到弹出view的方法
#pragma mark 弹出view -(void)exChangeOut:(UIView *)changeOutView dur:(CFTimeInterval)dur { CAKeyframeA ...