gulp压缩css文件跟js文件
2016-12-16 14:43 改吧 阅读(2291) 评论(5) 编辑 收藏 举报越到最后啊
就越发现,真的很理解那句话
就是自己多学一点一点知识,就少一句问别人的东西
这是多么痛苦的领悟
今天需要压缩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.task(name,fn);这个是定义任务,第一个是任务名,第二个是任务内容;执行这个任务的时候就 gulp name;that's all
gulp.src(file.path):选择文件,传入参数是文件路径
gulp.dest(path):你选择的输出的文件放在哪个文件夹里面
gulp.pipe():pipe啦 管道的意思呀,我看网上是说把pipe理解为就是把操作加入执行队列里面的意思
但是在这里我还有个问题,哈哈 有疑问哈 各位小伙伴看到的话 可以私信我或者留言啊
第一个疑问:就是我压缩的文件嘛 都是还是js,为什么jQuery那些压缩的js都是白色的呢