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.task(name,fn);这个是定义任务，第一个是任务名，第二个是任务内容；执行这个任务的时候就  gulp name;that's all

gulp.src(file.path):选择文件，传入参数是文件路径

gulp.dest(path):你选择的输出的文件放在哪个文件夹里面

gulp.pipe()：pipe啦 管道的意思呀，我看网上是说把pipe理解为就是把操作加入执行队列里面的意思

 

 

但是在这里我还有个问题，哈哈 有疑问哈 各位小伙伴看到的话 可以私信我或者留言啊

第一个疑问：就是我压缩的文件嘛 都是还是js，为什么jQuery那些压缩的js都是白色的呢 

 

 

更多专业前端知识，请上 【猿2048】www.mk2048.com