//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的更多相关文章

  1. 简单的gulpfile.js参数配置

    这里gulp安装和模块安装我就不提了,先简单写一些配置函数 for example /** * Created by yumeiqiang on 16/7/26. */var gulp = requi ...

  2. 编写gulpfile.js文件:压缩合并css、js

    使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm inst ...

  3. 通过Anuglar Material串串学客户端开发 - javascript编译和gulpfile.js

    Angular Material不仅仅有本身框架的源代码,还有在这个框架上实现的一个应用docs.更为强大的是,这个应用是真正的产品网站:就是它的官网.我有理由相信,这个网站是从源代码直接发布的,从网 ...

  4. gulp 之一 安装及简单CSS,JS文件合并压缩

    最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改 ...

  5. LayaAir引擎开发HTML5最简单教程(面向JS开发者)

    LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结 一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦 切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...

  6. gulp的使用(二)之gulpfile.js文件的配置

    Gulpfile.js是什么文件: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她, ...

  7. gulpfile.js不断更新中...

    Gulp压缩合并js/css文件,压缩图片,以及热更新教程 var gulp = require('gulp');var concat = require('gulp-concat');//- 多个文 ...

  8. gulp-load-task 解决 gulpfile.js 过大的问题

    当我们在项目中使用gulp来实现前端自动化时,常常因任务太多导致gulpfile.js越来越臃肿,增加后期维护/变更成本.在计算机科学领域中,分治可以将我们的项目变得井然有序.所以,我们利用这个理念, ...

  9. 极其简单的用JS在浏览器中创建下载文件的方法

    有这样一个需求,在js中动态创建一个页面,然后下载该页面为word文档,研究了一上午,最后发现实现起来如此简单. 在js中创建如下方法:(直接复制即可) function downloadFile(f ...

随机推荐

  1. Vue框架创建项目常遇到问题

    利用npm安装cnpm时出现的错误 npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least ...

  2. Spring Batch(三) Job Launcher、ItemReader、ItemProcessor、ItemWriter各个实现类和用途

    内容来自<Spring Batch 批处理框架>,作者:刘相. 1.JobLauncher JobLauncher(作业调度器)是SpringBatch框架提供的运行Job的能力.用过给定 ...

  3. Nginx与PHP-FPM运行原理详解

    目录 1. 代理与反向代理 1. 正向代理:访问google.com 2. 反向代理:通过反向代理实现负载均衡 2. 初识Nginx与PHP-FPM 1. Nginx是什么 2. CGI与FastCG ...

  4. windows 下面make的使用示例

    ---恢复内容开始--- 前面已经安装了windows下面的编译器g++和mingw32-make,下面就make做个示例说明 1.文档结构 |--src       |--comm          ...

  5. java mysql连接时出现的问题

    当出现Caused by: java.sql.SQLException: Unknown system variable ‘tx_isolation’ 一般是mysql-connector-java的 ...

  6. weixin://connectToFreeWifi/协议如何跳转到微信客户端打开在wifi指定任意网页?

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. IOT

    文档地址:http://www.owasp.org.cn/owasp-project/owasp-things?searchterm=iot 今天面试,面试官问到iot

  8. openFileDialog的Filter属性设置

    OpenFileDialog对话框的Filter属性说明: 首先说明一个示例,分析一下Filter属性的构成:“ Excel文件|*.xls ”,前面的“Excel文件”成为标签,是一个可读的字符串, ...

  9. git远程管理

  10. window xshell 连接本地ubuntu虚拟机

    先设置VMware 虚拟机的连接属性 1.桥接,利用真实网卡  设置和window 同一个网段就可以直接通信 2.hostnoly是通过vm8(查看你的所有网络连接) 只能和主机联系 设置和vm8同一 ...