2. 程式人生 > >gulp的簡單使用（MAC OX 系統）

gulp的簡單使用（MAC OX 系統）

阿新 • • 發佈：2019-01-30

1、gulp的安裝


首先確保你已經正確安裝了nodejs環境。然後以全域性方式安裝gulp：

sudo npm install -global gulp-cli

全域性安裝gulp後，還需要在每個要使用gulp的專案中都單獨安裝一次。把目錄切換到你的專案資料夾中，然後在命令列中執行：

npm install gulp

如果想在安裝的時候把gulp寫進專案package.json檔案的依賴中，則可以加上--save-dev：（可以不執行）

npm install --save-dev gulp

2、開始使用gulp

2.1 建立gulpfile.js檔案

就像gruntjs需要一個Gruntfile.js檔案一樣，gulp也需要一個檔案作為它的主檔案，在gulp中這個檔案叫做gulpfile.js

。新建一個檔名為gulpfile.js的檔案，然後放到你的專案目錄中。之後要做的事情就是在gulpfile.js檔案中定義我們的任務了。下面是一個最簡單的gulpfile.js檔案內容示例，它定義了一個預設的任務。

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

Gruntfile.js裡程式碼最後我會提供一個我寫好的，如果你要用的話，修改對應的目錄就OK了

此時我們的目錄結構是這樣子的：


2.2 先通過cd進入專案的根目錄,安裝各個模組的（壓縮CSS，壓縮JS）只要執行下面命令就OK

[javascript] view plain copy
  1. npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev  

2.3 執行gulp任務

要執行gulp任務，只需切換到存放gulpfile.js檔案的目錄(windows平臺請使用cmd或者Power Shell等工具)，然後在命令列中執行gulp

命令就行了，gulp後面可以加上要執行的任務名，例如gulp 'script'，如果沒有指定任務名，則會執行任務名為default的預設任務。


我的Gruntfile.js程式碼如下，記得修改路徑哦

[javascript] view plain copy
  1. // 載入外掛
  2. var gulp = require('gulp'),  
  3.     minifycss = require('gulp-minify-css'), //壓縮CSS
  4. //  jshint = require('gulp-jshint'),
  5.     uglify = require('gulp-uglify'),  
  6.     imagemin = require('gulp-imagemin'),  
  7.     rename = require('gulp-rename'),  
  8.     clean = require('gulp-clean'),  
  9.     concat = require('gulp-concat'),  
  10.     notify = require('gulp-notify'),  
  11.     cache = require('gulp-cache'),  
  12.     livereload = require('gulp-livereload'),  
  13. //  htmlmin = require('gulp-htmlmin'),
  14.     autoprefixer = require('gulp-autoprefixer');  
  15. // 壓縮非minjs,檢查JS
  16. gulp.task('scripts', function() {  
  17.     return gulp.src(['js/*.js', '!js/*min.js'])// 要壓縮的js檔案
  18. //      .pipe(jshint())
  19. //      .pipe(jshint.reporter('default'))
  20.         //      .pipe(rename({
  21.         //          suffix: '.min'
  22.         //      }))
  23.         .pipe(uglify()) //使用uglify進行壓縮,更多配置請參考：
  24.         .pipe(gulp.dest('dist/js'))//壓縮後的路徑
  25.         .pipe(notify({  
  26.             message: 'Scripts task complete'
  27.         }));  
  28. });  
  29. // 壓縮非mincss
  30. gulp.task('styles', function() {  
  31.     return gulp.src(['css/*.css', '!**/*min.css'])  
  32.         .pipe(autoprefixer())  
  33.         .pipe(minifycss())  
  34.         .pipe(gulp.dest('dist/css'))  
  35.         .pipe(notify({  
  36.             message: 'styles task complete'
  37.         }));  
  38. });  
  39. //壓縮圖片
  40. gulp.task('images', function() {  
  41.     return gulp.src(['src/**/*.png', 'src/**/*.jpg', 'src/**/*.gif'])  
  42.         //      .pipe(cache(imagemin({
  43.         //          optimizationLevel: 3,
  44.         //          progressive: true,
  45.         //          interlaced: true
  46.         //      })))
  47.         .pipe(gulp.dest('build'))  
  48.         .pipe(notify({  
  49.             message: 'Images task complete'
  50.         }));  
  51. });  
  52. // 壓縮html
  53. gulp.task('htmls', function() {  
  54.     return gulp.src('src/**/*.shtml')  
  55. //      .pipe(htmlmin())
  56.         .pipe(gulp.dest('build'))  
  57.         .pipe(notify({  
  58.             message: 'htmls task complete'
  59.         }));  
  60. });  
  61. // 移動MINJS,MINCSS
  62. gulp.task('min_css_js', function() {  
  63.     return gulp.src(['src/**/*min.js', 'src/**/*min.css'])  
  64.         .pipe(gulp.dest('build'))  
  65.         .pipe(notify({  
  66.             message: 'build min css / js task complete'
  67.         }));  
  68. });  
  69. // 移動字型檔案
  70. gulp.task('fonts', function() {  
  71.     return gulp.src('src/**/*.ttf')  
  72.         .pipe(gulp.dest('build'))  
  73.         .pipe(notify({  
  74.             message: 'fonts task complete'
  75.         }));  
  76. });  
  77. /** 
  78.  * 刪除所有編譯檔案 
  79.  */
  80. gulp.task('clean', function() {  
  81.     return gulp.src(['build'], {  
  82.             read: false
  83.         })  
  84.         .pipe(clean());  
  85. });  
  86. // 預設任務
  87. gulp.task('default', ['clean'], function() {  
  88.     gulp.start(['scripts', 'styles', 'images', 'htmls', 'min_css_js', 'fonts']);  
  89. });  
  90. // 看手
  91. //gulp.task('watch', function() {
  92. // 看守所有.scss檔
  93. //  gulp.watch('src/styles/**/*.scss', ['styles']);

  94. 相關推薦

    gulp的簡單使用（MAC OX 系統）

    1、gulp的安裝首先確保你已經正確安裝了nodejs環境。然後以全域性方式安裝gulp：sudo npm install -global gulp-cli全域性安裝gulp後，還需要在每個要使用gulp的專案中都單獨安裝一次。把目錄切換到你的專案資料夾中，然後在命令列中執行

    Android Studio建立自定義jks簽名檔案（Mac os系統）

    1，開啟你的專案，選擇Build-->Generate singed APK-->到達所需要的介面，如圖所示： 2，到達所需介面如圖所示： 注意：2，顯示的介面的呈現結果是因為我已經建立過jks檔案了，如果你沒有建立過的話就在圖2中箭頭所指的“Create new

    單點登入簡單原理（應用多系統）

    單點登入原理與簡單實現 1、http無狀態協議  web應用採用browser/server架構，http作為通訊協議。http是無狀態協議，瀏覽器的每一次請求，伺服器會獨立處理，不與之前或之後

    無聊的c++期末實驗驗收（簡單的通訊錄管理系統）

    /*簡易電話薄管理系統 本程式純屬應付期末驗收。 程式一共兩個類: Contact_person 描述電話薄中的聯絡人資訊 System 系統程式，包含新建和查詢這兩個功能 其中查詢到聯絡人後，可進行刪除和修改 沒有寫檔案操作，這樣每次都必須重新新建聯絡人

    Django（博客系統）：基於pycharm如何一個django工程下創建多個app

    arm .py 9.png line pycha int 默認 通用 直接 背景：通常我們創建一個django系統時，為了把業務模塊劃分清楚往往會把一個獨立的業務模塊放到一個app中，如果多個獨立的業務模塊就會創建多個app，一般情況下為了更好的管理這些app，會把他們都存

    【轉】如何在win10（64位系統）上安裝apache服務器

    是我 是你 www blank sta install 修改 get 分享 如何在win10（64位系統）上安裝apache服務器 今天裝了Apache服務器，下面是我總結的方法： 一，準備軟件 　　1.64位的apache版本 傳送門：http://www.ap

    微信卡券添加（微擎系統）

    time_t mode del time reat 系統 auto sta load() load()->model(‘coupon‘);load()->classs(‘coupon‘);load()->classs(‘coupon_auto‘);

    Paragon NTFS for Mac 15.0.911破解（Mac OS X）

    位置 div 居住 文件 開始 target 簡單 簡單的 clas Paragon NTFS for Mac 15.0.911破解（Mac OS X）授予整個讀寫可訪問性！在Mac上發布，編輯，復制，移動和刪除NTFS卷上的數據文件！快速，流暢，簡單的使用。安裝，卸載，

    關於應急預案流程設計（網絡系統）的分享

    應急預案流程設計無論各位朋友所處的工作環境如何，我們在信息化建設與信息化維護的道路上，關於業務可持續性計劃保障中都有對應急預案的要求。分享大家一份本人繪制的應急預案的流程圖，大家可根據實際所處的部門崗位結合企業自身業務環境制定屬於自己的應急預案流程，來指導應急事務的處理。 關於應急預案流程設計（網絡系統）的分

    記一個上傳圖片到圖床利器插件的實現（Mac版 開源）

    rwx 興趣 lse 技術分享 clas putextra 直接 put else Mac版上傳圖片利器插件的實現 鑒於寫博客截圖手動上傳到圖床的步驟過於繁瑣，很久之前寫了一個windows版的截圖軟件插件，用於把圖片快速上傳到圖床 重新打包用戶量過億的開源截圖軟件——加入

    幫助小白，JDK的安裝與環境變量配置（Win 10系統）

    ssp 安裝 找到 bsp 窗口 9.png 資源 jre jpg 學習JAVA，必須首先安裝一下JDK(java development kit java開發工具包)，之後再配置環境變量就可以開始使用JAVA了。 一，安裝JDK 1，可以選擇到官網下載最新版本的JDK，地

    設置java.library.path的值（Mac/Linux/Windows）

    令行 ava div blank unix pre windows question ext 說明：網上基本針對這個值的設置分為兩面，Windows派和Linux派，Windows的不說，Linux下只會說設置LD_LIBRARY_PATH即可，但這種方式在Java 8是一

    區塊鏈教程Fabric1.0原始碼分析flogging（Fabric日誌系統）

    　　區塊鏈教程Fabric1.0原始碼分析flogging（Fabric日誌系統），2018年下半年，區塊鏈行業正逐漸褪去發展之初的浮躁、迴歸理性，表面上看相關人才需求與身價似乎正在回落。但事實上，正是初期泡沫的漸退，讓人們更多的關注點放在了區塊鏈真正的技術之上。 Fabric 1.0原始碼筆記 之 flo

    NFS（網路檔案系統）配置（Ubunut/Deepin等系統）

    NFS（網路檔案系統）配置（Ubunut/Deepin等系統） 網路檔案系統（NFS）是一種分散式檔案系統協議，最初由Sun Microsystems於1984年開發，允許客戶端計算機上的使用者通過計算機網路訪問檔案，就像訪問本地儲存一樣。與許多其他協議一樣，NFS建立在開放網路計算遠端

    Web叢集之NFS（網路檔案系統）

    1、什麼是NFSNFS（Network File System）網路檔案系統它的主要功能是通過網路（一般是區域網）讓不同主機系統之間共享檔案或目錄NFS客戶端（應用伺服器，例如web）可以掛載（mount）的方式將NFS伺服器端共享的資料目錄掛載到NFS客戶端本地系統中（某一個掛載點下）從客戶端本地來看，NF

    Linux fsync和fdatasync系統呼叫實現分析（Ext4檔案系統）

    參考：https://blog.csdn.net/luckyapple1028/article/details/61413724 在Linux系統中，對檔案系統上檔案的讀寫一般是通過頁快取（page cache）進行的（DirectIO除外），這樣設計的可以延時磁碟IO的操作，從而可以減少磁碟讀

    Node學習基礎(三) 之檔案的同步和非同步寫入操作（fs_檔案系統）

    下面遇到看不懂的可以去看官方文件。 首先引入fs模組 第二步開啟檔案  官方文件格式是這樣  path 檔案路徑  這裡例子裡是FileHello.txt  如果沒有這個檔案 所以他會自動建立 FileHello.txt

    想要真正瞭解WMS（倉庫管理系統），首先要知道這些

    WMS是Warehouse Management System的縮寫，翻譯即倉庫管理系統。通過WMS系統可以將入庫、出庫、調撥、盤點、批次管理、庫存預警等倉庫內的作業流程進行全方位的管理。應用WMS系統進行倉庫管理可以有效控制庫內的作業流程，對成本進行全面的掌控。同時WMS系統還可以同企業的其他管理

    docker的安裝 （windows 10 系統）

    1，電腦左下角選中windows圖示，滑鼠右鍵-》應用與功能 搜尋：啟用或關閉windows功能，然後點選 2，在1中彈框中找到 Hyper-V，選中前面的選擇框，然後點選右下角“確定”，並重新啟動電腦 3，去docker官網下載安裝檔案： https://store.docke

    坑在creator_to_cocos2dx 外掛（Mac下xcode）

    C++/Lua 引擎支援 Cocos Creator 可以很高效的編輯場景和 UI，同時內建支援 JavaScript，這對 JavaScript 開發者十分友好。可是對於 C++/Lua 開發者，無法直接利用 Creator 高效的介面編輯功能，可能有一些遺憾。 為了去除這種遺