//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. python tkinter Text

    """小白随笔,大佬勿喷""" '''tkinter —— text''' '''可选参数有: background(bg) 文本框背景色: ...

  2. keras笔记

    函数式模型 函数式模型算是本文档比较原创的词汇了,所以这里要说一下 在Keras 0.x中,模型其实有两种,一种叫Sequential,称为序贯模型,也就是单输入单输出,一条路通到底,层与层之间只有相 ...

  3. MongoDB系列----备份与导入导出

    参考: http://my.oschina.net/xiaomaoandhong/blog/63471,<> 1.停掉服务器 然后备份 Mongodb将所有数据都存放在"数据目录 ...

  4. 控制反转IOC

    IOC-Inversion of Control 控制反转,这是spring的核心.对于spring框架来说,就是由spring来负责控制对象的生命周期和对象间的关系. 1:控制反转不是一种技术,而是 ...

  5. Oracle中对XMLType的简单操作(extract、extractvalue...)

    Oracle中对XMLType的简单操作(extract.extractvalue...)    1.下面先创建一个名未test.xml的配置文件. <?xml version="1. ...

  6. jenkins+Gitlab+maven+tomcat实现自动集成、打包、部署

    一.前言 首先出于提高自己技术水平和琢磨能做点什么能提高工作效率,上线工作实在无聊.重复(手动编译.打包,传包,重启),于是就想到了jenkins,jenkins持续集成已经不是什么新鲜的话题,网上文 ...

  7. Android -- Glide框架详解(一)

    1,使用这个框架快两年了,今天去github上去看了一下,貌似已经从3.X升级到4.X了,想着自己还没有对这个框架在博客上做过总结,所以这里打算出三篇博客来介绍,内容有基本使用.3.X与4.X的不通. ...

  8. [Chrome] chrome 自动跳转到https

    关键字眼: - static_upgrade_mode: FORCE_HTTPS - You cannot visit www.xxx.dev right now because the websit ...

  9. (转)Oracle EBS 有效银行账户取值 银行科目

    SELECT ba.bank_account_id, --银行账户key ftv.territory_short_name, --国家 ftv.territory_code, --国家简称 cb.ba ...

  10. 《ASP.NET Core In Action》读书笔记系列一 ASP.NET Core 的诞生

    最近打算系统学习一下asp.net  core ,苦于没有好的中文书藉,只好找来一本英文的 <ASP.NET Core In Action>学习.我和多数人一样,学习英文会明显慢于中文.希 ...