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的感受

我感受如今知識仍是要不斷地學習

只有在不斷的掙扎事後纔會學到東西

而後就不用有求與別人

真的

我一直在往這個目標前進

第3、同時壓縮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都是白色的呢