gulp實現靜態資源壓縮，打包，上傳總結

本文只是對gulp構建工具的一些常用功能的總結。

1.實現檔案（css，js，image）壓縮

2.實現檔案合併

3.版本控制

4.上傳七牛cdn

引用外掛程式如下：

var gulp = require('gulp'),

eslint = require('gulp-eslint'),
minify = require('gulp-minify-css'),//css壓縮
concat = require('gulp-concat'),//檔案合併
uglify = require('gulp-uglify'),//js壓縮
rename = require('gulp-rename'),//檔案重新命名
imagemin = require('gulp-imagemin'),//壓縮
clean = require('gulp-clean'),//清空資料夾
rev = require('gulp-rev'),//更改版本號
revcollector = require('gulp-rev-collector');//gulp-rev外掛程式，用於html模板更改引用路徑
-----------------------------------------
更新-------------------------------------
upload = require('gulp-qndn').upload,//七牛上傳
cdn = require('gulp-cdn-replace'),//替換cdn鏈結

1.檔案壓縮

css檔案壓縮：gulp-minify-css

js檔案壓縮：gulp-uglify

image檔案壓縮：gulp-imagemin

配置如下：

//壓縮css

gulp.task('minifycss', function
()))
.pipe(minify())
.pipe(concat('main.css'))
.pipe(gulp.dest('dist/css'));
});//壓縮js
gulp.task('minifyjs', function
());
//壓縮
gulp.task('minifyimg', function
());

gulp.dest()裡面是壓縮檔案存放位址

rename可以更改壓縮檔案的名字，根據需要進行設定

2.檔案合併

gulp.task('minifycss', function

());

3.版本

gulp.task('minifycss', function()))

.pipe(minify())
.pipe(concat('main.css'))
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('dist/css'));
});

.pipe(rev())會自動在原先檔名上新增隨機序號

4.自動上傳cdn（七牛）

var qnoptions =

以上傳壓縮合併後js檔案為例

gulp.task('minifyjs', function()))

.pipe(gulp.dest('dest/js'));
});

gulp管理靜態資源快取

前端專案在版本迭代的時候，難免會遇到靜態快取的問題，明明開發的是ok的,但是一部署到伺服器上，發現頁面變得亂七八糟，這是由於靜態快取引起的。從上面這張可以看出，瀏覽器載入css,js等資源時，size一欄是from cache,也就是直接使用了本地的資源，而沒有向伺服器請求。這樣做的好處是提公升頁面...

基於webpack 4靜態資源打包壓縮配置

1.實現靜態資源js css less的打包 壓縮 2.html檔案載入對應的js css img檔案 工程目錄結構如下 使用webpack4 涉及到的檔案配置如下 author jagger license isc devdependencies const path require path h...

gulp 幾個用法，打包,壓縮,監聽檔案

一 首先，最重要的一點 的檔名必須是 gulpfile.js.二，寫法 1.合併多個js檔案 var gulp require gulp concat require gulp concat gulp.task testconcat function 2.合併多個css var gulp requi...