gulp 压缩文件2 摘
一下代码用来简单的压缩 .js 和 .css ; 在cmd里执行 gulp minifycss minifyjs,各task执行是正常的。
注意,先安装后相应的模块,建议安装到本地。
说明: 输出到文件为 minified/js minified/css ;
这里面就return 的地方为同步;
在执行的时候代码不能一下执行完,求解。?????????
//在项目的根目录新建gulpfile.js,require需要的module
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
del = require('del');
//压缩css
//加return后是同步的 后面同是
gulp.task('minifycss', function() {
return gulp.src('src/*.css') //压缩的文件
.pipe(gulp.dest('minified/css')) //输出文件夹
.pipe(minifycss()); //执行压缩
});
//压缩js
gulp.task('minifyjs', function() {
return gulp.src('src/*.js')
.pipe(concat('main.js')) //合并所有js到main.js
.pipe(gulp.dest('minified/js')) //输出main.js到文件夹
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest('minified/js')); //输出
});
//执行压缩前,先删除输出文件夹里的内容
gulp.task('clean', function(cb) {
del(['minified/css', 'minified/js'], cb)
});
//默认命令,在cmd中输入gulp后,执行的就是这个命令
gulp.task('default', ['clean'], function() {
gulp.start('minifycss', 'minifyjs');
});
gulp 压缩文件2 摘的更多相关文章
- 运用Gulp压缩文件编译文件。包括css js html image
安装node.js npm 以及安装gulp等方法我就不在这里赘述了. 接下里我主要介绍的是Gulpfile文件里面的配置该如何书写. var gulp = require('gulp');//引 ...
- gulp压缩文件最简示例
安装gulp-uglify 作为项目的开发依赖即可 $ npm gulp-uglify --save-dev 压缩js文件 gulpfile.js const gulp = require('gulp ...
- Gulp压缩前端CS,JS,图片文件
Gulp 基于Node.js的前端构建工具,Gulp有许多插件(这里是插件),使用Gulp可以实现前端代码的编译(sass.less).压缩.图片的压缩等,当然主要是前端工程化,不过我目前只是需要压缩 ...
- [转]gulp排除已压缩文件思路
文章转载至[gulp排除已压缩文件思路] gulp默认排除语法的弊端 有个时候我们需要时用gulp排除已经压缩过的js,css等.如果以压缩文件是以".min.js"之类命名规范的 ...
- gulp压缩html,css,js文件流程、监听任务、使用gulp创建服务器、同时运行多个任务、反向代理
一.初始化 首先先做一个项目初始化,用来记录你项目中用到的工具 再你项目文件下打开一个控制台,输入命令 yarn init -y 进行初始化 输入命令yarn add gulp -g --- 全局安 ...
- 摘:C#压缩文件
[[[[C#压缩文件]]]] 方法1: //[filepath想要压缩文件的地址] //[zippath输出压缩文件的地址] private void GetFileToZip(string file ...
- 《Gulp 入门指南》 : 使用 gulp 压缩 JS
<Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...
- gulp 压缩 js 和 css 代码
我们在写出来的代码都是非常规范的,改换行的时候就换行,改tab 的时候就有tab,还有这样做是为了后期维护方便,但是这也导致了内存占用量的增大,当把把代码发到线上,如果网速慢一点,可能很久都加载不出来 ...
- gulp压缩css和js
压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下.一. ...
随机推荐
- JAVA封装、继承、多态
封装 1.概念: 将类的某些信息隐藏在类的内部,不允许外部程序访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问. 2.好处: a.只能通过规定的方法访问数据 b.隐藏类的实例细节,方便修改和实 ...
- 记一次docker镜像导出导入流程
目标:导出测试环境的镜像到本地机器 过程: 测试机: docker save -o /Dockerfile/crontabService/php72.tar lnmp72:v1.4 压缩,要不文件太大 ...
- Golang最强大的访问控制框架casbin全解析
Golang最强大的访问控制框架casbin全解析 Casbin是一个强大的.高效的开源访问控制框架,其权限管理机制支持多种访问控制模型.目前这个框架的生态已经发展的越来越好了.提供了各种语言的类库, ...
- 7月17日刷题记录 分治Getting!循环比赛日程表
通过数:1 ┭┮﹏┭┮ qdoj.xyz 1053 分治-循环比赛日程表 其实今天晚上留给编程的时间并不多,做出一道... 不过收获还是非常大的 毕竟本人从来没有学习过分治算法,今天竟然攻克了我人生中 ...
- React躬行记(16)——React源码分析
React可大致分为三部分:Core.Reconciler和Renderer,在阅读源码之前,首先需要搭建测试环境,为了方便起见,本文直接采用了网友搭建好的环境,React版本是16.8.6,与最新版 ...
- Java入门 - 语言基础 - 12.Number和Math类
原文地址:http://www.work100.net/training/java-number-math.html 更多教程:光束云 - 免费课程 Number和Math类 序号 文内章节 视频 1 ...
- 异数OS TCP协议栈测试(一)--数据传输篇
异数OS TCP协议栈测试(一)--数据传输篇 本文来自异数OS社区 github: 异数OS-织梦师(消息中间件)群: 476260389 测试目标 数据传输IO性能测试,主要是建立连接后测试收 ...
- leetcode 全解(python版)
本着blabla的精神,在这里(可能会)给出leetcode的全部习题答案 --持续更新中... 1.给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整 ...
- 个人第4次作业——alpha项目测试
这个作业属于哪个课程 http://edu.cnblogs.com/campus/xnsy/GeographicInformationScience 这个作业的要求在哪里 https://www.cn ...
- os模块常用方法笔记
os模块是程序和系统文件之间的交互接口,可以实现对文件的创建.删除等功能,以下对os模块的功能做一个笔记,方便以后学习和查找. import os os.getcwd() #获取当前工作目录,即当前p ...