gulp压缩css文件跟js文件

2016-12-16 14:43 改吧阅读(2273) 评论(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文件了

恩，知识在不断的积累你就在不断的进步继续加油吧