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

来源:http://www.cnblogs.com/mcbai/archive/2017/07/09/7141969.html
-Advertisement-
Play Games

上一篇的gulp配置很簡單，主要就是為了demo的查看和調試，這一篇則會相對詳細一些，包括壓縮合併打時間戳等。 在互聯網環境比較好的城市，需要多人協作的，大一點的項目應該都用上了模塊化（這裡主要指commonjs和ES6模塊系統，不是再早的require.js和sea.js）。代碼也會更註重如何分離 ...


上一篇的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.開發環境配置

var gulp = require('gulp'),
    pug = require('gulp-pug'),
    less = require('gulp-less'),
    //當發生異常時提示錯誤 確保本地安裝gulp-notify和gulp-plumber
    notify = require('gulp-notify'),
    plumber = require('gulp-plumber'),
    sourcemaps = require('gulp-sourcemaps'),
    browserSync = require('browser-sync').create()
    reload = browserSync.reload;

var LessAutoprefix = require('less-plugin-autoprefix'),
    autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });

// 文件路徑
var paths = {
  pug: {
    src: 'src/pug/pages/*.pug',
    dest: 'dev/html/',
    watch: 'src/pug/**/*.pug'
  },
  less: {
    src: 'src/less/**/*.less',
    dest: 'dev/css/',
    watch: 'src/less/**/*.less'
  },
  js: {
    src: 'src/js/**/*.js',
    dest: 'dev/js/',
    watch: 'src/js/**/*.js'
  },
  img: {
    src: 'src/img/**/*',
    dest: 'dev/img/',
    watch: 'src/img/**/*'
  }
}

// 啟動 browserSync 服務，自己啟動server，並且為瀏覽器實時刷新提供服務
gulp.task('browserSync', function() {
  return browserSync.init({
    server: {
      baseDir: './'
    },
    files: './dev/**/*'
  });
})

// 將pug文件轉換為html
gulp.task('pug', function buildHTML() {
  return gulp.src(paths.pug.src)
    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
    .pipe(pug())
    .pipe(gulp.dest(paths.pug.dest));
});

// 編譯less文件
gulp.task('less', function() {
  return gulp.src(paths.less.src)
    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
    .pipe(sourcemaps.init())
    .pipe(less({
      plugins: [autoprefix]
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.less.dest));
})

// 複製js文件
gulp.task('js', function() {
  return gulp.src(paths.js.src)
    .pipe(gulp.dest(paths.js.dest));
})

// 複製img文件
gulp.task('img', function() {
  return gulp.src(paths.img.src)
    .pipe(gulp.dest(paths.img.dest));
})


// 監聽文件變化
gulp.task('watch', function() {
  gulp.watch(paths.pug.watch, gulp.parallel('pug'))
  gulp.watch(paths.less.watch, gulp.parallel('less'))
  gulp.watch(paths.js.watch, gulp.parallel('js'))
  gulp.watch(paths.img.watch, gulp.parallel('img'))
})

// 預設任務，在命令行輸入`gulp`來啟動任務
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.生產環境配置

var gulp = require('gulp'),
  del = require('del'),
  pug = require('gulp-pug'),
  less = require('gulp-less'),
  cleanCSS = require('gulp-clean-css'),
  base64 = require('gulp-tobase64'),
  // img64 = require('gulp-imgbase64'),
  imagemin = require('gulp-imagemin'),
  babel = require('gulp-babel'),
  uglify = require('gulp-uglify'),
  rev = require('gulp-rev'), // 添加時間戳
  revCollector = require('gulp-rev-collector');


var LessAutoprefix = require('less-plugin-autoprefix'),
  autoprefix = new LessAutoprefix({
    browsers: ['last 2 versions']
  });

// 文件路徑
var paths = {
  pug: {
    src: 'src/pug/pages/*.pug',
    dest: 'dist/html/'
  },
  less: {
    src: 'src/less/main.less',
    dest: 'dist/css/'
  },
  js: {
    src: ['src/js/**/*.js', '!src/js/lib/*.js'],
    dest: 'dist/js/'
  },
  img: {
    src: 'src/img/**/*',
    dest: 'dist/img/'
  }
};


// 將pug文件轉換為html
gulp.task('pug', function() {
  return gulp.src(paths.pug.src)
    .pipe(pug())
    .pipe(gulp.dest(paths.pug.dest));
});

// 編譯less文件
gulp.task('less', function() {
  return gulp.src(paths.less.src)
    .pipe(less({
      plugins: [autoprefix]
    }))
    .pipe(base64({
      maxsize: 8
    }))
    .pipe(cleanCSS({
      compatibility: 'ie8' // 相容性首碼保留
    }))
    .pipe(rev())
    .pipe(gulp.dest(paths.less.dest))
    .pipe(rev.manifest())
    .pipe(gulp.dest('rev/css'))
});

// 壓縮圖片
gulp.task('img', function() {
  return gulp.src(paths.img.src)
    .pipe(imagemin({
      optimizationLevel: 3,
      progressive: true,
      interlaced: true
    }))
    .pipe(gulp.dest(paths.img.dest));
});

// 編譯JS文件
gulp.task('js', function() {
  return gulp.src(paths.js.src)
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest(paths.js.dest))
    .pipe(rev.manifest())
    .pipe(gulp.dest('rev/js'));
});
// 引用的外部 JS 庫，不需要做壓縮和打時間戳等處理
// 所以直接複製就行
gulp.task('copyJs', function() {
  return gulp.src('src/js/lib/*.js')
    .pipe(gulp.dest('dist/js/lib/'))
})

// 替換加了MD5時間戳的文件
gulp.task('rev', gulp.series(gulp.parallel('img64', 'less', 'js'), function() {
  return gulp.src(['rev/**/*.json', 'dist/html/*.html'])
    .pipe(revCollector({
      replaceReved: true
    }))
    .pipe(gulp.dest(paths.pug.dest));
}));
// Clean 任務執行前，先清除之前生成的文件
gulp.task('clean', function() {
  return del('dist/')
});

// 預設任務，在命令行輸入`gulp`來啟動任務
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文件夾里的文件正確即可。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Java基礎——iO（三）
    一、管道流 演示：PipedInputStream , PipedOutputStream 註意：管道流本身就不建議在一個線程中使用，這是因為向輸出流中寫的數據，都會存到輸入流內部的一個1024位元組大小的數組中，如果寫的內容超過這個數組的大小，而且沒有被輸入流讀取的話，輸出流所在的線程就會等待，如果 ...
  • 【轉】MyBatis介面的簡單實現原理
    MyBatis介面的簡單實現原理 用過MyBatis3的人可能會覺得為什麼MyBatis的Mapper介面沒有實現類，但是可以直接用？ 那是因為MyBatis使用Java動態代理實現的介面。 這裡僅僅舉個簡單例子來說明原理，不是完全針對MyBatis的，這種思想我們也可以應用在其他地方。 定義一個接 ...
  • Python 實現資料庫更新腳本的生成
    我在工作的時候，在測試環境下使用的資料庫跟生產環境的資料庫不一致，當我們的測試環境下的資料庫完成測試準備更新到生產環境上的資料庫時候，需要準備更新腳本，真是一不小心沒記下來就會忘了改了哪裡，哪裡添加了什麼，這個真是非常讓人頭疼。因此我就試著用Python來實現自動的生成更新腳本，以免我這爛記性，記不 ...
  • 在AngularX中使用ngrx 【附源碼】
    ngrx 是 Angular框架的狀態容器，提供可預測化的狀態管理。 1.首先創建一個可路由訪問的模塊 這裡命名為：DemopetModule。 包括文件：demopet.html、demopet.scss、demopet.component.ts、demopet.routes.ts、demopet ...
  • 運用jQuery製作一個簡單的計算器
    這是我的第一遍博文，我來試試感覺 ...
  • JS 判斷某變數是否為某數組中的一個值 的幾種方法
    1.正則表達式 js 中判斷某個元素是否存在於某個 js 數組中，相當於 PHP 語言中的 in_array 函數。 Array.prototype.in_array=function(e){ var r=new RegExp(','+e+','); return (r.test(','+this. ...
  • 前端面試題
    1.xhtml和html有什麼區別 HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言 最主要的不同： XHTML 元素必須被正確地嵌套。 XHTML 元素必須被關閉。 標簽名必須用小寫字母。 XHTML 文檔必須擁有根元素 2、簡述一下src與href的區別： href ...
  • 有自學前端開發的小伙伴兒嗎？
    如果你是一個人在自學前端開發，或者是對前端開發有比較濃厚的興趣正想踏入前端領域，只要你在前端自學路上遇到了自己無法解決的技術難題，那麼儘管將你的疑惑交給我的小伙伴兒們吧，我們都是一群在前端自學路上摸爬滾打的有志青年，希望你可以來和我們共同交流。同時也希望你能獻出自己的一份力，幫助我的小伙伴兒們解決他 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類