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 ...
随机推荐
- 全志A33驱动GT911触摸屏
0x00 环境说明: 所使用的开发板为锐尔威视的插针版A33_Vstar 触摸屏驱动IC为GT911 接线参照开发板的TP线路 0x01 修改系统配置文件: 笔者所使用的A33开发板的系统配置文件路径 ...
- (.NET高级课程笔记)委托、事件总结
1.委托的声明.实例化和调用 同样的,也可以把事务写成上面的形式 2.泛型委托---Func.Action 3.委托的意义:解耦 4.委托的意义:异步多线程 5.委托的意义:多播委托 6.观察者模 ...
- 【Linux】Jenkins安装(二)
Jenkins介绍 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括: 1.持续的软件版本发布/测试项目. 2.监控外部调用执行的工作. 安装环境 操作系统:lin ...
- sublime快捷方式
- ls file less
ls-a 列出所有文件,包含隐藏文件-l 以长格式显示结果-F 在所列出的文件后面显示其格式-r 按照文件名降序展示-t 按照时间列出-S 按照文件大小排序 file 文件名:展示文件的类型简单描述 ...
- 不平衡数据下的机器学习方法简介 imbalanced time series classification
imbalanced time series classification http://www.vipzhuanli.com/pat/books/201510229367.5/2.html?page ...
- 文本框defalutValue的使用
以下页面中的文本框的值无论怎么改变,点击“原始值”按钮始终会得到初始页面的时候的值,即“ffffffffffffff” <!DOCTYPE html> <html> <h ...
- Jmeter二次开发
Jmater函数扩展的步骤1. 导入Jmeter源码,或使用maven项目,引入依赖的jar包 2. 继承AbstractFunction,实现自定义Function 3. 继承JMeterTestC ...
- Docker 构建 RabbitMQ 集群
刚开始,关于RabbitMQ集群的搭建,我找到了这篇文章:Docker 安装 RabbitMQ 集群 从而找到了第三方的RabbitMQ集群容器 rabbitmq-server 但是这个容器只有3.6 ...
- Javascript在使用import 与export 区别及使用
一.import与export的用法 1.import的几种用法 import defautName from 'modules.js'; import { export } from 'module ...