我的Gulp入門合集
gulp詳細入門教程
簡介:
gulp是前端開發過程中對程式碼進行構建的工具,是自動化專案的構建利器;她不僅能對網站資源進行優化,而且在開發過程中很多重複的任務能夠使用正確的工具自動完成;使用她,我們不僅可以很愉快的編寫程式碼,而且大大提高我們的工作效率。
gulp是基於Nodejs的自動任務執行器, 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等檔案的的測試、檢查、合併、壓縮、格式化、瀏覽器自動重新整理、部署檔案生成,並監聽檔案在改動後重復指定的這些步驟。在實現上,她借鑑了Unix作業系統的管道(pipe)思想,前一級的輸出,直接變成後一級的輸入,使得在操作上非常簡單。通過本文,我們將學習如何使用Gulp來改變開發流程,從而使開發更加快速高效。
gulp 和 grunt 非常類似,但相比於 grunt 的頻繁 IO 操作,gulp 的流操作,能更快地更便捷地完成構建工作。
本示例以gulp-less為例(將less編譯成css的gulp外掛)展示gulp的常規用法,只要我們學會使用一個gulp外掛後,其他外掛就差看看其幫助文件了。讓我們一起來學習gulp吧! ^_^
gulp常用地址:
目錄:
在學習前,先談談大致使用gulp的步驟,給讀者以初步的認識。首先當然是安裝nodejs,通過nodejs的npm全域性安裝和專案安裝gulp,其次在專案裡安裝所需要的gulp外掛,然後新建gulp的配置檔案gulpfile.js並寫好配置資訊(定義gulp任務),最後通過命令提示符執行gulp任務即可。
安裝nodejs -> 全域性安裝gulp -> 專案安裝gulp以及gulp外掛 -> 配置gulpfile.js -> 執行任務
1、安裝nodejs
1.1、說明:gulp是基於nodejs,理所當然需要安裝nodejs;
1.2、安裝:開啟nodejs官網,點選碩大的綠色Download按鈕,它會根據系統資訊選擇對應版本(.msi檔案)。然後像安裝QQ一樣安裝它就可以了(安裝路徑隨意)。
2、使用命令列(如果你熟悉命令列,可以直接跳到第3步)
2.1、說明:什麼是命令列?命令列在OSX是終端(Terminal),在windows是命令提示符(Command Prompt);
2.2、注:之後操作都是在windows系統下;
2.3、簡單介紹gulp在使用過程中常用命令,開啟命令提示符執行下列命令(開啟方式:window + r 輸入cmd回車):
node -v檢視安裝的nodejs版本,出現版本號,說明剛剛已正確安裝nodejs。PS:未能出現版本號,請嘗試登出電腦重試;
npm -v檢視npm的版本號,npm是在安裝nodejs時一同安裝的nodejs包管理器,那它有什麼用呢?稍後解釋;
cd定位到目錄,用法:cd + 路徑 ;
dir列出檔案列表;
cls清空命令提示符視窗內容。
3、npm介紹
3.1、說明:npm(node package manager)nodejs的包管理器,用於node外掛管理(包括安裝、解除安裝、管理依賴等);
3.2、使用npm安裝外掛:命令提示符執行npm install <name> [-g] [--save-dev]
;
3.2.1、<name>:node外掛名稱。例:npm install gulp-less --save-dev
3.2.2、-g:全域性安裝。將會安裝在C:\Users\Administrator\AppData\Roaming\npm
,並且寫入系統環境變數; 非全域性安裝:將會安裝在當前定位目錄; 全域性安裝可以通過命令列在任何地方呼叫它,本地安裝將安裝在定位目錄的node_modules資料夾下,通過require()呼叫;
3.2.3、--save
:將儲存配置資訊至package.json(package.json是nodejs專案配置檔案);
3.2.4、-dev:儲存至package.json的devDependencies節點,不指定-dev將儲存至dependencies節點;一般儲存在dependencies的像這些express/ejs/body-parser等等。
3.2.5、為什麼要儲存至package.json?因為node外掛包相對來說非常龐大,所以不加入版本管理,將配置資訊寫入package.json並將其加入版本管理,其他開發者對應下載即可(命令提示符執行npm install,則會根據package.json下載所有需要的包,npm
install --production
只下載dependencies節點的包)。
3.3、使用npm解除安裝外掛:npm uninstall <name> [-g] [--save-dev]
PS:不要直接刪除本地外掛包
3.3.1、刪除全部外掛:npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻煩
3.3.2、藉助rimraf:npm install rimraf -g 用法:rimraf node_modules
3.4、使用npm更新外掛:npm update <name> [-g] [--save-dev]
3.4.1、更新全部外掛:npm update [--save-dev]
3.5、檢視npm幫助:npm help
3.6、當前目錄已安裝外掛:npm list
PS:npm安裝外掛過程:從http://registry.npmjs.org下載對應的外掛包(該網站伺服器位於國外,所以經常下載緩慢或出現異常),解決辦法往下看↓↓↓↓↓↓。
4、選裝cnpm
4.1、說明:因為npm安裝外掛是從國外伺服器下載,受網路影響大,可能出現異常,如果npm的伺服器在中國就好了,所以我們樂於分享的淘寶團隊幹了這事。32個!來自官網:“這是一個完整 npmjs.org 映象,你可以用此代替官方版本(只讀),同步頻率目前為 10分鐘 一次以保證儘量與官方服務同步。”;
4.3、安裝:命令提示符執行npm install cnpm -g --registry=https://registry.npm.taobao.org
; 注意:安裝完後最好檢視其版本號cnpm
-v或關閉命令提示符重新開啟,安裝完直接使用有可能會出現錯誤;
注:cnpm跟npm用法完全一致,只是在執行命令時將npm改為cnpm(以下操作將以cnpm代替npm)。
5、全域性安裝gulp
5.1、說明:全域性安裝gulp目的是為了通過她執行gulp任務;
5.2、安裝:命令提示符執行cnpm install gulp -g;
5.3、檢視是否正確安裝:命令提示符執行gulp -v,出現版本號即為正確安裝。
6、新建package.json檔案
6.1、說明:package.json是基於nodejs專案必不可少的配置檔案,它是存放在專案根目錄的普通json檔案;
6.2、它是這樣一個json檔案(注意:json檔案內是不能寫註釋的,複製下列內容請刪除註釋):
JavaScript1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | { "name":"test",//專案名稱(必須) "version":"1.0.0",//專案版本(必須) "description":"This is for study gulp project !",//專案描述(必須) "homepage":"",//專案主頁 "repository":{//專案資源庫 "type":"git", "url":"https://git.oschina.net/xxxx" }, "author":{//專案作者資訊 "name":"surging", "email":"[email protected]" }, "license":"ISC",//專案許可協議 "devDependencies":{//專案依賴的外掛 "gulp":"^3.8.11", "gulp-less":"^3.0.0" } } |
6.3、當然我們可以手動新建這個配置檔案,但是作為一名有志青年,我們應該使用更為效率的方法:命令提示符執行cnpm init
6.4、檢視package.json幫助文件,命令提示符執行cnpm help package.json
7、本地安裝gulp外掛
7.1、安裝:定位目錄命令後提示符執行cnpm install --save-dev
;
7.2、本示例以gulp-less為例(編譯less檔案),命令提示符執行cnpm install gulp-less --save-dev
;
7.3、將會安裝在node_modules的gulp-less目錄下,該目錄下有一個gulp-less的使用幫助文件README.md;
7.4、為了能正常使用,我們還得本地安裝gulp:cnpm install gulp --save-dev
;
PS:細心的你可能會發現,我們全域性安裝了gulp,專案也安裝了gulp,全域性安裝gulp是為了執行gulp任務,本地安裝gulp則是為了呼叫gulp外掛的功能。
8、新建gulpfile.js檔案(重要)
8.1、說明:gulpfile.js是gulp專案的配置檔案,是位於專案根目錄的普通js檔案(其實將gulpfile.js放入其他資料夾下亦可)。
8.2、它大概是這樣一個js檔案(更多外掛配置請檢視這裡):
JavaScript1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | //匯入工具包 require('node_modules裡對應模組') vargulp=require('gulp'),//本地安裝gulp所用到的地方 less=require('gulp-less'); //定義一個testLess任務(自定義任務名稱) gulp.task('testLess',function(){ gulp.src('src/less/index.less')//該任務針對的檔案 .pipe(less())//該任務呼叫的模組 .pipe(gulp.dest('src/css'));//將會在src/css下生成index.css }); gulp.task('default',['testLess','elseTask']);//定義預設任務 elseTask為其他任務,該示例沒有定義elseTask任務 //gulp.task(name[, deps], fn) 定義任務 name:任務名稱 deps:依賴任務名稱 fn:回撥函式 //gulp.src(globs[, options]) 執行任務處理的檔案 globs:處理的檔案路徑(字串或者字串陣列) //gulp.dest(path[, options]) 處理完後文件生成路徑 |
8.3、該示例檔案請下載檢視
9、執行gulp
9.1、說明:命令提示符執行gulp 任務名稱;
9.2、編譯less:命令提示符執行gulp testLess;
9.3、當執行gulp default或gulp將會呼叫default任務裡的所有任務[‘testLess’,’elseTask’]。
10、使用webstorm執行gulp任務
10.1、說明:使用webstorm視覺化執行gulp任務;
10.2、使用方法:將專案匯入webstorm,右鍵gulpfile.js 選擇”Show Gulp Tasks”開啟Gulp視窗,若出現”No task found”,選擇右鍵”Reload tasks”,雙擊執行即可。
11、總結
11.1、安裝nodejs;
11.2、新建package.json檔案;
11.3、全域性和本地安裝gulp;
11.4、安裝gulp外掛;
11.5、新建gulpfile.js檔案;
11.6、通過命令提示符執行gulp任務。
12、結束語
12.1、本文有任何錯誤,或有任何疑問,歡迎留言說明。
下面還有一篇感覺不錯的:
Gulp.js—比Grunt更易用的前端構建工具
Grunt是目前最流行的前端構建工具,對前端的效率幫助非常大,但Grunt並非完美無缺,json描述任務的方式,顯得過於繁瑣和不夠簡單,對於新手來說,有不少的學習成本。
今天明河介紹個比Grunt更易用的前端構建工具: ,最近很火的開源專案,引起了很多前端同學的關注,大家都很好奇,Gulp.js拿什麼跟Grunt掰手腕。
大多數前端處於觀望狀態,Gulp.js這杯可樂很誘人,但第三方外掛太少(常用的任務外掛都有),被Grunt甩了N條街,當然畢竟是新工具,情有可原,相信假以時日,Gulp.js會被更多前端同學認可,明河希望通過這篇文章,能夠讓大家看到Gulp.js的潛力。
安裝Gulp.js
Gulp.js跟Grunt一樣基於Node.js,使用npm安裝即可:
npm install -g gulp
想要使用Gulp.js構建您的工程,需要在工程目錄中安裝Gulp.js的依賴
npm install --save-dev gulp gulp-util
–save-dev 命令配置,可以自動在工程目錄的package.json檔案內生成包依賴資訊,比如:
{
"devDependencies": {
"gulp-util": "~2.2.14",
"gulp": "~3.5.2"
}
}
(如果專案工程中沒有package.json,請執行npm init。)
在工程根目錄下建立個 gulpfile.js 檔案,內容如下:
var gulp = require('gulp');
var gutil = require('gulp-util');
gulp.task('default', function(){
// place code for your default task here
});
使用 gulp 命令,執行Gulp.js構建程式:
gulp
表示執行 default (預設任務)成功。
接下來看個具體的demo。
簡單使用說明
假設 demo工程 目錄結構如下:
我們構建的目標是壓縮src目錄下的a.js和b.js,合併生成all.min.js放在build目錄下。
安裝外掛
npm install --save-dev gulp-uglify gulp-concat
gulp-uglify:用於壓縮js
gulp-concat:用於合併檔案
Gulp.js目前提供了 300多個外掛 ,基本可以滿足主流前端構建需求。
編寫Gulpfile.js構建指令碼
完整程式碼:
var gulp = require('gulp');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('concat', function () {
gulp.src('./src/*.js')
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./build'));
});
gulp.task('default', ['concat']);
執行 gulp 命令後:
相關推薦
我的Gulp入門合集
說來也慚愧,斷斷續續學習到不少網頁開發的技術(這裡我還不敢將自己所學的東西稱之為前端,可能還不夠稱為前端),可卻很少去自動接觸前端自動化構建的工具。(當然,這也是因為我忙於其他事的原因。哈哈哈。==> 你這是介面吧?)就目前的狀況而言,未來的幾個月裡,
幾何入門合集
using 能夠 tdi ack ast 極角排序 sta end 處理 F. Mirror 題意 鏈接 三維幾何鏡像問題: 有n個人在y=0的平面上(及xoz平面)。z=0平面上有一面鏡子(邊平行於坐標軸)。z=a平面上有q個點(保證a大於所有人的z坐標)。 所有人面朝鏡
跟我一起學習VIM - vim插件合集
意思 同事 ipp 什麽是 如虎添翼 apple oca 終究 情況 2016-06-14 15:04 13333人閱讀 評論(0) 收藏 舉報 分類: Linux(104) 目錄(?)[+] 前兩天同事讓我在小組內部分享一下VIM,於是我花了一點時間寫了個簡短的教程。
記錄Python學習之路-----------------------------《Python程式設計入門到實踐》作業習題合集 ====接上一章
接上一章連結如下: https://blog.csdn.net/shinhwa96/article/details/83373902 #-*-coding:GBK-*- #-*-coding:utf-8-*- #7-4 pizza_peiliao="請您輸入pizza配料:" messa
記錄Python學習之路----------------------------------------《Python程式設計入門到實踐》作業合集二
上一章是第4章與第五章的習題。這章主要是第六章和第七章的習題,第六章主要是字典,第七章是使用者輸入和while迴圈。 #-*-coding:GBK-*- #-*-coding:utf-8-*- #6-1 person = { 'first_name' : 'wang', 'l
記錄python學習之路------------------------《python程式設計從入門到實踐》作業合集
每天只更新學習的內容,今天就更新作業吧。做個勤奮的樓主 4-1因為我沒有寫pizza,選擇的自己喜歡的顏色。 #-*-coding:GBK-*- #-*-coding:utf-8-*- #4-1 colors=['orange','blue','red','black'] for col
大資料入門環境搭建整理、大資料入門系列教程合集、大資料生態圈技術整理彙總、大資料常見錯誤合集、大資料的離線和實時資料處理流程分析
本篇文章主要整理了筆者學習大資料時整理的一些文章,文章是從環境搭建到整個大資料生態圈的常用技術整理,環境希望可以幫助到剛學習大資料到童鞋,大家在學習過程中有問題可以隨時評論回覆! 大資料生態圈涉及技術: Hadoop、MapReduce、HDFS、Hive、Hbase、Spark、Scala
我看 PyCon 2017大會(附視訊合集下載)
PyCon 2017 大會正在美國波特蘭如火如荼地進行,不過它的關注度遠沒有 Google IO 大會、蘋果 WWDC 大會那樣受歡迎,畢竟這只是 Python 社群的狂歡節。反觀國內的 Python 大環境,情況其實很糟糕,跟整個社會一樣,似乎大家都很浮躁。至於 Pycon China,仍
MySQL 安裝 + 入門大全 + 常用命令合集
MySQL 安裝與配置 MySQL 常見有兩種方式: (1)(建議) 直接下載安裝檔案安裝,會自動配置環境變數,自動安裝服務 下載地址:https://dev.mysql.com/downloads/installer/ (2)下載壓縮版檔案,自己手動
少兒程式設計入門教程合集
來源:少兒程式設計|Scratch程式設計教程系列合集 Scratch初級程式設計: 少兒程式設計|scratch初級-1-月球漫步 少兒程式設計|scratch初級-2-穿越迷宮 少兒程式設計|scratch初級-3-樹葉凋落 少兒程式設計|scr
Gulp相關問題合集及解決辦法
一、用‘cnpminstall gulp -g’安裝完gulp後,'gulp'不是內部或外部命令 1、命令視窗下輸入:npm config get prefix 2、將得到的路徑新增進系統環境變數path 二、'local gulp not found in ~' 安裝完g
外掛化開發系列之三---Android外掛化從入門到放棄-最強合集
本人最近研究外掛化, 偶然發現此合集, 按照部分連結的文章實際簡單寫了些demo,受益良多, 覺得確實不錯,特轉載過來,給需要的人。 外掛化涉及的東西很多,所以我們需要多個維度去學習。大概分為5個部分:預備知識、入門、進階、系列、類庫。一步一步深入瞭解外掛的原理。 基礎1.Java 類載入器 類載入
史上最全Bootstrap 3從基礎入門到實戰開發教程大合集
課程目錄01_Bootstrap 3 基礎教程02_Bootstrap 3 進階教程03_Bootstrap 3 使用者介面架構04_Bootstrap 3 視訊教程應用例項05_Bootstrap 3 綜合實戰06_Bootstrap 3 相關文件07_Bootstrap
我的Java秋招面經大合集
這個國慶,大家過的怎麼樣啊,是到處去玩 ,還是繼續勤勤懇懇地學習呢 。反正我沒有出去玩啦,還在忙秋招的小夥伴也加把勁啦。之前發過很多秋招面經,一直沒有做一個整理,今天就做一個整理吧。 阿里面經 阿里中介軟體研發面經 螞蟻金服研發面經 崗位是研發工程師,直接找螞蟻金服的大佬進行內推。
小程序粉墨登場 --奉上開發教程及書籍合集
是不是 網易 機器 ive cab 好書推薦 教育 pro ini 微信小程序,簡稱CX,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。 小程序處於內測階段。全面開放申請後,主體類型為個人、企業
網絡流合集:bzoj1433,1934,1854 題解
struct spa tail set esc urn 這也 space 宿舍 轉載請註明:http://blog.csdn.net/jiangshibiao/article/details/23992205
tomcat配置的一些想法(配置合集)
start rtu 經驗 命令行 clip 編輯 是我 shutdown 小時 5.10日 記,經過兩天艱苦的裝tomcat配置環境和連接eclipse,終於是配置成功。以下是我覺得配置的幾個重點。(48小時換來的經驗!) 1.配置tomcat:如果你jdk是配置好的(在c
【原創 Hadoop&Spark 動手實踐 5】Spark 基礎入門,集群搭建以及Spark Shell
min util man 操作 because tro txt library all Spark 基礎入門,集群搭建以及Spark Shell 主要借助Spark基礎的PPT,再加上實際的動手操作來加強概念的理解和實踐。
Vim命令合集
特殊 教程 打開 冒號 文件復制 打開文件 高亮 ... end 命令歷史 以:和/開頭的命令都有歷史紀錄,可以首先鍵入:或/然後按上下箭頭來選擇某個歷史命令。 啟動vim 在命令行窗口中輸入以下命令即可 vim 直接啟動vim vim filename 打開vim並創建
git學習資源合集
git學習 ref bing blank www target detail 學習 git git官網 Pro git 電子書,這裏還有中文版,這也是官方推薦的。 git學習資源合集