3步学会用gulp
1.安装gulp
安装gulp到全局:npm install -g gulp
安装gulp到某个项目:npm install --save gulp 注意:请先安装nodejs(自带npm)
2.创建gulpfile.js
//在你的项目根目录下创建gulpfile.js,代码如下: // 引入 gulp
var gulp = require('gulp'); // 引入组件
var htmlmin = require('gulp-htmlmin'), //html压缩
imagemin = require('gulp-imagemin'),//图片压缩
pngcrush = require('imagemin-pngcrush'),
minifycss = require('gulp-minify-css'),//css压缩
jshint = require('gulp-jshint'),//js检测
uglify = require('gulp-uglify'),//js压缩
concat = require('gulp-concat'),//文件合并
rename = require('gulp-rename'),//文件更名
notify = require('gulp-notify');//提示信息 // 压缩html
gulp.task('html', function() {
return gulp.src('src/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('./dest'))
.pipe(notify({ message: 'html task ok' })); }); // 压缩图片
gulp.task('img', function() {
return gulp.src('src/images/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest('./dest/images/'))
.pipe(notify({ message: 'img task ok' }));
}); // 合并、压缩、重命名css
gulp.task('css', function() {
return gulp.src('src/css/*.css')
.pipe(concat('main.css'))
.pipe(gulp.dest('dest/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dest/css'))
.pipe(notify({ message: 'css task ok' }));
}); // 检查js
gulp.task('lint', function() {
return gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(notify({ message: 'lint task ok' }));
}); // 合并、压缩js文件
gulp.task('js', function() {
return gulp.src('src/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dest/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dest/js'))
.pipe(notify({ message: 'js task ok' }));
}); // 默认任务
gulp.task('default', function(){
gulp.run('img', 'css', 'lint', 'js', 'html'); // 监听html文件变化
gulp.watch('src/*.html', function(){
gulp.run('html');
}); // Watch .css files
gulp.watch('src/css/*.css', ['css']); // Watch .js files
gulp.watch('src/js/*.js', ['lint', 'js']); // Watch image files
gulp.watch('src/images/*', ['img']);
});
3.安装依赖
//如上gulpfile.js安装依赖如下,cd切换到你的项目下然后:
npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify --save-dev
恭喜你,你已经学会使用gulp了,例如:执行默认任务: gulp, 合并压缩css: gulp css
gulp插件:http://gulpjs.com/plugins/
3步学会用gulp的更多相关文章
- Java基础:三步学会Java Socket编程
Java基础:三步学会Java Socket编程 http://tech.163.com 2006-04-10 09:17:18 来源: java-cn 网友评论11 条 论坛 第一步 ...
- tortoisegit 7步 学会git分支
tortoisegit 7步 学会git分支 做自己的产品,分支还是很重要的.例如,我发布了一个app,但是有bug,又想做新功能,怎么办呢?如果只在一个git上开发的话,bug会越来越多,原来bug ...
- ios 一步一步学会自定义地图吹出框(CalloutView)-->(百度地图,高德地图,google地图)
前言 在 ios上边使用地图库的同学肯定遇到过这样的问题:吹出框只能设置title和subtitle和左右的view,不管是百度地图还是高德地图还是自带的 google地图,只提供了这四个属性,如果想 ...
- [亲测]七步学会ASP.NET Core 2.0怎么发布/部署到Ubuntu Linux服务器并配置Nginx反向代理实现域名访问
前言 ASP.NET Core 2.0 怎么发布到Ubuntu服务器?又如何在服务器上配置使用ASP.NET Core网站绑定到指定的域名,让外网用户可以访问呢? 步骤 第1步:准备工作 一台Liun ...
- Andriod三步学会安卓自己定义视图及其属性
第一步:自己定义属性 第二步:自己定义控件解析属性 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm5adW9adW8=/font/5a6L5L2T/fo ...
- IOS-7步学会用代理
代理:又叫委托 自己不能去办的事委托给别人去办 之前学过的 UIAlertView UITextField都是使用了代理 反向传值代理 代理Block 写代理的步骤 需要帮忙的人(请求帮代饭的人) 1 ...
- 八步学会数据迁移:ETL工具kettle使用方法
一.目的 将不同服务器上的表合并到另外一个服务器上.例如:将服务器1上的表A和服务器2上的表B,合并到服务器3上的表C 要求:表A需要被裁剪(去掉不必要的字段).表B需要增加一些字段 二.使用方法 ( ...
- 教你一步学会安装Hue
一.简介 hue是一个开源的apache hadoop ui系统,由cloudear desktop演化而来,最后cloudera公司将其贡献给了apache基金会的hadoop社区,它基于pytho ...
- 三步学会用spring开发OSGI——(第一步:环境篇)
Spring-DM是什么 Spring-DM 指的是Spring Dynamic Modules. dm Server 是一个完全模块化部署的,基于OSGi的Java服务器,为运行企业Java应用和S ...
随机推荐
- ioctl函数,可以获取ip地址,修改ip地址,网卡地址等
部分转自http://www.cnblogs.com/zht-blog/p/4025903.html #include <sys/types.h>#include <sys/sock ...
- 不要if else的编程
http://news.cnblogs.com/n/194216/ 英文原文:Unconditional Programming ] 本文作者介绍 Michael Feathers Michael F ...
- New ipad安装Perl支持安装nikto
Title:New ipad安装Perl支持安装nikto --2012-11-15 09:47 New Ipad 越了后. ssh new ipad 进入目录 cd /tmp 下载Key文件 wge ...
- Android系统的进程分类
1.前台进程:即当前正在前台运行的进程,说明用户当前正在与通过该进程与系统进行交互,所以该进程为最重要的进程,除非系统的内容已经到不堪重负的情况,否则系统是不会将改进程终止的.2.可见进程:一般还是显 ...
- 【HDOJ】1513 Palindrome
DP,MLE后改为滚动数组AC. #include <cstdio> #include <cstring> #include <cstdlib> #define M ...
- Sublime Text2不自动打开最近的项目
1.首选项 2.设置默认 "hot_exit": false, "remember_open_files": false, 这两个值改成false就可以了
- AES的S-BOX构造
利用GF(2^8)乘法逆元,以及矩阵运算,可以构造出AES的SBOX. 求乘法逆元的一般方法是利用扩展欧几里得定理,在这里我取了个巧. 因为我已经有了GF的指数表(见上一篇文),利用指数表可以轻易地构 ...
- E - Redundant Paths - poj 3177(缩点求叶子节点)
题意:给一个图,想让每两个点之间都有两条路相连,不过特殊的是相同的两点之间多次相连被认为是一条边,现在求最少还需要添加几条边才能做到 分析:手欠没看清楚是相同的边只能相连一次,需要去重边,缩点后求出来 ...
- 微软在线测试题String reorder
问题描述: Time Limit: 10000msCase Time Limit: 1000msMemory Limit: 256MB DescriptionFor this question, yo ...
- [转]Android重力感应开发
http://blog.csdn.net/mad1989/article/details/20848181 一.手机中常用的传感器 在Android2.3 gingerbread系统中,google提 ...