gulp压缩css文件跟js文件
越到最后啊
就越发现,真的很理解那句话
就是自己多学一点一点知识,就少一句问别人的东西
这是多么痛苦的领悟
今天需要压缩css跟js文件
然后不懂啊 就问别人啊 就问啊问啊
然后再上网了解啊了解啊
用gulp gulp是基于Node.js的前端构建工具
恩 确实是个好东西哦
那进入正题前先说说gulp是个啥东西吧,其实一开始我也不是很懂
百度呀
网上说是自动化工具
其实自动化工具说白了我也不是很懂 我感觉我看很抽象的概念的时候 加上自己没有那个具体的概念 就很难弄懂
有知道的小伙伴麻烦留言呀 留言呀 留言呀 重要的事说三遍哈
一先说压缩js文件吧
首先 在你的项目根目录建一个gulpfile.js文件
然后在你的js文件里面配置
先上我的项目目录吧

恩 就是这个gulpfile.js
然后在里面配置
首先要检查你的gulp有没有安装 你的uglify模块有没有安装,这个自行百度哈
然后js配置文件代码如下
var gulp = require('gulp'),
uglify = require('gulp-uglify');
gulp.task('script', function() {
return gulp.src('dist/js/*.js') //压缩的文件
.pipe(uglify())
.pipe(gulp.dest('dist/js')) //输出文件夹
});
嗯啊
看到没有
就是这么简单
最后就是要提醒你们那个路径最好都别弄错了
很重要!!!!!因为这是我踩的坑
二然后就是压缩css了
然后压缩css需要的是gulp-minify-css模块
没有的话就gulp install gulp-minify-css
so easy
哈哈 开玩笑的啦
然后就是也是在gulpfile里面配置了
var gulp = require('gulp'),
minify=require('gulp-minify-css');
gulp.task('script', function() {
return gulp.src('dist/css/*.css') //压缩的文件
.pipe(minify())
.pipe(gulp.dest('dist/min/')) //输出文件夹
});
也是这样
有没有很easy的感觉
我感觉现在知识还是要不断地学习
只有在不断的挣扎过后才会学到东西
然后就不用有求与别人
真的
我一直在往这个目标前进
第三、同时压缩css跟js文件
var gulp = require('gulp'),
minify=require('gulp-minify-css'),
uglify=require('gulp-uglify');
gulp.task('script', function() {
return gulp.src('dist/css/*.css') //压缩的文件
.pipe(minify())
.pipe(gulp.dest('dist/min/')) //输出文件夹
});
gulp.task('minifyjs',function(){
return gulp.src('dist/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/min/'))
});
这样就可以同时压缩css跟js文件了
恩,知识在不断的积累 你就在不断的进步 继续加油吧
gulp压缩css文件跟js文件的更多相关文章
- css文件和js文件后面带一个问号
经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...
- css文件和js文件后面带一个问号----2015-1103
经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...
- 使用 gulp 压缩 CSS
请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 ...
- gulp压缩css
gulp压缩css,选用的依赖是gulp-clean-css,在压缩大型项目时还对用到一个dom流压缩文件选取的依赖gulp-dom-src 依赖安装:npm i gulp-clean-css 依赖安 ...
- gulp压缩css和js
压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下.一. ...
- div滚动条弹出层效果 (所需要的css文件和js文件,都已经上传到文件里面了progressbar.rar)
<%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...
- js动态加载css文件和js文件的方法
今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...
- ASP.NET动态引用样式表(css)和脚本(js)文件
// 引入js文件 HtmlGenericControl scriptControl = new HtmlGenericControl("script"); scriptContr ...
- 关于HTML文件、JS文件、CSS文件
把JS和CSS脚本写在html里和写在独立文件里有什么区别? 1. 都写在html里是性能最优的方案. 2. 都写在html里是可维护性最差的方案. 3. 分开写在js.css.html是可维护性最有 ...
随机推荐
- [Linux]Linux下安装和配置solr/tomcat/IK分词器 详细实例一.
在这里一下讲解着三个的安装和配置, 是因为solr需要使用tomcat和IK分词器, 这里会通过图文教程的形式来详解它们的安装和使用.注: 本文属于原创文章, 如若转载,请注明出处, 谢谢.关于设置I ...
- Linux下安装Java环境配置步骤详述
0.下载jdk8 登录网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html选择对 ...
- JS数组定义及详解
1.什么是数组 数组就是一组数据的集合 其表现形式就是内存中的一段连续的内存地址 数组名称其实就是连续内存地址的首地址 2.关于js中的数组特点 数组定义时无需指定数据类型 数组定义时可以无需指定数组 ...
- Angularjs1培训
Angularjs1培训: angularjs解决什么问题? 从无穷无尽的DOM操作中解放出来,专注于业务逻辑,DOM操作不叫业务逻辑,那是试图呈现. 组件化,模块化为构建大型项目铺平道路,模块发开发 ...
- Android开发-之环境的搭建
关于Android开发可以使用的工具有eclipse和Android studio等,这两个工具都各有各的好处和不足.studio是谷歌推出的一款开发工具,而我们都知道Android就是谷歌公司的,所 ...
- Oracel_子查询
SQL子查询 子查询语法 SELECT select_list FROM table WHERE expr operator (SELECT select_list FROM table) 子查询 ( ...
- npm上传自己的项目
npm安装就不介绍了,自行度娘.本文介绍npm上传 先初始化:npm init 根据提示填完系统介绍信息(package.json): 再登录npmjs: npm login 效果如图: 输入注册的用 ...
- 网络通信简单实例BIO,NIO,AIO
这里,我将做一个简单的通信程序,分别使用三种原始的通信工具:BIO,NIO,AIO. 功能就是一个服务器,一个客户端.服务器就是处理请求,返回响应.而客户端就是连接服务器,发送请求,接收响应. 第一步 ...
- geotrellis使用(四)geotrellis数据处理部分细节
前面写了几篇博客介绍了Geotrellis的简单使用,具体链接在文后,今天我主要介绍一下Geotrellis在数据处理的过程中需要注意的细节,或者一些简单的经验技巧以供参考. 一.直接操作本地Geot ...
- 如何添加并设置远程桌面(RD)授权服务器
上一篇日志中介绍了如何将现成的远程桌面授权服务器添加到对应的远程桌面回话主机中. 本篇日志将引导您如何添加配置相应的远程桌面授权服务器,这样就可以根据所购买的授权类型和授权级别添加需要甚至" ...