gulp基本使用

gulp強調的是前端開發的工作流程,我們可以通過定義task事件定義事件的執行順序,gulp去執行這些事件,構建整個前端開發的工作流程

gulp常見定義事件，例如：

下面會說幾個常見的gulp模組,列舉功能和例子,希望你看完本章後能對gulp有個基本的掌握,能參照這裡的寫法,當需要使用時去官網上會自主查詢

先分別說明每個api的作用,下面會有乙個總例子

1.src

建立乙個流，用於從檔案系統讀取檔案物件

2.series

接受n個引數,每個引數是函式,會依次執行這些函式.

3.dest

建立乙個用於將檔案物件寫入到檔案系統的流(就是用於在檔案系統上建立檔案)。第乙個引數是建立檔案後輸出的路徑

4.watch

監聽指定資料的變化,當指定資料改變時會執行**函式,重新整理瀏覽器

結合上面的api,我們寫個例子,目的是將位於src/view檔案下的html頁面,複製到/dev目錄下,並監聽html檔案

const =require('gulp');

const gulpserver=require('gulp-webserver')
function
copyhtml(cb) 
//gulp-webserver是用來提供server服務的
function
startgulp()))}//
監聽所有的html檔案,當檔案改變時執行**,並重新整理瀏覽器
//series會按順序執行引數函式
exports.default=series(copyhtml,startgulp)

1.gulp-scss

yarn add node-sass gulp-sass -d,用於編譯scss檔案

2.gulp-concat

yarn add gulp-concat -d //檔案的合併

3.gulp-webserver

yarn add gulp-webserver -d //搭建研發的server,預設索引頁

結合上面的所有內容,我們寫個例子,目的是將多個scss檔案合併編譯為乙個css檔案,並輸出到/dev檔案中

const =require('gulp');
const gulpserver=require('gulp-webserver')
const scss=require('gulp-sass');
const concat=require('gulp-concat')
function
copyhtml(cb) 
function
compliescss()
function
startgulp()))
}watch('./src/style/*.scss',(cb)=>) 
//也可以是module.exports.default,下面是簡寫,gulp是基於node環境執行的,gulp遵守node模組規範 exports.default=series(copyhtml,compliescss,startgulp)

在src/view/index.html中引入all.css

命令列中執行gulp,會自動開啟瀏覽器,我們就可以檢視樣式是否是我們配置的了

gulp的使用基本使用

1.全域性安裝gulp 目的是在命令列裡使用gulp的命令 2.命令列中cd到專案目錄，區域性安裝gulp 如果不在專案中再次安裝會報錯，據說這樣是為了避免發生版本衝突 3.在專案目錄下新建乙個gulpfile.js檔案 必須這個名字，這個檔案算是乙個配置檔案 編寫我們的需求，以便gulp能按著我們...

關於gulp的基本使用

基本使用流程 安裝nodejs 全域性安裝gulp 專案安裝gulp以及gulp外掛程式 配置gulpfile.js 執行任務 gulpfile.js 是gulp的配置檔案 匯入工具包 require node modules裡對應模組 var gulp require gulp 本地安裝gulp所...

gulp基本入門

gulp是乙個前端自動化構建的乙個工具 1.前置 1.1在使用gulp之前，先安裝node和npm 2.安裝gulp 2.1 npm install gulp 3.打包專案 3.1 新建gulpfile.js 獲取 gulp var gulp require gulp 獲取 uglify 模組 用於...