//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. Java面试题和解答(三)

    1.这段代码大多数情况下运行正常,但是某些情况下会出问题.什么时候会出现什么问题?如何修正? public class MyStack { private List<String> lis ...

  2. 部署的docker image总是太大,怎么办?

    sudo docker images REPOSITORY                        TAG                 IMAGE ID            CREATED ...

  3. py001

       pip install requests -i https://pypi.tuna.tsinghua.edu.cn/simple -------------------------------- ...

  4. Install Sudo for Debian

    $ su $ apt-get install sudo $ vim /etc/sudoers 1 2 3 在文本中添加: "username" ALL=(ALL) ALL 1 保存 ...

  5. Json数据产生树形结构

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  6. git冲突管理

    Diff 查看工作区(working directory)和暂存区(staged)之间差异:git diff 查看工作区(working directory)与当前仓库版本(repository)HE ...

  7. linux下如何查看某软件是否已安装

      因为linux安装软件的方式比较多,所以没有一个通用的办法能查到某些软件是否安装了.总结起来就是这样几类: 1.rpm包安装的,可以用rpm -qa看到,如果要查找某软件包是否安装,用 rpm - ...

  8. 2018.5.15Html标签初学

    body标签 -图标:&nbsp:(一个空格)&gt:(表示>)&lt:(表示<) -p标签:段落的划分 -br标签:换行 标签分为块级标签和行内标签. 块级标签: ...

  9. 问题 1672: 迷宫问题 (BFS)

    题目链接:https://www.dotcpp.com/oj/problem1672.html 问题 1672: 迷宫问题 时间限制: 1Sec 内存限制: 32MB 提交: 663 解决: 158 ...

  10. MyRedis

    目录 其他 其他 Redis面试题集