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都是白色的呢