gulp入門教程

gulp是什麼？

在前端開發中，你是否有遇到以下這些問題？

1、需要手動合併雪碧圖

2、需要手動壓縮js、css

3、每次編寫完**後，需要手動重新整理瀏覽器看效果

4、手動壓縮

gulp的主要作用就是幫助我們自動完成上面的那些繁瑣的工作。

安裝gulp

gulp是基於node.js的，所以你需要先安裝node.js。安裝完node後，開啟命令視窗，輸入 npm install gulp -g。如下圖：(提示： -g代表全域性安裝)

安裝若成功後，輸入gulp -v 可以檢視gulp版本

下面我們用乙個hello world的程式，來演示下如何使用gulp

1、在專案目錄下，安裝gulp

2、在專案目錄下，新建乙個gulpfile.js的檔案，需要注意的是這裡的名字一定要是gulpfile，不能是其它的。

3、編寫gulpfile.js，如下：

const gulp = require('gulp');
gulp.task('hello', function())

4、在專案目錄下，開啟命令視窗執行gulp命令： gulp hello 。如下：

讓我們來分析下上面的** :

const gulp = require('gulp'); 引入gulp，require是node.js引入庫的寫法

gulp.task('hello', function());下面我們來舉個實際點的例子

複製檔案

gulp.task('copy', function());

這個例子首先任務名字是copy，然後我們使用src方法去讀取index.html這個檔案，最後我們使用dest輸出這個檔案到乙個名為dist的資料夾下。

常用的gulp外掛程式

gulp-connect：乙個本地的伺服器

gulp-uglify：壓縮js

gulp-minify-css：壓縮css

gulp-imagemin：壓縮

gulp-css-spriter：合併精靈圖，例子：

let gulp = require('gulp');
let spriter = require('gulp-css-spriter');
gulp.task('css', function() ))
.pipe(gulp.dest('./dist/css')); //最後生成出來
});

如何使用gulp外掛程式？

1、開啟在搜尋欄中輸入你想查詢的gulp外掛程式。這裡我們以gulp-connect為例，如下圖：

2、搜尋到該外掛程式後，在下面會看到具體的使用方法

安裝方法

使用案例

可以看到第一步是引入gulp-connect外掛程式，第二步是使用server這個方法來建立乙個伺服器。其它外掛程式的使用步驟都是大同小異，這裡就不在一一介紹其它外掛程式怎麼使用了。

watch函式

watch函式的作用上面已經介紹過了，下面讓我們來具體寫個例子了解下。這個例子是這樣的，當檔案發生改變時，自動重新整理瀏覽器。

這個例子需要用到的外掛程式是gulp-connect

const gulp = require('gulp');
const connect = require('gulp-connect');
gulp.task('server', function());
gulp.watch('index.html', function());
});

Gulp入門教程

gulp 是乙個當前非常流行的構建工具,gulp 構建工具,是提供乙個基礎平台,上面可以編寫各種任務,比如,壓縮的任務,編譯css檔案,轉換,web伺服器等等任務.基本的使用方式 var gulp require gulp gulp.task default function consol...

CSS入門教程

css是 cascading style sheets 的簡稱，中文翻譯為串接樣式表也有人翻譯為樣式表 css用以作為網頁的排版和風格設計，在web標準建站中，對css的熟悉和使用是相當重要的乙個內容。css的作用是彌補html的不足，讓網頁的設計更為靈活。這個文章只是為您介紹css的基礎應用...

gulp入門教程

Gulp入門教程

CSS入門教程

CSS入門教程

相關推薦