使用gulp構(gòu)建前端自動化的方法示例
gulp是一個自動化構(gòu)建工具，開發(fā)者可以用它來自動執(zhí)行一些常見的任務(wù)。這里以我之前做的一個demo為例，簡要介紹如何使用gulp實(shí)現(xiàn)前端工程自動化。
項(xiàng)目結(jié)構(gòu)
其中src目錄下表示的是項(xiàng)目的源代碼，可以看到其中有l(wèi)ess、js、html等，而dist目錄則是保存的是gulp編譯后生成的代碼，相當(dāng)于生產(chǎn)環(huán)境。最后也最重要的是gulpfile.js，這個文件用于設(shè)置gulp相關(guān)的配置，類似于webpack中的webpack.config.js。
安裝
這里使用的gulp為v3.9.1，語法和最新的v4.x有所出入，想學(xué)習(xí)最新的gulp語法，可以參考gulp.js - The streaming build system 。
3.9.1 安裝如下：
npm install --save-dev gulp
語法
- gulp.task()用于定義一個gulp任務(wù)，在命令行中可以使用gulp [任務(wù)名]開啟該任務(wù)。
- gulp.src()會返回符合匹配的文件流，可以被pipe()到其他插件中。
- gulp.dest()：輸出所有數(shù)據(jù)。
- gulp.watch()用于監(jiān)測文件的變動。
實(shí)踐
在這個項(xiàng)目中，有一些常見的需求，這里使用gulp來實(shí)現(xiàn)自動化：
- less轉(zhuǎn)css
- css壓縮合并
- js壓縮合并
- 圖片壓縮
在gulpfile.js中首先需要導(dǎo)入gulp和一些常用的插件，本次demo使用到的插件如下：
var gulp = require('gulp'),
less = require('gulp-less'), //less 轉(zhuǎn) css
csso = require('gulp-csso'), //css壓縮
concat = require('gulp-concat'), //合并文件
uglify = require('gulp-uglify'), //js 壓縮
jshint = require('gulp-jshint'), //js 檢查
clean = require('gulp-clean'), //清除文件
imagemin = require('gulp-imagemin'), //圖片壓縮
rev = require('gulp-rev'), //添加版本號
revReplace = require('gulp-rev-replace'), //版本號替換
useref = require('gulp-useref'), //解析html資源定位
gulpif = require('gulp-if'), //if語句
connect = require('gulp-connect'); //創(chuàng)建web服務(wù)器
圖片壓縮
獲取到src下所有以.jpg或.png結(jié)尾的圖片，將其壓縮后輸出到dist目錄下。
gulp.task('dist:img', () => {
gulp.src(['./src/**/*.jpg', './src/**/*.png'])
.pipe(imagemin())
.pipe(gulp.dest('dist/'))
})
less壓縮合并為css
先清除已存在的css，然后將src下以.less結(jié)尾的文件通過less()轉(zhuǎn)為css文件，再通過csso()以及concat()實(shí)現(xiàn)對css的壓縮合并。
gulp.task('dist:css', () => {
gulp.src('dist/css/*.css').pipe(clean());
return gulp.src('./src/less/*.less')
.pipe(less())
.pipe(csso())
.pipe(concat('public.css'))
.pipe(gulp.dest('dist/css/'));
});
js壓縮合并
js壓縮合并的過程大同小異，增加了一個jshint()代碼審查的過程，它會將不符合規(guī)范的錯誤代碼輸出到控制臺。
gulp.task('dist:js', () => {
gulp.src('dist/js/*.js').pipe(clean());
return gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('public.js'))
.pipe(gulp.dest('dist/js/'))
});
less=>css
在開發(fā)過程中，因?yàn)閔tml不能直接引入.less文件，因此還需要生成開發(fā)環(huán)境的.css。
gulp.task('src:css', () => {
gulp.src('src/css/*.css').pipe(clean());
return gulp.src('./src/less/*.less')
.pipe(less())
.pipe(gulp.dest('src/css/'));
});
添加版本號
為了防止瀏覽器對文件進(jìn)行緩存，需要對文件添加版本號，保證每次獲取到的都是最新的代碼。
gulp.task('revision', ['dist:css', 'dist:js'], () => {
return gulp.src(["dist/css/*.css", "dist/js/*.js"])
.pipe(rev())
.pipe(gulpif('*.css', gulp.dest('dist/css'), gulp.dest('dist/js')))
.pipe(rev.manifest())
.pipe(gulp.dest('dist'))
})
gulp.task('build', ['dist:img'], () => {
var manifest = gulp.src('dist/rev-manifest.json');
return gulp.src('src/index.html')
.pipe(revReplace({
manifest: manifest
}))
.pipe(useref())
.pipe(gulp.dest('dist/'))
})
在revision中，首先通過rev()對dist目錄下的.css/.js生成一個文件名帶版本號的文件，例如本例中public.css生成public-5c001c53f6.css，然后分別輸出到不同的目錄下，最后生成一個rev-manifest.json文件，存儲了原文件和帶版本號文件之間的映射關(guān)系，如下：
{
"public.css": "public-5c001c53f6.css",
"public.js": "public-93c275a836.js"
}
在build中，先獲取到rev-manifest.json中的對象，然后利用revReplace()來替換版本號，再使用useref()來進(jìn)行資源的解析定位，最后輸出即可。
以引入js文件為例，源html文件中對文件的引入則要改寫為以下形式，即以注釋的形式寫入構(gòu)建后生成的文件路徑，如下:
<!-- build:js ./js/public.js --> <script src="./js/jquery-1.12.4.min.js"></script> <script src="./js/myAlbum.js"></script> <!-- endbuild -->
最后生成的html為：
<script src="./js/public-93c275a836.js"></script>
具體的語法規(guī)則可以參見gulp-useref。
創(chuàng)建本地服務(wù)器并實(shí)現(xiàn)自動刷新
使用connet.server()來創(chuàng)建一個本地服務(wù)器，利用gulp.watch()來對src下的文件進(jìn)行監(jiān)測，如果發(fā)生變化，則執(zhí)行編譯less為css和刷新頁面的任務(wù)。
gulp.task('connect', () => {
connect.server({
root: 'src',
livereload: true,
port: 8888
})
})
gulp.task('reload', () => {
gulp.src('src/*.html')
.pipe(connect.reload())
})
gulp.task('watch', () => {
gulp.watch('src/**/*', ['src:css', 'reload'])
})
完整的代碼可以參見github。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS如何判斷對象是否包含某個屬性,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
Markdown+Bootstrap圖片自適應(yīng)屬性詳解
這篇文章主要為大家詳細(xì)介紹了Markdown+Bootstrap圖片自適應(yīng)屬性，感興趣的朋友可以參考一下2016-05-05
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)tab欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
javascript編程實(shí)現(xiàn)棧的方法詳解【經(jīng)典數(shù)據(jù)結(jié)構(gòu)】
這篇文章主要介紹了javascript編程實(shí)現(xiàn)棧的方法,簡單說明了棧的概念、特點(diǎn)并結(jié)合實(shí)例形式分析了javascript棧的定義、入棧、出棧等操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
用webpack4開發(fā)小程序的實(shí)現(xiàn)方法
這篇文章主要介紹了用webpack4開發(fā)小程序的實(shí)現(xiàn)方法，分享通過webpack來構(gòu)建小程序的開發(fā)架構(gòu)，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)彈窗拖拽代碼demo，以及在實(shí)現(xiàn)js彈窗拖拽效果需要注意的事項(xiàng)，感興趣的小伙伴們可以參考一下2016-06-06
json格式的時(shí)間顯示為：Date(1377828670436)需要轉(zhuǎn)換為正常年月日，具體的實(shí)現(xiàn)思路及代碼如下，感興趣的朋友可以參考下2013-09-09
ES2015 推出了JS 的 Promise ，而在沒有原生支持的時(shí)候，我們也可以使用諸如 Promises/A+ 的庫的幫助，在我們的代碼里實(shí)現(xiàn)Promise 的支持，下面這篇文章主要給大家介紹了如何從零開始利用js手寫一個Promise庫的相關(guān)資料，需要的朋友可以參考下。2018-04-04
uni-app可以說是目前跨端數(shù)最多的框架之一了,這篇文章主要給大家介紹了關(guān)于uni-app學(xué)習(xí)之nvue使用的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
js對文字編碼有3個函數(shù)： escape,encodeURI,encodeURIComponent， 對應(yīng)的解碼函數(shù)：unescape,decodeURI,decodeURIComponent2011-12-12