2. 程式人生 > >gulp菜鳥級零基礎詳細教程

gulp菜鳥級零基礎詳細教程

阿新 • • 發佈：2018-12-10

本文轉載自：https://www.cnblogs.com/weichao1996/p/8620652.html

相信大家一定聽說過gulp或者webpack，grunt等前端構建工具。gulp是前端開發過程中對程式碼進行構建的工具，是自動化專案的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重複的任務能夠使用正確的工具自動完成；使用它，我們不僅可以很愉快的編寫程式碼，而且大大提高我們的工作效率。 它能自動化地完成javascript/coffee/sass/less/html/image/css 等檔案的的測試、檢查、合併、壓縮、格式化、瀏覽器自動重新整理、部署檔案生成，並監聽檔案在改動後重復指定的這些步驟。

言歸正傳這篇是gulp菜鳥級別的教程。大佬們覺得太簡單了請不要噴我，畢竟我也是一個菜鳥。寫下這篇筆記，不是為了證明什麼，就是方便我以後忘了時候回顧看一下。好，廢話不多說 下面開始了
1、node環境搭建

想要使用gulp，首先你得在你得電腦裡面安裝node.js，因為gulp是基於Nodejs的自動任務執行器。這個我就不詳細介紹怎麼安裝了吧，網上教程一搜一大把。相信正在使用gulp的朋友，也知道怎麼安裝node.js

2、使用命令列工具

開發的環境安裝好了以後，接下來就是通過命令列來下載相應開發的模組包。什麼是命令列？命令列在OSX是終端（Terminal），在windows是命令提示符（Command Prompt）windows系統下　　WIN+R開啟命令列工具，在裡面輸入cmd,回車。如下圖：

3、選裝cnpm（淘寶映象）

因為npm安裝外掛是從國外伺服器下載，受網路影響大，可能出現異常.

3.1、官方網址：http://npm.taobao.org；

3.2、安裝：命令提示符執行npm install cnpm -g --registry=https://registry.npm.taobao.org；  注意：安裝完後最好檢視其版本號cnpm -v或關閉命令提示符重寫開啟，安裝完直接使用有可能會出現錯誤；

注：cnpm跟npm用法完全一致，只是在執行命令時將npm改為cnpm（以下操作將以cnpm代替npm）。

4、全域性安裝gulp

4.1

、說明：全域性安裝gulp目的是為了通過她執行gulp任務；

4.2、安裝：命令提示符執行

1

cnpm install gulp -g

4.3、檢視是否正確安裝：命令提示符執行gulp -v，出現版本號即為正確安裝。

4.4、依賴安裝： npm install gulp --save-dev，這個可以在你的當前的專案目錄下，開啟命令列工具進行依賴安裝。下面我們會在介紹packge.json檔案當中介紹為什麼需要依賴安裝

5、新建package.json檔案

5.1、package.json檔案是基於node.js專案必不可少的配置檔案，它是存放在專案根目錄的普通json檔案，裡面有你各個依賴安裝模組外掛的版本資訊，以至於你能清楚看到你安裝了那些模組。如下圖我安裝很多模組以後的json檔案。

5.2、配置packge.json檔案

1

npm init    //初始化packge.json檔案

 注意：初始化packge.json檔案必須在你專案的根目錄下開啟命令列工具，執行初始化程式碼。（怎麼在當前目錄下開啟命令列工具？shift+右鍵。當然，win10系統的命令列工具被微軟改版了，叫Powershell，作用還是一樣）

6、新建gulpfile.js檔案

既然我們要使用gulp,我們就需要建立一個gulpfile.js檔案，gulpfile.js是gulp專案的配置檔案，是位於專案根目錄的普通js檔案。gulp的開發程式碼都寫在這個裡面的

js程式碼：

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

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

const  gulp=require('gulp');    //引用gulp

const  del=require('del');      //引用gulp刪除外掛

const  uglify=require('gulp-uglify');　　//引用壓縮Js外掛

const  css=require('gulp-clean-css');　　//gulp壓縮css檔案

const  rename = require("gulp-rename");　　//引用重新命名外掛

 

gulp.task('hello',function () {     //定義一個hello任務

    console.log('hello')

});

 

//task()：定義任務

//src():原始檔

// pipe():管道流，接通源標頭檔案與目標檔案的輸出

// dest():輸出檔案的目的地

// watch():監視檔案

//事例：

// 1、複製單個檔案

gulp.task('copyHtml',function () {

    return gulp.src('./src/public/login.html').pipe(gulp.dest("dist/public"))

});

 

// 2、複製多個檔案

gulp.task('copyAllHtml',function () {

    return gulp.src("./src/public/*.html").pipe(gulp.dest('dist/public'));

});

 

// 3、複製指定檔案

// [指定的檔案已，指定的檔案2]

gulp.task('copy2Js',function () {

    return gulp.src(["./src/public/js/ajax.js",'dist/public/js/classPage.js'])

    .pipe(gulp.dest("dist/public/js"))

});

 

// 4、某個檔案

// ！排隊的檔案

gulp.task("copyNoJs",function () {

    return gulp.src(['./src/public/js/*.js','!./src/public/js/Classroom.js'])

        .pipe(gulp.dest('dist/public/js'))

});

 

// 5、複製多個字尾名的圖片

// {選項一，選項二}

gulp.task("copyImage",function () {

    return gulp.src('./src/public/img/*.{png,jpg,bmp,jpeg,gif}')

        .pipe(gulp.dest('dist/public/img'))

});

 

// 6、執行多個任務

// gulp.task('任務名稱',[任務依賴的模組],回撥函式)

// 依賴任務之間沒有順序之分，非同步執行

// 依賴任務之間完成後，在執行當前的回撥函式

gulp.task('build',['copyAllHtml','copyNoJs','copyImage'],function () {

    console.log('編譯成功')

});

 

// 7、Watch:監視檔案的變化

gulp.task('myWatch',function () {

    gulp.watch('./src/public/login.html',['build'])

});

 

// 8、刪除檔案

gulp.task("del",function () {

    // del('./dist/public/img/*.{jpg,png,jepg,gif}')

    // *：所有檔案

    // **：所有資料夾

    del(['./dist/public/js/*']);

    del(['./dist/**/*']);

});

 

gulp.task('default',function () {

    gulp.start('serve')

 

});

 

// 9、壓縮js檔案

gulp.task('ysjs',function(){

    return gulp.src('./src/public/js/*.js')

    .pipe(uglify())

    .pipe(gulp.dest('./src/public/js'));

 

 

});

 

//10、 新增監聽

gulp.task('watch_js',function(){

    return gulp.watch('./src/public/js/*.js',['ysjs'])

 

});

 

//11、壓縮css檔案

gulp.task('css',function () {

    return gulp.src('./src/public/sass/*.css')

        .pipe(css())

        .pipe(gulp.dest('./src/public/sass'))

});

//新增監聽

gulp.task('jtCss',function () {

    return gulp.watch('./src/public/sass/*.css',['css'])

});

//12、重新命名css檔案

gulp.task('reName',function () {

    return gulp.src('./src/public/sass/*.css')

        .pipe(rename({suffix: '.css'}))

        .pipe(css())

        .pipe(gulp.dest('./src/public/sass'))

});　　

7、執行gulp

7.1、說明：命令提示符執行gulp 任務名稱；

7.2、編譯less：命令提示符執行gulp testLess；

7.3、當執行gulp default或gulp將會呼叫default任務裡的所有任務[‘testLess’,’elseTask’]

 

8、使用webstorm執行gulp任務

9、使用vscode執行gulp任務

vcode是微軟出的一款輕量級程式碼編輯器，免費而且功能強大，對JavaScript和NodeJS的支援非常好，自帶很多功能，例如程式碼格式化，程式碼智慧提示補全、Emmet外掛等。

在vscode上我們想要簡單的執行gulp任務，我們可以下載一款名為“Gulp Tasks ”的外掛。安裝好外掛以後，我們將專案檔案新增到工作區當中，然後開啟gulpfile.js檔案。

在左下角我們可以啟動任務

10、總結：

10.1、安裝nodejs；

10.2、新建package.json檔案；

10.3、全域性和本地依賴安裝gulp；

10.4、安裝gulp外掛；

10.5、新建gulpfile.js檔案；

10.6、通過命令提示符或者開發工具執行gulp任務。

我專案中用到的gulpfile.js檔案內容：

var gulp = require('gulp')
var sass = require('gulp-sass')
var minifycss = require('gulp-minify-css')
var imagemin = require('gulp-imagemin')
var fileinclude = require('gulp-file-include')

gulp.task('imagemin', function () {
  gulp.src('./src/image/*.{png,jpg,gif,ico}')
    .pipe(imagemin({
      optimizationLevel: 5, //型別：Number  預設：3  取值範圍：0-7（優化等級）
      // progressive: true, //型別：Boolean 預設：false 無失真壓縮jpg圖片
      // interlaced: true, //型別：Boolean 預設：false 隔行掃描gif進行渲染
      multipass: true //型別：Boolean 預設：false 多次優化svg直到完全優化
    }))
    .pipe(gulp.dest('./image'));
})


gulp.task('scss', function () {
  gulp.src('./src/scss/**/*.scss')
    .pipe(sass())
    .pipe(minifycss())
    .pipe(gulp.dest('./css'))
})


gulp.task('include', function () {
  return gulp.src(
    [
      './src/views/*.html'
    ]
  )
//此處是用於給頁面新增頭部和尾部用的
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./views'))
})


gulp.task('watchcss', function () {
  gulp.watch(['./src/scss/**/*.scss'], ['scss'])
})

gulp.task('watchjs', function () {
  gulp.watch(['./src/js/*.js'], ['js'])
})

gulp.task('watchhtml', function () {
  gulp.watch(['./src/views/*.html','./src/components/*.html'], ['include'])
})

gulp.task('js', function () {
  gulp.src('./src/js/*.js')
    .pipe(gulp.dest('./js'))
})

gulp.task('default', function () {
  gulp.start(['scss', 'include', 'js', 'watchcss', 'watchjs', 'watchhtml'])
})

 注意到：

.pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))

對應到頁面是這樣的：

@@include('../components/_header.html',{"active":9})
<div class="enterprise-banner">
</div>
<div class="detail inner-container delta" data-bind="if:model.info">
  <div class="h60"></div>
  <div class="logo tc relative">
    <div class="line absolute"></div>
    <img class="relative" data-bind="attr:{src:imgPath_js(model.info().companyLogo)}">
  </div>
  <h2 class="enterprise-tit tc" data-bind="text:model.info().companyName||'企業名稱'"></h2>
  <div class="detail-content mt30 ql-editor" data-bind="html:model.info().profile">
  </div>
</div>
@@include('../components/_footer.html')
<script src="../js/companyDetail.js"></script>
</body>

</html>

沒錯，就是通過gulp實現靜態頁面新增公共頭部和尾部的（純HTML無法include外部公共頭部和尾部），比較實用哦~

相關推薦

gulp菜鳥級零基礎詳細教程

本文轉載自：https://www.cnblogs.com/weichao1996/p/8620652.html 相信大家一定聽說過gulp或者webpack，grunt等前端構建工具。gulp是前端開發過程中對程式碼進行構建的工具，是自動化專案的構建利器；她不僅能對網站資源進行優化，而且在開發

nodejs零基礎詳細教程1：安裝+基礎概念

img res 安裝過程 pkg 實時 linkedin 圖標 過程 好的 第一章 建議學習時間2小時 課程共10章 學習方式：詳細閱讀，並手動實現相關代碼 學習目標：此教程將教會大家 安裝Node、搭建服務器、express、mysql、mongodb、編寫後臺業務邏輯

node.js零基礎詳細教程(4)：node.js事件機制、node異步IO操作

nod server nbsp node i++ 兩個 con 錯誤 定時器 第四章 建議學習時間3小時 課程共10章 學習方式：詳細閱讀，並手動實現相關代碼 學習目標：此教程將教會大家 安裝Node、搭建服務器、express、mysql、mongodb、編寫後臺業務邏

node.js零基礎詳細教程(5)：express 、 路由

講解 打開 .com json -1 mod 設置圖 後臺 var 第五章 建議學習時間4小時 課程共10章 學習方式：詳細閱讀，並手動實現相關代碼 學習目標：此教程將教會大家 安裝Node、搭建服務器、express、mysql、mongodb、編寫後臺業務邏輯、編

node.js零基礎詳細教程(6)：mongodb數據庫操作

insert lte 數組 執行 cmd命令行 tables 頁面 down 切換 第六章 建議學習時間4小時 課程共10章 學習方式：詳細閱讀，並手動實現相關代碼 學習目標：此教程將教會大家 安裝Node、搭建服務器、express、mysql、mongodb、編寫

node.js零基礎詳細教程(7)：node.js操作mongodb，及操作方法的封裝

font 裏的 ges 格式 上進 ins 方法 回調函數 方式 第七章 建議學習時間4小時 課程共10章 學習方式：詳細閱讀，並手動實現相關代碼 學習目標：此教程將教會大家 安裝Node、搭建服務器、express、mysql、mongodb、編寫後臺業務邏輯、編寫接口

Java自動化測試框架-01 - TestNG之入門篇 - 大佬的雞肋，菜鳥的盛宴（詳細教程）

TestNG是什麼? TestNG按照官方的定義： TestNG是一個測試框架，其靈感來自JUnit和NUnit，但引入了一些新的功能，使其功能更強大，使用更方便。 TestNG是一個開源自動化測試框架;TestNG表示下一代(Next Generation的首字母)。 TestNG類似於JUnit

藍橋杯 基礎訓練 完美的代價-----------------------------C語言——菜鳥級

/*問題描述 　　迴文串，是一種特殊的字串，它從左往右讀和從右往左讀是一樣的。 小龍龍認為迴文串才是完美的。現在給你一個串，它不一定是迴文的， 請你計算最少的交換次數使得該串變成一個完美的迴文串。

手把手教你入門MySQL零基礎入門教程！

手把手教你入門MySQL零基礎入門教程！ 目前MySQL已經成為最為流行的開源關系數據庫系統，並且一步一步地占領了原有商業數據庫的市場。可以看到Google、Facebook、Yahoo、網易、久遊等大公司都在使用MySQL數據庫，甚至將其作為核心應用的數據庫系統。而My

Web前端丨Web開發丨Web代碼 html+css零基礎入門教程

strong 大型 打字 添加 瀏覽器 lock 效果 格式化文本 size 什麽是HTML文本格式化 HTML 可定義很多供格式化輸出的元素，比如粗體和斜體字。 如下代碼： <p>TThis text is normal</p><b>

QT零基礎入門教程

原地址：http://www.devbean.NET/2012/08/qt-study-road-2-catelog/   本教程以qt5為主，部分地方會涉及qt4。據說非常適合qt5入門學習，最近正在參考，轉載希望更多人看到，也為自己以後找到本資料提供方便。  

photoshop零基礎入門教程——辦公資源網

Ps是經常用到的辦公工具，各行各業都會接觸，可是使用Ps時各種各樣的麻煩事也是讓人頭疼得不行，下面為大家準備了ps零基礎入門教程分享，快來看看~ 本教程由Photoshop研發人員徐言武老師親身教授，每一個工具的使用，每一張圖的編輯都一步一步慢慢講解。課程從Photoshop CC的安裝講起，再到工具

Flink 零基礎實戰教程：如何計算實時熱門商品

原文：http://wuchong.me/blog/2018/11/07/use-flink-calculate-hot-items/ 本文會一步步地帶領你實現一個更復雜的 Flink 應用程式：實時熱門商品。在開始本文前我們建議你先實踐一遍上篇文章，因為本文會沿用上文的 my-fli

Spring MVC 4.2.4 文件實踐（一）--- 菜鳥從零開始學系列

1 前言 本文後續將開啟一個系列，順著作者學習 Spring MVC 文件的腳步，從零開始搭建一個基於 Spring MVC 的 web 應用，並且根據 Spring MVC 的文件內容，選擇現有的，用的比較多的，實現性比較好的特性，基於其程式碼實現，來講解其原始碼和背後的原理，這既是對自己在 Spring

自學-CAD零基礎視訊教程網站

CAD是一款專業設計應用軟體，主要用在環境藝術設計，土木工程，水利工程等專業，用來做效果圖、三維設計、平面佈置規劃設計。問題來了，cad學習起來難嗎？對於初學當然是很困難的，操作上難度不大，但很麻煩，需要足夠的耐心和細心，平時需要多練習，熟練操作各種快捷方式。還是和小編一樣是新手小白的同學們可以看看下面為大家

華中紅客基地菜鳥學習免殺系列教程 筆記

第一集 特徵碼定位 MYCCL 分塊數量 一般50-100，分塊數量越大，電腦負荷越大，但迴圈次數越少，手動操作工作量越小 開始位置 PE檔案節表資訊中CODE節 起始位置 分段長度 PE檔案節表資訊中CODE節 物理長度 選擇 複合定位 點選生成         

Egret 菜鳥級使用手冊--第二天

################新的一天，我還是大佬 今天載入個英雄，先在GameScene裡搞一個英雄出來，然後再建立一個Hreo類  接下來又一個新的API egret.TouchEvent.TOUCH_BEGIN ：使用者第一次觸控啟用觸控的裝置時 egret.TouchE

金明的預算（01揹包問題）---------Five-菜鳥級

                                                             金明的預算 問題描述 　　金明今天很開心，家裡購置的新房就要領鑰匙了，

[html5/Css3] HTML5與CSS3實現動態網頁視訊教程 H5零基礎實戰教程

步驟1: 初識HTML5 本階段內容主要涵蓋HTML5新增、刪除標籤、標籤屬性變化以及HTML5佈局知識。通過本階段學習，大家可以運用HTML5標籤輕鬆實現網頁音樂播放器和視訊播放器，熟練運用HTML5的語義化標籤進行靜態網頁的開發。 第1課 HTML5標籤變

藍橋杯 K-進位制數（簡潔 圖解）----------Five-菜鳥級

                                        &n