gulp快速入門&初體驗

時間 2019-12-05

原文原文鏈接

目錄css

gulp快速入門&初體驗

前言

一句話先html

gulp 是一個能夠簡單和自動化"管理"前端文件的構建工具

先說我之前的主要工做，我主要是作遊戲服務端的，用c++/python，因此我對東西的概念理解不免要套到本身作過的技術上，因此有時候有些技術說法對不上，還請看到這篇文章的人指正指正。前端

gulp快速入門&初體驗

幹嗎的

簡單的說node

前段構建工具
自動化 管理前端代碼

gulp 的做用就是幫你處理前端文件，什麼 js 什麼 html 什麼css 還有json等等前端文件。
麻溜的！自動的！把本該由你合併，壓縮，重命名，檢查，編譯等等一系列操勞的動做，一個命令，一條龍的作齊咯！python

爲啥用

顯著的優勢c++

顯著提升前段工做效率
學習簡單
使用簡單
安裝簡單
在 node 項目裏質量偏高
插件齊全

咋安裝

要在項目裏面使用 gulp 須要安裝兩次, 先全局安裝在本機上，再安裝在項目裏面程序員

不想看我嘮叨，想直接安裝的直接看總結。npm

跳轉到總結json

安裝 gulp 前的準備

安裝 node&npm。教程不少，我給一個還不錯的
Node.js 安裝配置gulp

檢查 node 有沒有安裝成功

node --version

檢查 npm 安裝是否成功

npm -v
若是有版本號顯出來就是安裝成功了

全局安裝

npm下
先在機器上全局安裝
npm install -g gulp
-g 是指全局安裝

獲得結果

經過查詢版本看看安裝是否是成功，若是出現了版本號，那就是成功了

項目安裝

gulp 畢竟是個 node 項目，因此你的項目中 node 祖傳的 package.json仍是應有的。

我知道也有和同樣的node&前端新手，因此就把 package.json 放上來咯。
package.json長的啥樣呢，就是下面這個樣子

{
  "name": "neptune",
  "version": "1.0.0",
  "description": "nothing",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "author": "neptune",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-less": "^3.3.0"
  }
}

不要手動去填，node 祖傳的神功大法，咱們這是個自動化工具
部署 node 就一發
npm init
自動幫你寫 package.json的

而後，項目裏面安裝 gulp
npm install gulp -save-dev
安裝完了看看，你的項目package.json 多了

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-less": "^3.3.0"
  }

個人項目裏面還有一個 gulp-less 插件，也是安裝成功了就天然跑進個人依賴裏面了。

有的小夥伴就看到本身的工程裏面多了個 node_modules，對，那就是工程中安裝 gulp 後生成的，你裝了插件，也會在這裏面。好比我安裝的這個 gulp-less 插件.

gulp目錄下多了 package.json, 這個是 gulp 本身的. 上面咱們 mpn init 是在本身的工程目錄裏面執行的。生成的 package.json 也是咱們工程本身的, 就是用了 node,因此都上了node 的賊船的意思. 每一個工程都是有本身的 package.json的。你安裝一個 gulp-less ，看看裏面也是有一個 package.json的

開始編寫自動化流程

在項目裏面建立一個名爲 gulpfile.js的文件
這個文件在我看來，意義就和在c++項目裏建立了一個 main.cpp 或者 python中main.py ,前端中 index.html同樣。

而裏面的task就至關於一個個準備好被調用的函數， default就至關於main函數同樣，是系統默認的入口函數

總結

簡單來講，你在項目安裝 gulp 就須要作四個事情
1 安裝 node&npm
Node.js 安裝配置
2 全局安裝 gulp
npm install -g gulp
3 工程初始化 and 安轉工程gulp
npm init
npm install gulp -save-dev
4 在你工程裏面建立一個名爲 gulpfile.js 的文件, 開始寫你的 gulp 自動化流程

hello world

按照程序員的規定，上一門新的語言技術，先要來發 hello world

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

var gulp = require('gulp');
這句很簡單易懂，就是導入 XX 包。
相似於
c/c++ 上的 #include "xxx"
python 上的 import xx
xx 語言上的 xx 程序員都懂的

gulp.task 就至關於定義函數的關鍵字

default 就至關與別的程序裏面的 main 函數

function(){
    console.log('hello world');

就是一個匿名函數。是個被用爛的概念，就是一個觸發回調，程序員都懂

咱們很容易就明白了。這個其實就是在 js 這個爸爸語言下實現的子語言。

咱們在腦殼裏面構想一下。

程序運行起來，gulp把一大推task，放在一個 blueprint 上面。
系統在 blueprint 上找到入口函數，也就是 default 函數(就至關於 main 函數)
而後 gulp 的小火車就跑起來了。

簡單用

爲了明白怎麼寫 gulp ，咱們要按部就班的來添加功能，我對上面的 helloworld 逐步的添加功能

var gulp = require('gulp');
gulp.task('_task_one', function () {
    console.log('HI, I am task one');
});
gulp.task('default',['_task_one'],function(){
    console.log('hello world');
});

依賴函數

上面看到咱們的 default的 task 多了一個參數，
這個參數咱們能夠稱呼爲依賴函數。
什麼意思呢，就是，咱們要執行 default 函數前，先的把依賴函數執行咯，咱們這個函數依賴的是_task_one函數,因此咱們在工程下輸入 gulp命令，執行起來會獲得。

[21:22:34] Using gulpfile ~/WebstormProjects/untitled/gulpfile.js
[21:22:34] Starting '_task_one'...
HI, I am task one
[21:22:34] Finished '_task_one' after 129 μs
[21:22:34] Starting 'default'...
hello world
[21:22:34] Finished 'default' after 57 μs

程序就是先執行完  _task_one 再跑的hello world 的。

好了有基礎概念了，咱們就開始幹活把。複雜的不能作，那就簡單的。要按部就班啊！

咱們合併點文件把。畢竟這對前端來講，是再正常不過的了，有時候爲了減小請求次數，減小這些沒必要要網絡損耗，咱們把這些零零碎碎的東西擠在一塊兒。一次請求一個合併的 js 資源，至關於之前的幾個 js 資源

gulp 插件使用

安裝插件

上面我有個 less 的插件，他的安裝和咱們安裝 gulp 同樣簡單
好比 less 就是
npm install gulp-less
那麼咱們的合併插件也是
npm install --save-dev gulp-concat
很是簡單。
咱們去咱們的 package.json裏面看看，能夠看到依賴項多了咱們安裝的"gulp-concat": "^2.6.1",

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-less": "^3.3.0"
  }

咱們用合併插件寫一個處理

var gulp = require('gulp'),
    concat = require('gulp-concat');     // 導入咱們的合併插件

gulp.task('default',function(){
    gulp.src('testjs/*.js').             // 要處理的一堆 js 文件
    pipe(concat('all.js')).              // 用合併插件處理
    pipe(gulp.dest('dist/'));            // 把處理後的東西放進目標目錄裏面
});

個人 testjs 目錄下有個 test1.js 還有一個 test2.js

文件內容是這樣的

好如今執行咱們的 gulp 命令

生成了一個 all.js，裏面是咱們兩個文件的合併

確定有人疑惑了

var gulp = require('gulp'),
    concat = require('gulp-concat');     // 導入咱們的合併插件

gulp.task('default',function(){
    gulp.src('testjs/*.js').             // 要處理的一堆 js 文件
    pipe(concat('all.js')).              // 用合併插件處理
    pipe(gulp.dest('dist/'));            // 把處理後的東西放進目標目錄裏面
});

看到這裏你必定會疑惑gulp.src 還有 gulp.dest 是什麼。你已經理解了gulp 的task 的運做方式，那麼你去找找資料理解下gulp.dest和gulp.src 也就是分分鐘的事情，咱們程序員，就是有力量！力量就來自咱們的學習方式。

這裏我只說下 .pipe是個啥意思。
pipe 很好理解，就是類 unix 系統上常用的管道麼。
好比

ls-l |grep "某某某" 基本上是咱們用的最多的命令了，若是你會類 unix 系統。你立刻就明白了。這個 pipe 就至關於 | 這個管道符號

若是不瞭解管道咋用的，我也簡單的給說下。就至關於把 pipe 命令前面程序輸出 output 放在一個文件裏面，再給 pipe 後面的那個命令當作輸入 input 來用，就是說gulp.src('testjs/*.js')這個命令的輸出是我 testjs 目錄下的全部的 js 文件吧，pipe就把這些 js 所有放在一個文件裏面，運行到 pipe(concat('all.js')). 這句的時候，咱們的 concat('all.js') 就從那個文件（其實就是一個匿名管道）裏面讀取（就是 input的過程）全部的 js 文件名字，當作本身input，而後合併成一個 all.js，這是一種很是常見的進程間通信！還不會的要趕快學會啊。！

好了，這個也很是簡單。很快咱們就能觸類旁通了吧
咱們已經合併了js 了，那還有性能優化的空間啊。對咱們能夠壓縮他！

開始觸類旁通了！

咱們按照上面的步奏

找到咱們須要的插件並安裝
npm install --save-dev gulp-uglify
添加壓縮語句到 gulpfile.js 的代碼中去

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify');

gulp.task('default',function(){
    gulp.src('testjs/*.js').
    pipe(concat('all.js')).
    pipe(uglify()).
    pipe(gulp.dest('dist/'));
});