快捷導(dǎo)航

使用gulp構(gòu)建前端自動(dòng)化的方法示例

更新時(shí)間：2018年12月25日 10:51:07 作者：_CL2

這篇文章主要介紹了使用gulp構(gòu)建前端自動(dòng)化的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

gulp是一個(gè)自動(dòng)化構(gòu)建工具，開(kāi)發(fā)者可以用它來(lái)自動(dòng)執(zhí)行一些常見(jiàn)的任務(wù)。這里以我之前做的一個(gè)demo為例，簡(jiǎn)要介紹如何使用gulp實(shí)現(xiàn)前端工程自動(dòng)化。

項(xiàng)目結(jié)構(gòu)

其中src目錄下表示的是項(xiàng)目的源代碼，可以看到其中有l(wèi)ess、js、html等，而dist目錄則是保存的是gulp編譯后生成的代碼，相當(dāng)于生產(chǎn)環(huán)境。最后也最重要的是gulpfile.js，這個(gè)文件用于設(shè)置gulp相關(guān)的配置，類(lèi)似于webpack中的webpack.config.js。

安裝

這里使用的gulp為v3.9.1，語(yǔ)法和最新的v4.x有所出入，想學(xué)習(xí)最新的gulp語(yǔ)法，可以參考gulp.js - The streaming build system 。

3.9.1 安裝如下：

npm install --save-dev gulp

語(yǔ)法

gulp.task()用于定義一個(gè)gulp任務(wù)，在命令行中可以使用gulp [任務(wù)名]開(kāi)啟該任務(wù)。
gulp.src()會(huì)返回符合匹配的文件流，可以被pipe()到其他插件中。
gulp.dest()：輸出所有數(shù)據(jù)。
gulp.watch()用于監(jiān)測(cè)文件的變動(dòng)。

實(shí)踐

在這個(gè)項(xiàng)目中，有一些常見(jiàn)的需求，這里使用gulp來(lái)實(shí)現(xiàn)自動(dòng)化：

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'),           //添加版本號(hào)
  revReplace = require('gulp-rev-replace'),   //版本號(hào)替換
  useref = require('gulp-useref'),        //解析html資源定位
  gulpif = require('gulp-if'),          //if語(yǔ)句
  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é)尾的文件通過(guò)less()轉(zhuǎn)為css文件，再通過(guò)csso()以及concat()實(shí)現(xiàn)對(duì)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壓縮合并的過(guò)程大同小異，增加了一個(gè)jshint()代碼審查的過(guò)程，它會(huì)將不符合規(guī)范的錯(cuò)誤代碼輸出到控制臺(tái)。

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

在開(kāi)發(fā)過(guò)程中，因?yàn)閔tml不能直接引入.less文件，因此還需要生成開(kāi)發(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/'));
});

添加版本號(hào)

為了防止瀏覽器對(duì)文件進(jìn)行緩存，需要對(duì)文件添加版本號(hào)，保證每次獲取到的都是最新的代碼。

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中，首先通過(guò)rev()對(duì)dist目錄下的.css/.js生成一個(gè)文件名帶版本號(hào)的文件，例如本例中public.css生成public-5c001c53f6.css，然后分別輸出到不同的目錄下，最后生成一個(gè)rev-manifest.json文件，存儲(chǔ)了原文件和帶版本號(hào)文件之間的映射關(guān)系，如下：

{
 "public.css": "public-5c001c53f6.css",
 "public.js": "public-93c275a836.js"
}

在build中，先獲取到rev-manifest.json中的對(duì)象，然后利用revReplace()來(lái)替換版本號(hào)，再使用useref()來(lái)進(jìn)行資源的解析定位，最后輸出即可。

以引入js文件為例，源html文件中對(duì)文件的引入則要改寫(xiě)為以下形式，即以注釋的形式寫(xiě)入構(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>

具體的語(yǔ)法規(guī)則可以參見(jiàn)gulp-useref。

創(chuàng)建本地服務(wù)器并實(shí)現(xiàn)自動(dòng)刷新

使用connet.server()來(lái)創(chuàng)建一個(gè)本地服務(wù)器，利用gulp.watch()來(lái)對(duì)src下的文件進(jìn)行監(jiān)測(cè)，如果發(fā)生變化，則執(zhí)行編譯less為css和刷新頁(yè)面的任務(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'])
})

完整的代碼可以參見(jiàn)github。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: