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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類