基於gulp的前端自動化方案

2021-09-11 13:06:56 字數 3226 閱讀 4514

​ 最近幾年前端技術發展日新月異,特別是單頁應用的普及。元件化、工程化、自動化成了前端發展的趨勢。webpack已經成為了前端打包構建的主流,但是一些老古董的專案還是存在的,也有優化的必要,正好公司的老專案需要優化,不多說拿gulp實踐一下。

你的專案目錄關係到你的gulp指令碼裡的任務路徑,我指令碼裡寫的是匹配所有的目錄和檔案。我簡單舉個例子:這裡js/common裡的js檔案也會被處理。如果只想處理特定目錄的檔案,請修改任務裡的路徑。

demo/

├── css/

│ ├── index.css

├── js/

│ ├── common/

│ │ └─ common.js

│ ├── index.js

├── img/

│ ├── logo.png

└── index.html

複製**

安裝gulp所需要的模組,這裡直接列舉我的package.json檔案內容

,

"devdependencies":

}複製**

新建gulpfile.js檔案,並引入所需模組,這裡我把路徑統一寫在paths中。具體關於路徑的寫法,可以去看gulp官網的api:www.gulpjs.com.cn/docs/api/

gulp-minify-css這個官網提示已經棄用,改用gulp-clean-css,這裡保留只是為了告訴大家,效果一樣,使用者一致,為了保證專案不出問題,還是用最新的吧。

'use strict';

var gulp = require('gulp'),

minifycss = require('gulp-minify-css'),//壓縮css 已棄用

cleancss = require('gulp-clean-css'),//壓縮css

imagemin = require('gulp-imagemin'),//壓縮

autoprefixer = require('gulp-autoprefixer'),//處理瀏覽器字首

uglify = require('gulp-uglify'),//壓縮js

sourcemaps = require('gulp-sourcemaps'),//生成 sourcemap

gulpif = require('gulp-if'),//條件判斷

notify = require('gulp-notify'),//處理報錯

cache = require('gulp-cache'),//只壓縮修改的

htmlclean = require('gulp-htmlclean'),// 精簡html

htmlmin = require('gulp-htmlmin'),//壓縮html

sequence = require('gulp-sequence'),//同步執行任務

paths = ',

css: '**/*.css',

img: '**/*.',

js: '**/*.js'

}複製**

壓縮處理css

這裡需要排除node_modules資料夾和生成構建的後的目錄/dist/及它們的子目錄,直接!後面跟要排除的目錄就行了。

gulp.task('minify-css', function () ))

.pipe(cleancss())

.pipe(sourcemaps.write('.'))

.pipe(gulp.dest(paths.dest))

.pipe(notify());

});複製**

有些引用的css或者js不需要壓縮,比如jquery',bootstrap,也或者是公司內部的公共庫 .min.等等。

這裡咱們就用到gulp-if了,去排除min.css

var conditioncss = function (f) 

return

true;

};複製**

再修改下處理css的操作

.pipe(gulpif(conditioncss, cleancss()))

複製**

壓縮處理js

同理排除下 min.js ,這裡還要注意記得把 gulp指令碼也排除不處理。

gulp.task('minify-js', function () ));

});複製**

壓縮處理 img
gulp.task('minify-img', function () );

複製**

壓縮處理html
gulp.task('minify-html', function () ))

.pipe(gulp.dest(paths.dest));

});複製**

增加版本號
gulp.task('rev', function () );

複製**

同步執行task

因為gulp所有的任務都是非同步完成的,在有時候我們需要同步執行任務,比如:先編譯less,在對編譯好的css進行壓縮,這個時候非同步就有問題了。

gulp.task('deploy', sequence(['minify-css', 'minify-js'], 'minify-img', 'rev', 'minify-html'));

複製**

執行gulp所有任務

這裡建立乙個名為default的任務,執行上面的deploy任務

gulp.task('default', ['deploy'], function (e) )

複製**

在終端中輸入gulp或者gulp default執行構建,即可在我們設定的產出目錄裡看到我們壓縮處理後的**。

基於gulp的前端自動化方案

最近幾年前端技術發展日新月異,特別是單頁應用的普及。元件化 工程化 自動化成了前端發展的趨勢。webpack已經成為了前端打包構建的主流,但是一些老古董的專案還是存在的,也有優化的必要,正好公司的老專案需要優化,不多說拿gulp實踐一下。你的專案目錄關係到你的gulp指令碼裡的任務路徑,我指令碼裡寫...

基於gulp的前端自動化方案

最近幾年前端技術發展日新月異,特別是單頁應用的普及。元件化 工程化 自動化成了前端發展的趨勢。webpack已經成為了前端打包構建的主流,但是一些老古董的專案還是存在的,也有優化的必要,正好公司的老專案需要優化,不多說拿gulp實踐一下。你的專案目錄關係到你的gulp指令碼裡的任務路徑,我指令碼裡寫...

使用gulp實現前端自動化

const gulp require gulp const clean require gulp clean const fileinclude require gulp file include const rev require gulp rev const revreplace require...