【Gulp】安裝gulp建立bootstrap開發環境

node.js、npm、gulp、gulpfile、package.json、gulp-sass

 發表於 2023-08-11  |  3 分鐘  |  467 個字

【Gulp】安裝gulp建立bootstrap開發環境

node.js、npm、gulp、gulpfile、package.json、gulp-sass

 發表於 2023-08-11  |  3 分鐘  |  467 個字

gulp基本指令

指令 一般 縮寫
安裝 npm install gulp-sass npm i gulp-sass
移除 npm uninstall gulp-sass npm uni gulp-sass
搜尋 npm search gulp-sass npm s gulp-sass
清單 npm list npm ls
查詢版本 npm –version npm -v
初始化 npm init —
初始化(預設) npm init -y —
顯示清單 npm list —
更新套件 npm update gulp-sass —
部署到github上 gulp deploy —

建立gulp環境

1.下載node.js

  • node.js下載網址
    • LTS：長期維護版(較穩定)
    • Current：目前最新版(較為不穩定)

  • 檢查node版本:

1

$ node -v

2.安裝npm套件管理工具

  • 安裝npm:

1

$ npm insatll

  • 檢查npm版本:

1

$ npm -v

3.安裝gulp全域環境(每台電腦僅需執行一次)

  • 安裝Gulp4:

1

$ npm install gulp-cli -g

  • mac安裝Gulp4:

1

$ sudo npm install gulp-cli -g

4.生成package.json

  • 生成自訂package.json:

1

$ npm init

  • 生成預設package.json:

1

$ npm init -y

專案資料夾會自動生成package.json檔

you project
└─── package.json  #記錄各種套件的版本，可以自行指定專案的名稱、版本等資訊

5.在專案安裝gulp套件

  • 安裝gulp套件:

1

$ npm install gulp

  • 檢查gulp套件版本:

1

$ gulp -v

專案資料夾會自動生成node_modules/、package-lock.json

you project
├─── node_modules/  #gulp零件包
├─── 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(): 定義任務名稱
  • gulp.src(): 指定來源文件的路徑
  • .pipe(): 將導入的檔案做處理
  • gulp.dest(): 指定文件輸出目錄
  • gulp.watch(): 監聽指定文件的變動
  • gulp.serise(): 將任務串連

1
2
3
4
5
6
7

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

gulp.task('copyHTML', function(){ //創建'copyHTML'任務
  return gulp
    .src('src/**/*.html') //導入html原始路徑
    .pipe(gulp.dest('dist')) //編譯到'dist'資料夾
});


you project
├─── node_modules/        
├─── src/
│     │
│     └─── index.html     
│
├─── gulpfile.js          # gulp配置檔案
├─── package-lock.json    
└─── package.json

8.在終端機執行指令

1

$ gulp copyHTML

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

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

9.安裝gulp-sass編譯套件和sass(版本1.62.0)

  • 安裝gulp-sass套件:

1

$ npm install gulp-sass

  • 安裝sass套件:

1

$ npm install sass@1.62.0


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

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('dist')) 
});

gulp.task('sass', function(){
  return gulp
    .src('src/scss/**/*.*') //所有在scss子資料夾中的所有檔
    .pipe(
      sass().on('error',sass.logError) //編譯錯誤時，顯示提示訊息
    ) 
    .pipe(gulp.dest('dist/css')) ////編譯到'dist'底下的'css'資料夾
});

10.安裝bootstrap套件(版本4.6.2)

1

$ npm install bootstrap@4.6.2

11.建立all.scss

  • 在src資料夾裡新增css資料夾，然後建立all.scss

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

12.將bootstrap的變數檔複製到本地

  • 將node_modules/bootstrap/scss/_variables.scss複製到src/scss/helpers

you project
├─── node_modules/        
├─── dist/
│     │
│     └─── index.html    
│ 
├─── src/
│     ├─── scss/
│     │     │
│     │     ├─── helpers
│     │     │     │
│     │     │     └───_variable.scss  #從node_modules複製過來的
│     │     │
│     │     ├─── _custom.scss  #自定義樣式
│     │     │
│     │     └─── all.scss
│     │
│     └─── index.html    
│
├─── gulpfile.js          
├─── package-lock.json    
└─── package.json

_variable.scss有底線的檔案不會被編譯，但可以被合併

13.打開all.scss檔引用boostrap

1
2
3
4
5
6
7
8
9

@import "../../node_modules/bootstrap/scss/functions"; //bootstrap，設置文字顏色、背景顏色、邊框等樣式

@import "./helpers/variables"; //本地檔案，可修改bootstrap常用變數

@import "../../node_modules/bootstrap/scss/mixins"; //bootstrap，處理顏色、尺寸、間距可重複使用函數

@import '../../node_modules/bootstrap/scss/bootstrap.scss'; //bootstrap，元件檔案

@import 'custom'; //本地檔案，編寫用

14.回到index.html裡引用css

1
2
3

<head>
  <link rel="stylesheet" href="css/all.css">
</head>

15.回到gulpfile.js添加任務清單

1

gulp.task('default', gulp.series('copyHTML','sass'));


1

$ gulp

只要執行'gulp'會接續執行'copyHTML'、'sass'任務

若遇到cannot find module “nan”

  1. 清除npm緩存

1

$ npm cache clean --force

  1. 在根目錄下運行安裝nan模組

1

$ npm install nan --save
gulp 

其他相關