gulp實用配置（2）－中小項目-js教程-PHP中文網

1.所需工具和版本

#2.工具安裝

首頁

web前端

js教程

gulp實用配置（2）－中小項目

PHP中文网

Jul 09, 2017 pm 06:10 PM

gulp 實用

上一篇的gulp配置很簡單，主要就是為了demo的檢視和調試，這篇則會相對詳細一些，包括壓縮合併打時間戳等。

在網路環境比較好的城市，需要多人協作的，大一點的專案應該都用上了模組化（這裡主要指commonjs和ES6模組系統，不是再早的require.js和sea.js）。程式碼也會更注重如何分離和注入，而不再是單純的合併。

但是在很多小公司，開發模式或技術都還是比較傳統的，或者一些小專案也完全不需要用上那些比較前沿的技術。

所以這篇配置就主要為了這樣的中小專案。

1.所需工具和版本

套件管理工具：yarn v0.24.5

自動化建置工具：gulp v4.0

#2.工具安裝

yarn add global gulpjs/gulp#4.0

##3.開發環境配置

<span style="color: #0000ff">var</span> gulp = require('gulp'<span style="color: #000000">),
    pug </span>= require('gulp-pug'<span style="color: #000000">),
    less </span>= require('gulp-less'<span style="color: #000000">),
    </span><span style="color: #008000">//</span><span style="color: #008000">当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumber</span>
    notify = require('gulp-notify'<span style="color: #000000">),
    plumber </span>= require('gulp-plumber'<span style="color: #000000">),
    sourcemaps </span>= require('gulp-sourcemaps'<span style="color: #000000">),
    browserSync </span>= require('browser-sync'<span style="color: #000000">).create()
    reload </span>=<span style="color: #000000"> browserSync.reload;

</span><span style="color: #0000ff">var</span> LessAutoprefix = require('less-plugin-autoprefix'<span style="color: #000000">),
    autoprefix </span>= <span style="color: #0000ff">new</span> LessAutoprefix({ browsers: ['last 2 versions'<span style="color: #000000">] });

</span><span style="color: #008000">//</span><span style="color: #008000"> 文件路径</span>
<span style="color: #0000ff">var</span> paths =<span style="color: #000000"> {
  pug: {
    src: </span>'src/pug/pages/*.pug'<span style="color: #000000">,
    dest: </span>'dev/html/'<span style="color: #000000">,
    watch: </span>'src/pug/**/*.pug'<span style="color: #000000">
  },
  less: {
    src: </span>'src/less/**/*.less'<span style="color: #000000">,
    dest: </span>'dev/css/'<span style="color: #000000">,
    watch: </span>'src/less/**/*.less'<span style="color: #000000">
  },
  js: {
    src: </span>'src/js/**/*.js'<span style="color: #000000">,
    dest: </span>'dev/js/'<span style="color: #000000">,
    watch: </span>'src/js/**/*.js'<span style="color: #000000">
  },
  img: {
    src: </span>'src/img/**/*'<span style="color: #000000">,
    dest: </span>'dev/img/'<span style="color: #000000">,
    watch: </span>'src/img/**/*'<span style="color: #000000">
  }
}

</span><span style="color: #008000">//</span><span style="color: #008000"> 启动 browserSync 服务，自己启动server，并且为浏览器实时刷新提供服务</span>
gulp.task('browserSync', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> browserSync.init({
    server: {
      baseDir: </span>'./'<span style="color: #000000">
    },
    files: </span>'./dev/**/*'<span style="color: #000000">
  });
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 将pug文件转换为html</span>
gulp.task('pug', <span style="color: #0000ff">function</span><span style="color: #000000"> buildHTML() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.pug.src)
    .pipe(plumber({errorHandler: notify.onError(</span>'Error: <%= error.message %>'<span style="color: #000000">)}))
    .pipe(pug())
    .pipe(gulp.dest(paths.pug.dest));
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 编译less文件</span>
gulp.task('less', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.less.src)
    .pipe(plumber({errorHandler: notify.onError(</span>'Error: <%= error.message %>'<span style="color: #000000">)}))
    .pipe(sourcemaps.init())
    .pipe(less({
      plugins: [autoprefix]
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.less.dest));
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 复制js文件</span>
gulp.task('js', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.js.src)
    .pipe(gulp.dest(paths.js.dest));
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 复制img文件</span>
gulp.task('img', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.img.src)
    .pipe(gulp.dest(paths.img.dest));
})


</span><span style="color: #008000">//</span><span style="color: #008000"> 监听文件变化</span>
gulp.task('watch', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  gulp.watch(paths.pug.watch, gulp.parallel(</span>'pug'<span style="color: #000000">))
  gulp.watch(paths.less.watch, gulp.parallel(</span>'less'<span style="color: #000000">))
  gulp.watch(paths.js.watch, gulp.parallel(</span>'js'<span style="color: #000000">))
  gulp.watch(paths.img.watch, gulp.parallel(</span>'img'<span style="color: #000000">))
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 默认任务，在命令行输入`gulp`来启动任务</span>
gulp.task('default', gulp.parallel('watch', 'browserSync', 'pug', 'less', 'js'))

登入後複製

gulp-pug這個外掛是用來編譯pug模板的，也就是以前的jade模板，pug模板是一個很強大的前後端通用的模板引擎，而且學習也很簡單，具體用法可以看我另外一篇關於pug的教學文章——基於express+mongodb+pug的部落格系統——pug篇。

#大家知道gulp在監聽任務的過程中，如果某個環節出了錯誤，gulp就會被中斷，然後得重新啟動gulp任務才行，這是一件很麻煩的事。這裡可以透過gulp-notify和gulp-plumber兩個外掛來避免gulp任務中斷。

#4.生產環境配置

<span style="color: #0000ff">var</span> gulp = require('gulp'<span style="color: #000000">),
  del </span>= require('del'<span style="color: #000000">),
  pug </span>= require('gulp-pug'<span style="color: #000000">),
  less </span>= require('gulp-less'<span style="color: #000000">),
  cleanCSS </span>= require('gulp-clean-css'<span style="color: #000000">),
  base64 </span>= require('gulp-tobase64'<span style="color: #000000">),
  </span><span style="color: #008000">//</span><span style="color: #008000"> img64 = require('gulp-imgbase64'),</span>
  imagemin = require('gulp-imagemin'<span style="color: #000000">),
  babel </span>= require('gulp-babel'<span style="color: #000000">),
  uglify </span>= require('gulp-uglify'<span style="color: #000000">),
  rev </span>= require('gulp-rev'), <span style="color: #008000">//</span><span style="color: #008000"> 添加时间戳</span>
  revCollector = require('gulp-rev-collector'<span style="color: #000000">);


</span><span style="color: #0000ff">var</span> LessAutoprefix = require('less-plugin-autoprefix'<span style="color: #000000">),
  autoprefix </span>= <span style="color: #0000ff">new</span><span style="color: #000000"> LessAutoprefix({
    browsers: [</span>'last 2 versions'<span style="color: #000000">]
  });

</span><span style="color: #008000">//</span><span style="color: #008000"> 文件路径</span>
<span style="color: #0000ff">var</span> paths =<span style="color: #000000"> {
  pug: {
    src: </span>'src/pug/pages/*.pug'<span style="color: #000000">,
    dest: </span>'dist/html/'<span style="color: #000000">
  },
  less: {
    src: </span>'src/less/main.less'<span style="color: #000000">,
    dest: </span>'dist/css/'<span style="color: #000000">
  },
  js: {
    src: [</span>'src/js/**/*.js', '!src/js/lib/*.js'<span style="color: #000000">],
    dest: </span>'dist/js/'<span style="color: #000000">
  },
  img: {
    src: </span>'src/img/**/*'<span style="color: #000000">,
    dest: </span>'dist/img/'<span style="color: #000000">
  }
};


</span><span style="color: #008000">//</span><span style="color: #008000"> 将pug文件转换为html</span>
gulp.task('pug', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.pug.src)
    .pipe(pug())
    .pipe(gulp.dest(paths.pug.dest));
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 编译less文件</span>
gulp.task('less', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.less.src)
    .pipe(less({
      plugins: [autoprefix]
    }))
    .pipe(base64({
      maxsize: </span>8<span style="color: #000000">
    }))
    .pipe(cleanCSS({
      compatibility: </span>'ie8' <span style="color: #008000">//</span><span style="color: #008000"> 兼容性前缀保留</span>
<span style="color: #000000">    }))
    .pipe(rev())
    .pipe(gulp.dest(paths.less.dest))
    .pipe(rev.manifest())
    .pipe(gulp.dest(</span>'rev/css'<span style="color: #000000">))
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 压缩图片</span>
gulp.task('img', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.img.src)
    .pipe(imagemin({
      optimizationLevel: </span>3<span style="color: #000000">,
      progressive: </span><span style="color: #0000ff">true</span><span style="color: #000000">,
      interlaced: </span><span style="color: #0000ff">true</span><span style="color: #000000">
    }))
    .pipe(gulp.dest(paths.img.dest));
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 编译JS文件</span>
gulp.task('js', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.js.src)
    .pipe(babel({
      presets: [</span>'es2015'<span style="color: #000000">]
    }))
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest(paths.js.dest))
    .pipe(rev.manifest())
    .pipe(gulp.dest(</span>'rev/js'<span style="color: #000000">));
});
</span><span style="color: #008000">//</span><span style="color: #008000"> 引用的外部 JS 库，不需要做压缩和打时间戳等处理</span><span style="color: #008000">
//</span><span style="color: #008000"> 所以直接复制就行</span>
gulp.task('copyJs', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span> gulp.src('src/js/lib/*.js'<span style="color: #000000">)
    .pipe(gulp.dest(</span>'dist/js/lib/'<span style="color: #000000">))
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 替换加了MD5时间戳的文件</span>
gulp.task('rev', gulp.series(gulp.parallel('img64', 'less', 'js'), <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span> gulp.src(['rev/**/*.json', 'dist/html/*.html'<span style="color: #000000">])
    .pipe(revCollector({
      replaceReved: </span><span style="color: #0000ff">true</span><span style="color: #000000">
    }))
    .pipe(gulp.dest(paths.pug.dest));
}));
</span><span style="color: #008000">//</span><span style="color: #008000"> Clean 任务执行前，先清除之前生成的文件</span>
gulp.task('clean', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span> del('dist/'<span style="color: #000000">)
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 默认任务，在命令行输入`gulp`来启动任务</span>
gulp.task('default', gulp.series('clean', gulp.series('img', gulp.parallel('rev', 'copyJs'))))

登入後複製

在生成環境中，程式碼需要壓縮合併，另外在每次程式碼更新發布新版本時，為了用戶用戶端能下載更新程式碼，所以我們還需要給CSS和JS檔案打上時間戳記。

gulp-rev這個外掛程式就專門給文件打MD5戳的，打完MD5戳之後，HTML檔案裡的引用當然也需要更改，如果每個都去手動更改肯定會是一件很麻煩的事，所以我們還需要gulp-rev-collector這個外掛程式來幫我們取代打了MD5戳的檔案。

gulp-imgbase64

，這個外掛程式可以指定html檔案中，哪些img元素轉換為base64，需要更個人化轉換的可以使用這個外掛。

5.專案目錄結構

XXX——

　　| — dist
##　　　　| — html
#　　　　| — css
#　　　　| — img
#　　　　| — js
#　　　　　　| — lib

　　| — dev

#　　　　| — html

#　　　　| — css

#　　　　| — img

#　　　　| — js

#　　　　　　| — lib

　　| — src

　　　　| — pug
#　　　　　　| — components

　　　　　　| — pages

　　　　　　| — layout.pug
##　　　　| — less

　　　　　　| — pages

　　　　　　| — main.less

　　　　　　| — reset.less

　　　　　　| — common.less

　　　　　　| — feature.less

　　　　| — img
#　　　　| — js

#　　　　　　| — lib

src資料夾裡是主要的業務程式碼，這裡面是需要長期維護的程式碼。

dev資料夾是開發時gulp產生程式碼的地方。

dist資料夾是產生時gulp產生程式碼的地方。

在這份配置裡，我並沒有像其他很多人那樣，把開發時透過gulp產生的程式碼也放在src資料夾裡，因為那樣會造成很多引用上的麻煩，而且把開發和生產的程式碼環境都分開，能很好地保持src資料夾裡的純淨，不會有任何雜亂程式碼。

所以一些沒經過gulp處理的文件，我會直接把它們複製到dev或是dist資料夾裡對應的位置。

dist資料夾在每次gulp任務產生程式碼前都會被清空，所以我們不用關心dist資料夾裡的內容。

而dev資料夾可能會有很多冗餘文件，但我們也不需要擔心它會對我們造成任何影響，文件刪除或覆蓋都不重要，只需要保證src資料夾裡的文件正確即可。 ### ### ###

以上是gulp實用配置（2）－中小項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1324

PHP教程

1272

C# 教程

1251

Related knowledge

PyCharm新手指南：學會在PyCharm中刪除項目 Feb 23, 2024 pm 09:39 PM

PyCharm新手指南：刪除專案的實用技巧PyCharm是一款功能強大的Python整合開發環境（IDE），在進行專案開發時，有時候需要刪除專案或專案中的檔案。本文將介紹在PyCharm中刪除專案的實用技巧，並提供具體的程式碼範例幫助新手更好地理解和應用。 1.刪除項目刪除項目意味著刪除整個項目資料夾，這在我們需要清理或重建項目時非常有用。在PyCharm中刪

全角英文字母轉換為半角形式的實用技巧 Mar 26, 2024 am 09:54 AM

全角英文字母轉換為半角形式的實用技巧在現代生活中，我們經常會接觸到英文字母，在使用電腦、手機等設備時也經常需要輸入英文字母。然而，有時候我們會遇到全角英文字母的情況，而我們需要使用的是半角形式。那麼，如何將全角英文字母轉換為半角形式呢？以下就為大家介紹一些實用的技巧。首先，全角英文字母和數字是指在輸入法中佔據一個全角位置的字符，而半角英文字母和數字則是佔據一

從零開始學習Django框架：實用教學與範例 Sep 28, 2023 am 08:42 AM

從零開始學習Django框架：實用教學和範例Django是一種流行的PythonWeb應用程式框架，它簡化了網站的開發過程。它提供了一套強大的工具和程式庫，幫助開發者建立高效、可擴展和安全的網路應用程式。對於初學者來說，學習Django可能會有些困難，但透過一些實用的教學和範例，你可以快速上手並了解這個框架的核心概念和用法。本文將帶你逐步學習Django框

【Linux工具】-yum/gdb使用教學！ Mar 07, 2024 am 11:10 AM

yum是一種常用的軟體包管理工具，而gdb是一種強大的偵錯工具。以下是它們的使用教學：yum使用教學課程：安裝軟體包：使用yuminstall指令安裝軟體包。例如，要安裝ApacheWeb伺服器，可以執行yuminstallhttpd。升級軟體包：使用yumupdate指令升級已安裝的軟體包。例如，執行yumupdate將升級系統中的所有軟體包。移除軟體包：使用yumremove命令移除軟體包。例如，要刪除ApacheWeb伺服器，可以執行yumremovehttpd。搜尋軟體包：使用yumsear

Linux系統如何查看伺服器頻寬及網路使用情況？ Mar 06, 2024 pm 05:52 PM

要查看Linux伺服器的頻寬和網路使用情況，可以使用以下命令和工具：ifconfig命令：ifconfig命令用於顯示和配置網路介面信息，包括頻寬和網路使用情況。使用以下命令查看所有網路介面的資訊：ifconfig該命令將顯示每個網路介面的詳細信息，包括接收和發送的資料包數量以及網路使用情況。 ip指令：ip指令是一個更強大的替代品，用於顯示和設定網路介面和路由表等資訊。使用以下命令查看所有網路介面的資訊：ip-slink該命令將顯示每個網路介面的統計訊息，包括接收和發送的資料包數量以及網路使用情

學習如何在Laravel Elixir中運用Gulp框架 Jan 22, 2024 am 11:27 AM

LaravelElixir是一個較為受歡迎的前端自動化工具集，它基於Gulp，簡化了許多以前需要手動進行的任務。但LaravelElixir的優雅API設計，並不代表開發人員完全不用了解Gulp的使用。相反，了解Gulp的使用可以更好地理解LaravelElixir的工作原理，提高開發效率。本文將介紹如何在LaravelElixir框架中使用Gulp

使用Terraform來管理OpenStack集群 Feb 18, 2024 pm 04:42 PM

Terraform是一種聲明性語言，可以作為你正在建造的基礎設施的藍圖。經過一段時間擁有OpenStack生產環境和家庭實驗室後，我確認了從管理員和租用戶的角度對於部署和管理工作負載的重要性。 Terraform是用於管理基礎架構即程式碼的開源軟體工具，透過聲明性語言建立基礎架構藍圖。它支援Git管理，並適用於GitOps。本文介紹了使用Terraform管理OpenStack叢集的基礎知識。我使用Terraform重新建立了OpenStack演示專案。安裝Terraform我使用CentOS作為跳板

Ubuntu如何判斷哪個串口在運作 Feb 29, 2024 am 08:00 AM

使用命令列工具：可以使用指令ls/dev來列出系統中所有的串列埠設備，通常串口設備的名稱以ttyS或ttyUSB開頭。可以使用dmesg|greptty指令來查看系統啟動時串列埠設備的資訊。您可以使用串列埠監控工具如minicom、PuTTY等來開啟串列設備，以便進行資料測試。透過成功傳送和接收數據，您可以驗證串列埠的正常運作狀態。可以藉助專門的串列埠檢測工具（例如SerialPortMonitor、RealTerm等）來掃描系統內的串口設備，進而進行測試與除錯工作。

See all articles

gulp實用配置（2）－中小項目

1.所需工具和版本

#2.工具安裝

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題