详解常用的gulp命令
gulp.js是一款自动化构建工具,我们经常使用它在开发过程自动执行常见的任务。gulp.js 是基于 Node.js 构建的,利用 Node.js,可以快速构建项目。
由于gulp使用基于node,所以首先要安装node环境。node.js有很多非常强大的作用,本文主要应用其环境以及把它当成一款包管理器来使用
使用gulp来构建项目,其步骤为:
1.在目录中创建dist文件夹(要发布的代码)
src文件夹(开发代码)
2.在根目录下写命令行 初始化:npm init ,此时根目录会出现package.json
3.局部安装gulp
npm install gulp --save-dev
4.创建gulpfile.js文件 与dist和src同级
配置信息:
首先引入:
var gulp = require("gulp")
(1)若想把src中的图片压缩至dist中
首先需要引入:
var imgin = require("gulp-imagemin")
其中gulp-imagemin为图片压缩的gulp插件,在require之前,首先需要在命令中 npm install下来
其次创建gulp任务
gulp.task("copyimg",function(){ return
gulp.src("src/img/images/**/*").
pipe(imgin()).
pipe(gulp.dest("dist/images"));
})
其中copyimg为任务名,gulp.src()中为要操作的图片,pipe()中是要执行的,imgin是上面定义的压缩图片插件的名,gulp.dest()为要将图片移动到的文件夹
(2)若想把src的所有js文件合并成一个js文件且放入dist下
首先,先引入
var uglify = require("gulp-uglify");
var concat = reqiire("gulp-concat");
var rename = require("gulp-rename");
其中 gulp-uglify 用来压缩js ,gulp-concat 用来合并js,gulp-rename用来重命名.同理在require之前需要 npm install ....
其次,创建gulp任务
gulp.task("copyjs",function(){
return
gulp.src("/src/js/**/*").
pipe(concat("all.js")).
pipe(uglify()).
pipe(rename("all.min.js")).
pipe(gulp.dest("dist/js"))
})
这个任务意思就是把src/js/下的所有文件合并起来,叫all.js。再将all.js压缩,之后重命名为all.min.js,将此js放入dist/js/下
(3)若想将css文件压缩,新增一个hash值,放到dist文件下
var minifycss = require("gulp-minifycss");
var rev = require("gulp-rev")
其中gulp-minifycss 用来压缩css文件 ,gulp-rev用来给静态资源文件加上一个hash值,同理注意使用 npm install ...下载插件
gulp.task("copycss",function(){
return
gulp.src("src/css/**/*").
pipe(minifycss()).
pipe(rev()).
pipe(gulp.dest("dist/css")).
pipe(rev.manifest()).
pipe(gulp.dest("dist/css")); })
此任务将src/css里的所有文件压缩并生成hash后缀名。rev.manifest()是会生成一个json,里面存储的是文件原名和生成hash文件名的对应。最后将文件放到dist/css下
(4)若想html文件压缩并放入dist下
var htmlmin = require("gulp-htmlmin");
其中gulp-htmlmin用来压缩html文件
gulp.task("copyindex",function(){
return
gulp.src("src/client/**/*").
pipe(htmlmin({
removeComments:true,
collapseWhite:true,
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 })).pipe(gulp.dest("dist/client"))
})
此task用来压缩html页面,有很多选项可选择,如上注释
(5)若css文件用了gulp-rev。则html文件在使用时需要动态更改引入的css文件名
var revCollector = require("gulp-rev-collector");
gulp-rev-collector根据rev生成的json文件用来替换html 中的<link href=""/>
gulp.task("rev-collector",function(){
return
gulp.src(["dist/css/**/*.json","dist/client/*.html"]).
pipe(revcollector({replaceReved:true})).
pipe(gulp.dest("dist/client"));
})
其中设置replaceReved标识, 用来说明模板中已经被替换的文件是否还能再被替换,默认是false
(6)若想自动监听
gulp.task("watch",function(){
gulp.watch("src/index.html",["copyindex"]);
gulp.watch("src/images/**/*",["copyimg"])
})
此任务对src下的index.html的文件监听任务名为copyindex的任务,同时对src/images下的所有图片监听copyimg这个任务
(7)创建服务器
var connect = require('gulp-connect');
用来创建个服务器
gulp.task('connect',function(){
connect.server({
root:"dist",//根目录
port: 8080,//端口号
livereload:true
});
});
此task设置了服务的根目录,端口号,以及是否即时刷新
本文主要分享这些,一般为gulp常用的命令,需特别注意文中所有reqire进来的资源 都需要用npm install 插件名将插件下载下来
详解常用的gulp命令的更多相关文章
- (5)ps详解 (每周一个linux命令系列)
(5)ps详解 (每周一个linux命令系列) linux命令 ps详解 引言:今天的命令是用来看进程状态的ps命令 ps 我们先看man ps ps - report a snapshot of t ...
- (4)top详解 (每周一个linux命令系列)
(4)top详解 (每周一个linux命令系列) linux命令 top详解 引言:今天的命令是用来看cpu信息的top top 我们先看man top top - display Linux pro ...
- (2)free详解 (每周一个linux命令系列)
(2)free详解 (每周一个linux命令系列) linux命令 free详解 引言:今天的命令是用来看内存的free free 换一个套路,我们先看man free中对free的描述: Displ ...
- (3)lscpu详解 (每周一个linux命令系列)
(3)lscpu详解 (每周一个linux命令系列) linux命令 lscpu详解 引言:今天的命令是用来看cpu信息的lscpu lscpu 我们先看man lscpu display infor ...
- String 字符串详解 / 常用API
String 详解 / 常用API 简介 String 是不可改变的字符串序列.String 为字符串常量 StringBuilder 与StringBuffer 均为可改变的字符串序列.为字符串变量 ...
- Linux下ps命令详解 Linux下ps命令的详细使用方法
http://www.jb51.net/LINUXjishu/56578.html Linux下的ps命令比较常用 Linux下ps命令详解Linux上进程有5种状态:1. 运行(正在运行或在运行队列 ...
- ping命令技巧详解 windows下ping命令知识大全
windows ping命令对于多数电脑爱好者都不会陌生,通过ping ip可以知道网络是否畅通或者网络传输质量如何等,是网络技术人员常用的检测网络命令,多数朋友对ping命令知道的并不多,接下来本文 ...
- 企业sudo权限规划详解 (实测一个堆命令搞定)
简述问题: 随着公司的服务器越来越多,人员流动性也开始与日俱增,以往管理服务器的陈旧思想应当摒弃,公司需要有 更好更完善的权限体系,经过多轮沟通和协商,公司一致决定重新整理规划权限体系 ...
- 详解如何使用gulp实现项目在浏览器中的自动刷新
情况描述: 我们很容易遇到这样一种情况: 我们并不是一开始就规划好了整个项目,比如可能接手别人的项目或者工程已经手动创建好了,现在要想利用gulp来实现浏览器自动刷新,那么如何做呢? 其实非常简单,本 ...
随机推荐
- maven新建的项目,不自动引入依赖包
1.检查repository的目录是不是纯英文. 2.重新下载一次repository. 如果解决了问题,那么原因就是前面在加载repository的时候,因为断网导致了下载的包有误,无法被ecl ...
- node.js爬虫爬取拉勾网职位信息
简介 用node.js写了一个简单的小爬虫,用来爬取拉勾网上的招聘信息,共爬取了北京.上海.广州.深圳.杭州.西安.成都7个城市的数据,分别以前端.PHP.java.c++.python.Androi ...
- node删除当前文件底下全部文件的正确姿势
今天在项目上犯了一个很愚蠢的错误 执行如下,结果删除掉了项目根目录底下的所有配置文件,导致本地虚拟机挂掉,这次多一个/的给我教训真是莫大的...哎 正确的姿势为:
- iOS PureLayout使用
PureLayout是iOS Auto Layout的终端API,强大而简单.由UIView.NSArray和NSLayoutConstraint类别组成.PureLayout为大多数Auto Lay ...
- ES4:ElasticSearch 使用C#添加和更新文档
这是ElasticSearch 2.4 版本系列的第四篇: 第一篇:ES1:Windows下安装ElasticSearch 第二篇:ES2:ElasticSearch 集群配置 第三篇:ES3:Ela ...
- 清理浏览器网站缓存的几种方法(meta,form表单,ajax)
1.meta方法 HTML header中加入 <meta http-equiv="pragma" content="no-cache"> 说明 ...
- ASP.NET MVC 创建控制器类过程
MvcHandler.ProcessRequestInit()方法: 1.1获取控制器的名称string requiredString = this.RequestContext.RouteData. ...
- Kruskal算法的实现
#include "stdio.h" #include "stdlib.h" struct edge { int m; int n; int d; }a[]; ...
- The 15th UESTC Programming Contest Preliminary G - GC?(X,Y) cdoj1564
地址:http://acm.uestc.edu.cn/#/problem/show/1564 题目: G - GC?(X,Y) Time Limit: 3000/1000MS (Java/Others ...
- RecyclerView中装饰者模式应用
近段时间一直在加班,在赶一个项目,现在项目接近尾声,那么需要对过去一段时间工作内容进行复盘,总结下比较好的解决方案,积累一些经验,我认为的学习方式,是「理论-实践-总结-分享」,这一种很好的沉淀方式. ...