越到最后啊

就越发现,真的很理解那句话

就是自己多学一点一点知识,就少一句问别人的东西

这是多么痛苦的领悟

今天需要压缩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文件的更多相关文章

  1. css文件和js文件后面带一个问号

    经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...

  2. css文件和js文件后面带一个问号----2015-1103

    经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...

  3. 使用 gulp 压缩 CSS

    请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 ...

  4. gulp压缩css

    gulp压缩css,选用的依赖是gulp-clean-css,在压缩大型项目时还对用到一个dom流压缩文件选取的依赖gulp-dom-src 依赖安装:npm i gulp-clean-css 依赖安 ...

  5. gulp压缩css和js

    压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下.一. ...

  6. div滚动条弹出层效果 (所需要的css文件和js文件,都已经上传到文件里面了progressbar.rar)

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

  7. js动态加载css文件和js文件的方法

    今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...

  8. ASP.NET动态引用样式表(css)和脚本(js)文件

    // 引入js文件 HtmlGenericControl scriptControl = new HtmlGenericControl("script"); scriptContr ...

  9. 关于HTML文件、JS文件、CSS文件

    把JS和CSS脚本写在html里和写在独立文件里有什么区别? 1. 都写在html里是性能最优的方案. 2. 都写在html里是可维护性最差的方案. 3. 分开写在js.css.html是可维护性最有 ...

随机推荐

  1. WCF学习之旅—WCF第二个示例(六)

    第五步,创建数据服务 在“解决方案资源管理器”中,使用鼠标左键选中“SCF.WcfService”项目,然后在菜单栏上,依次选择“项目”.“添加新项”. 在“添加新项”对话框中,选择“Web”节点,然 ...

  2. sizzle分析记录:分解流程

    <form> <label>Name:</label> <input name="name" /> <fieldset> ...

  3. 前端学PHP之面向对象系列第一篇——类和对象

    × 目录 [1]类 [2]成员属性[3]成员方法[4]对象[5]成员访问[6]this 前面的话 面向对象程序设计(OOP)是一种计算机编程架构.计算机程序由单个能够起到子程序作用的单元或对象组成,为 ...

  4. IOS入门之Swift语言(一)

    经过不断的努力,小哥也买了台苹果设备,终于可以开始我的IOS之旅了,说来确实令人苦恼,为了学习IOS我这着贫农阶级,省了几个月的零花钱,外加向亲朋好友求救,最终痛下心扉,卖了台MAC pro128G版 ...

  5. AngularJs 动态加载模块和依赖

    最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...

  6. PHPStorm如何配置,phpstorm的mac配置文件目录

    PHPStorm的配置分为2大类:项目配置和IDE配置. 项目配置(设置),主要是配置具体项目.IDE 配置(设置),通用的设置会应用到所有的项目上. 项目配置每个项目的配置存储在项目所在目录的 .i ...

  7. 使用SPIRE.XLS来创建Excel 工作簿

               使用SPIRE.XLS来创建Excel 工作簿     概要 最近在研究 .NET 控件,使用这些控件在程序中可以快速低成本实现功能. 在这一篇中我们使用的控件是Spire.XL ...

  8. C++面向对象

    此博文仅作为C++考研专业课的复习内容. 面向对象 构造函数 在对象被创建的时候将自动调用. 复制构造函数 形参是本类对象的引用.其作用是使用一个已经存在的对象,去初始化一个同类的新对象. 复制构造函 ...

  9. 韩国"被申遗" (转自果壳)

    "被申遗"不是指"没申遗",而是全都经过了中国人重新包装. 近日,有报道称韩国计划将火炕申报世界遗产,联系近年来韩国多起"申遗事件",国内网 ...

  10. struts2学习笔记--拦截器(Interceptor)和登录权限验证Demo

    理解 Interceptor拦截器类似于我们学过的过滤器,是可以在action执行前后执行的代码.是我们做web开发是经常使用的技术,比如权限控制,日志.我们也可以把多个interceptor连在一起 ...