glup简单应用---gulpfile.js
//npm install gulp -g (global环境)
//npm install gulp --save-dev (项目环境)
//在项目中install需要的gulp插件,一般只压缩的话需要
//npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev
//以下require需要的module
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
minifyhtml = require('gulp-minify-html'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
del = require('del');
//压缩JS
gulp.task('minify', function() {
gulp.src('./src/js/*.js')
.pipe(concat('main.js')) //合并所有js到main.js
.pipe(rename({
suffix: '.min'
})) //rename压缩后的文件名 让main.js变成main.min.js
.pipe(uglify()) //执行压缩
.pipe(gulp.dest('./build/js'))
});
//压缩CSS
gulp.task('minifycss', function() {
return gulp.src('./src/css/*.css') //压缩的文件
.pipe(minifycss())
.pipe(gulp.dest('./build/css')); //输出文件夹
});
//压缩HTML
gulp.task('minifyhtml', function() {
gulp.src('./src/html/*.html') // 要压缩的html文件
.pipe(minifyhtml()) //压缩
.pipe(gulp.dest('./build/html'));
});
//执行压缩前,先删除文件夹里的内容
//执行删除的时候不要把目录定在build的子目录中,windows删除目录的同时会报错
gulp.task('clean', function(cb) {
del(['build/css', 'build/js'], cb)
});
//在任务数组中放上面要执行的任务
gulp.task('default', ['clean', 'minify', 'minifycss', 'minifyhtml']);
glup简单应用---gulpfile.js的更多相关文章
- 简单的gulpfile.js参数配置
这里gulp安装和模块安装我就不提了,先简单写一些配置函数 for example /** * Created by yumeiqiang on 16/7/26. */var gulp = requi ...
- 编写gulpfile.js文件:压缩合并css、js
使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm inst ...
- 通过Anuglar Material串串学客户端开发 - javascript编译和gulpfile.js
Angular Material不仅仅有本身框架的源代码,还有在这个框架上实现的一个应用docs.更为强大的是,这个应用是真正的产品网站:就是它的官网.我有理由相信,这个网站是从源代码直接发布的,从网 ...
- gulp 之一 安装及简单CSS,JS文件合并压缩
最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改 ...
- LayaAir引擎开发HTML5最简单教程(面向JS开发者)
LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结 一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦 切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...
- gulp的使用(二)之gulpfile.js文件的配置
Gulpfile.js是什么文件: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她, ...
- gulpfile.js不断更新中...
Gulp压缩合并js/css文件,压缩图片,以及热更新教程 var gulp = require('gulp');var concat = require('gulp-concat');//- 多个文 ...
- gulp-load-task 解决 gulpfile.js 过大的问题
当我们在项目中使用gulp来实现前端自动化时,常常因任务太多导致gulpfile.js越来越臃肿,增加后期维护/变更成本.在计算机科学领域中,分治可以将我们的项目变得井然有序.所以,我们利用这个理念, ...
- 极其简单的用JS在浏览器中创建下载文件的方法
有这样一个需求,在js中动态创建一个页面,然后下载该页面为word文档,研究了一上午,最后发现实现起来如此简单. 在js中创建如下方法:(直接复制即可) function downloadFile(f ...
随机推荐
- [Android]使用Spring for Android改善数据交互流程
如果开发一个和服务端有数据交互android应用,流程通常是这样的:界面收集用户数据之后,将它转换成JSON或者XML格式的字符串,以HTTP的方式提交给服务端,获得返回的文本数据,再将数据解析为ja ...
- fastjson JSONObject遍历
private static String getDesc(String jsonStr, String key) { JSONObject jsonObject = JSONObject.parse ...
- PHP----------PHP自身的性能优化注意事项
1.如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍. 2.$row[’id’] 的速度是$row[id]的7倍. 3.echo 比 print 快,并且使用ech ...
- 客户端不能连接MySQL - 2003-Can't connect to MySQL server on '192.168.43.180'(10060 "Unknown error")
客户端不能连接MySQL 场景: 数据库(此处以MySQL为例)安装在虚拟机里面,在宿主机上进行连接数据库的时候始终不能连接,但在虚拟机中使用正常. 针对上面的场景: 1. 在虚拟机里面可以正常使用M ...
- 依据ECMA规范,手写一个bind函数
Function.prototype.bind 函数,参见ECMA规范地址 如题,这次来实现一个boundFunction函数,不挂载在Function.prototype上,而是一个单独声明的函数. ...
- Qt如何在QTabWidget上绘图
Qt绘图事件必须在paintEvent事件下绘图,这样导致我们在向Qt设计师界面上拖拽的控件绘图时,造成了很大的麻烦. 我们不能在拖拽的控件上写paintEvent函数,但是可以自定义一个类,继承某一 ...
- 从拥抱开源到回馈开源,灵雀云助力CNCF中国区培训业务
6月27日,全球首屈一指的开源盛会 2018 LinuxCon + ContainerCon + CloudOpen China (LC3)在中国北京国家会议中心落下帷幕.二度落地中国的LC3大会热度 ...
- 【论文速读】Lianwen_Jin_CVPR2017_Deep_Matching_Prior_Network_Toward_Tighter_Multi-oriented_Text_Detection
Lianwen_Jin_CVPR2017_Deep_Matching_Prior_Network_Toward_Tighter_Multi-oriented_Text_Detection 作者 关键词 ...
- intellij idea 官方帮助文档翻译(前言)
对于java程序员来说,intellj idea这个编辑器,应该很多人都听说过,但用的人似乎并不是很多. 这也没办法,毕竟现在网上的教程,培训班授课,大多还是以eclipse为主. eclipse固然 ...
- jQuery常见用法
jQuery有好多版本本,无法同时引用两个不同的版本,容易造成混乱,用哪一个,调用哪一个.\ jQuery引用到<head></head>中,页面加载时就需要特效调用这些方法. ...