gulp基本指令

建立gulp環境

1. 下載node.js
   • LTS：長期維護版(較穩定)
   • Current：目前最新版(較為不穩定)
   • node -v 檢查版本

2. 安裝npm
   • npm insatll
   • npm -v 檢查版本

3. 安裝全域gulp(每台電腦僅需執行一次)
   • npm install gulp -g Gulp3版
   • npm install gulp-cli -g Gulp4版
   • sudo npm install gulp-cli -g mac安裝

4. 生成package.json
   • npm init 自訂package.json
   • npm init -y 預設package.json

you project
└─── package.json         

5. 在專案安裝gulp
   • npm install gulp npm5版本
   • npm install gulp --save npm5以前版本
   • gulp -v 檢查版本

you project
├─── node_modules/    
├─── package-lock.json    
└─── package.json         

6. 將index.html新增在src資料夾裡

you project
├─── node_modules/        
├─── src/
│     │
│     └─── index.html    
│ 
├─── package-lock.json    
└─── package.json        

7. 在根目錄手動新增gulpfile.js
   • gulp.task()：創建名為 copyFile 的任務(水管名稱)
   • gulp.src()：導入 index.html 這一個檔案(水的來源)
   • .pipe()：以 gulp.src() 導入的檔案需做的處理(截獲水源所做的處理)
   • gulp.dest()：檔案輸出的目錄(水該從何處流出)

1
2
3
4
5
6
7
8

const gulp = require('gulp'); //載入gulp套件

gulp.task('copyHTML', function(){ 
  return gulp
    .src('./src/*.html') //html原始路徑
    .pipe(gulp.dest('./public')) //html編譯完成路徑
    .pipe(browserSync.stream()); //注入更改內容
});

you project
├─── node_modules/        # gulp零件包
├─── src/
│     │
│     └─── index.html     
│
├─── gulpfile.js          # gulp配置檔案
├─── package-lock.json    # gulp安裝紀錄
└─── package.json         # gulp安裝版本

8. 執行gulp

you project
├─── node_modules/        
├─── public/
│     │
│     └─── index.html    # HTML檔案(複製出來的)
│ 
├─── src/
│     │
│     └─── index.html    # HTML檔案(複製用)
│
├─── gulpfile.js          
├─── package-lock.json    
└─── package.json       

執行後public資料夾內會自動複製出一個index.html

9. 安裝sass編譯套件
   1. npm install gulp-sass
   2. 手動在src資料夾裡再新增css資料夾，然後建立all.scss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

const gulp = require('gulp'); 
const sass = require('gulp-sass')(require('sass')); //載入gulp-sass套件

gulp.task('copyHTML', function(){ 
  return gulp
    .src('./src/*.html') 
    .pipe(gulp.dest('./public')) 
    .pipe(browserSync.stream()); 
});

gulp.task('sass', function(){
  return gulp
    .src(['./src/css/**/*.scss','./src/css/**/*.sass']) //scss原始路徑
    .pipe(sass({ 
      outputStyle: 'compressed', //編譯後壓縮
      includePaths: ['./node_modules/bootstrap/scss'] //引用nodeBS4
    }).on('error',sass.logError)) //使用gulp-sass進行編譯
    .pipe(gulp.dest('./public/css')) //css編譯完成路徑
    .pipe(browserSync.stream()); //注入更改內容
});

you project
├─── node_modules/        
├─── public/
│     │
│     └─── index.html    
│ 
├─── src/
│     ├─── css/
│     │     │
│     │     └─── all.scss
│     │
│     └─── index.html    
│
├─── gulpfile.js          
├─── package-lock.json    
└─── package.json         

10. 執行gulp-sass生成all.css
    • 在index.html裡的新增<link rel="stylesheet" href="css/all.css">

you project
├─── node_modules/    
├─── public/
│     │
│     ├─── css/
│     │     └─── all.css # css樣式(編譯後給index用)
│     │  
│     └─── index.html    
│ 
├─── src/
│     ├─── css/
│     │     │
│     │     └─── all.scss # css樣式(編譯前)
│     │
│     └─── index.html    
│
├─── gulpfile.js          
├─── package-lock.json    
└─── package.json      

11. 安裝browser-sync自動監聽渲染
    • npm install browser-sync

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

const gulp = require('gulp'); 
const sass = require('gulp-sass')(require('sass')); 
const browserSync = require('browser-sync').create(); //載入瀏覽器套件

gulp.task('copyHTML', function(){ 
  return gulp
    .src('./src/*.html') 
    .pipe(gulp.dest('./public')) 
    .pipe(browserSync.stream()); 
});

gulp.task('sass', function(){
  return gulp
    .src(['./src/css/**/*.scss','./src/css/**/*.sass']) 
    .pipe(sass({ 
      outputStyle: 'compressed', 
      includePaths: ['./node_modules/bootstrap/scss']
    }).on('error',sass.logError)) 
    .pipe(gulp.dest('./public/css')) 
    .pipe(browserSync.stream()); 
});

gulp.task('watch', function(){ 
  browserSync.init({
    server:{ 
      baseDir:'./public'
    },
    port: 3000, //伺服器端口號碼
    reloadDelay: 0, //重新加載時間(毫秒)，預設0
  });
  gulp.watch('./src/*.html',gulp.series('copyHTML'));
  gulp.watch('./src/css/**/*.scss', gulp.series('sass'));
});

gulp.task('default', gulp.series('sass','copyHTML','watch')); //將任務串連執行

12. 安裝bootstrap4.6.2版本
    1. npm install bootstrap@4.6.2
    2. 從node_modules資料夾裡的bootstrap複製一份_variables.scss到helpers資料夾裡
    3. 在src裡的css資料夾新增_custom.scss

you project
├─── node_modules/  
├─── public/
│     │
│     ├─── css/
│     │     └─── all.css 
│     │  
│     └─── index.html    
│     
├─── src/
│     ├─── css/
│     │     ├─── helpers/
│     │     │     └─── _variables.scss # 可用來自定義bootstrap用
│     │     │  
│     │     ├────_custom.scss # 客製化樣式用
│     │     │  
│     │     └─── all.scss
│     │       
│     └─── index.html   
│      
├─── gulpfile.js 
├─── package-lock.json    
└─── package.json      

13. 在引用bootstrap到all.scss

1
2
3
4
5

@import "functions"; /*引用BS4*/
@import "helpers/variables"; /*引用helpers資料夾的*/
@import "mixins"; /*引用BS4*/
@import '../../node_modules/bootstrap/scss/bootstrap.scss';
@import "custom"; /*自定義樣式*/

14. 執行gulp自動開啟瀏覽器
    • 若遇到"cannot find module ’nan'"
      1. npm cache clean --force 清除npm緩存
      2. npm install nan --save 在根目錄下運行安裝nan模組

其他相關

• 【Gulp】最終gulp完整final版
• 【Gulp】nunjucks網頁模版
• 【Gulp】壓縮圖片並優化
• 【Gulp】自動刪除上一次的編譯結果
• 【Gulp】開啟本地端伺服器瀏覽網站