Gulp簡單介紹

時間  2019-12-14
標籤 gulp 簡單 介紹 欄目 JavaScript 简体版
原文   原文鏈接

Gulp

介紹

自動化構建工具，能夠經過gulp對咱們的代碼進行全自動的編譯。能夠實現代碼的自動壓縮、編譯、實時監測等功能。css

特色

  1. 任務化
  2. 基於流(數據流io:input/output)操做
    1. 整個操做都是基於數據流進行操做
    2. 具有屬於gulp的內存，全部的操做所有在gulp的內存當中
    3. 對應着輸入流和輸出流。會將數據經過src方法輸入，經過dest方法輸出。
  3. 簡易的API

官網網站:https://gulpjs.com/html

中文網:https://www.gulpjs.com.cn/npm

插件中心:https://gulpjs.com/plugins/json

安裝

下面咱們來經過npm來安裝一下gulp。gulp

#初始化項目package.json
npm init

#全局安裝gulp-cli
npm install gulp-cli -g

#局部安裝gulp
npm install gulp@3 --save-dev

全局安裝也可使用 npm install --global gulp，可是卻不可以隨意的在項目目錄切換gulp版本，不夠靈活，因此選擇使用gulp-cli。數組

安裝完成以後，在項目目錄下開啓cmd，輸入gulp，出現下面的提示則表示安裝成功。瀏覽器

[22:40:15] No gulpfile found

使用

通常狀況下，使用gulp,主要有兩步操做，第一步，註冊事件，第二步執行默認事件。服務器

// 註冊
gulp.task('事件名',function(){
    
})

// 默認事件
gulp.task('default',['參數'])

gulp演示配置

下面爲了講解gulp的基本功能，將目錄結構模擬成項目的目錄結構，大體以下:less

// src 目錄項目的根目錄
src
    --| dist   編譯以後的代碼所在目錄
        --|--| js  編譯以後的js
        --|--| css 編譯以後的css
    --| css    待編譯的css
        --|--| a.css 用於測試的css文件
        --|--| b.css 用於測試的css文件
    --| js     待編譯的js
        --|--| 01.js 用於測試的js文件
        --|--| 02.js 用於測試的js文件
    --| less   待編譯的less文件
        --|--| c.less 用於測試的less文件
    index.html 首頁文件
    gulpfile.js gulp配置文件

gulpfile.js文件的建立

首先，咱們先來建立一個gulpfile.js文件，由於gulp執行以後會默認的在當前目錄查找這個文件。異步

文件建立好以後，如今文件中引入gulp，而且先設置好default事件。

var gulp = require("gulp");


gulp.task("default",[]);

JS文件的處理

首先，咱們先來學習如何壓縮js代碼。壓縮js代碼咱們須要使用三個插件，先經過下面的命令進行安裝。

npm install gulp-concat gulp-uglify gulp-rename --save-dev

安裝完成後，咱們能夠在package.json文件中檢查一下：

{
  "name": "src",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^1.4.0",
    "gulp-uglify": "^3.0.2"
  }
}

在上面的文件代碼中，已經看到，咱們新安裝的插件已經成功的安裝。

爲了不安裝失敗致使的報錯，儘量的在每次安裝插件後都檢查一下package.json文件，看一下是否插件被寫入其中。

安裝完成後，能夠完成下面的代碼：

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 註冊事件
gulp.task('js',function(){
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/js/"))
})
// 默認事件
gulp.task("default",[]);

上面代碼中，首先引入三個插件。

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

而後註冊一個js事件。

gulp.task('js',function(){
    
})

在回調函數當中return返回數據。

gulp.task('js',function(){
  return ....  
})

緊接着經過gulp的src方法來將須要編譯的數據放入gulp內存中。

return gulp.src("js/*.js")

*.js表示在js目錄下找到後綴名爲.js的所有文件。

而後經過管道流的形式進行下列操做。

.pipe(concat("bundle.js")) // 合併代碼爲bundle.js
     .pipe(gulp.dest("dist/js/")) // 將合併的文件輸出查看一下
     .pipe(uglify()) // 將文件進行壓縮
     .pipe(rename({suffix:".min"})) // // suffix 後綴名 .min ，也能夠不傳入一個json，而是直接傳入一個文件名，例如bundle.min.js
     .pipe(gulp.dest("dist/js/")) // // 將壓縮的文件再次輸出查看

完成代碼後，在終端當中執行。

gulp js

既能夠在dist/js目錄查看到壓縮以後的bundle.min.js文件。

less文件的處理

首先須要安裝兩個插件。

npm install gulp-less gulp-clean-css --save-dev

安裝完成插件後執行下面的代碼。

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// 註冊事件
gulp.task('js', function () {
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest("dist/js/"))
})

// 註冊less編譯事件
gulp.task('less', function () {
    return gulp.src("less/*.less")
        .pipe(less()) // 編譯less文件 爲css文件
        .pipe(gulp.dest("css/")) // 將轉換文件輸出查看 
})


// 默認事件
gulp.task("default", []);

上面代碼中，首先引入插件。

var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");

註冊事件。

gulp.task('less', function () {
    
})

將內容插入到gulp內存當中。

return gulp.src("less/*.less")

編譯文件。

.pipe(less()) // 編譯less文件 爲css文件

輸出到指定目錄。

.pipe(gulp.dest("dist/css")) // 將轉換文件輸出查看

css文件的處理

處理css文件，不須要額外的下載其餘的插件，直接運行便可。

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// 註冊事件
gulp.task('js', function () {
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest("dist/js/"))
})

// 註冊less編譯事件
gulp.task('less', function () {
    return gulp.src("less/*.less")
        .pipe(less()) // 編譯less文件 爲css文件
        .pipe(gulp.dest("css/")) // 將轉換文件輸出查看 
})

gulp.task('css',function(){
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss({compatibility:'ie8'}))
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/css/"))

})
// 默認事件
gulp.task("default", []);

上述代碼中，經過cleanCss方法進行代碼壓縮，而且傳入參數compatibility，可以讓代碼的壓縮適應ie8。

.pipe(cleanCss({compatibility:'ie8'}))

異步任務的執行

下面在來講一下默認事件，也就是異步任務的執行，咱們只須要將咱們註冊的事件傳入默認事件的第二個參數數組當中便可。

// 默認事件
gulp.task("default", ['js','less','css']);

此時，咱們須要思考一個問題，less轉換成css文件後才能執行css的解析，也就是說css的編譯是依賴less的，爲了處理這個問題，能夠在css事件中傳入第二個參數。

gulp.task('css',['less'],function(){
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss({compatibility:'ie8'}))
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/css/"))

})

這樣，當咱們在執行css以前就會先去等待less的編譯完成。

下面執行gulp，就能夠執行在cmd中輸入gulp命令便可。

此時執行過程當中，咱們會發現執行的順序實際上是一個異步執行的順序，若是咱們想要採起同步順序，只須要將每一個事件中的return去掉便可。

半自動編譯

想要實現半自動編譯，咱們須要下載一個插件。

npm install gulp-livereload --save-dev

安裝完成後引入插件而且執行下面的代碼：

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
var livereload = require("gulp-livereload");
// 註冊事件
gulp.task('js', function () {
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest("dist/js/"))
        .pipe(livereload());// 實時監聽
})

// 註冊less編譯事件
gulp.task('less', function () {
    return gulp.src("less/*.less")
        .pipe(less()) // 編譯less文件 爲css文件
        .pipe(gulp.dest("css/")) // 將轉換文件輸出查看 
        .pipe(livereload());// 實時監聽
})

gulp.task('css',['less'],function(){
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss({compatibility:'ie8'}))
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/css/"))
        .pipe(livereload());// 實時監聽

})

// 註冊半自動監聽
gulp.task('watch',['default'],function(){
    // 開啓監聽
    livereload.listen();
    // 確認監聽的目標以及綁定相應的任務 
    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
})
// 默認事件
gulp.task("default", ['js','less','css']);

上面代碼中，半自動監聽的事件須要註冊，而且傳入參數default。

gulp.task('watch',['default'],function(){
    
})

而後在回調函數中開啓監聽。

livereload.listen();

而且肯定監聽的任務。

gulp.watch('js/*.js',['js']);
 gulp.watch(['css/*.css','less/*.less'],['css'])

最後在全部的事件的最後都啓用監聽。

.pipe(livereload());// 實時監聽

以後，咱們想要執行gulp，能夠採用下面的命令。

gulp watch

這樣只要咱們一更改內容，那麼就會自動編譯。

全自動編譯

首先咱們來下載插件。

npm install gulp-connect --save-dev

插件安裝完成後能夠執行下面的代碼。

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
var livereload = require("gulp-livereload");
var connect = require("gulp-connect")
// 註冊事件
gulp.task('js', function () {
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest("dist/js/"))
        .pipe(livereload())// 實時監聽
        .pipe(connect.reload())
})

// 註冊less編譯事件
gulp.task('less', function () {
    return gulp.src("less/*.less")
        .pipe(less()) // 編譯less文件 爲css文件
        .pipe(gulp.dest("css/")) // 將轉換文件輸出查看 
        .pipe(livereload())// 實時監聽
        .pipe(connect.reload())
})

gulp.task('css',['less'],function(){
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss({compatibility:'ie8'}))
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/css/"))
        .pipe(livereload())// 實時監聽
        .pipe(connect.reload())

})

// 註冊半自動監聽
gulp.task('watch',['default'],function(){
    // 開啓監聽
    livereload.listen();
    // 確認監聽的目標以及綁定相應的任務 
    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
})
// 全自動監聽
gulp.task('server',['default'],function(){
    // 配置服務器的選項
    // gulp-connect 會提供一個微型的服務器，執行以後會自動的讀取全部的文件，而後提供一個服務器的地址，訪問便可
    connect.server({
        root:"dist/",
        livereload:true,// 實時刷新
        port:5000 // 端口 
    })

    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
})
// 默認事件
gulp.task("default", ['js','less','css']);

上面代碼中，建立一個server事件。

gulp.task('server',['default'],function(){})

其中配置server的基礎配置

connect.server({
        root:"dist/", // 服務器根目錄
        livereload:true,// 實時刷新
        port:5000 // 端口 
    })

同時須要在每個事件最後執行加載。

.pipe(connect.reload())

配置完成後能夠在cmd中直接執行：

gulp server

爲了便於測試能夠在dist目錄下建立一個index.html，而且引入壓縮以後的css和js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/build.min.css">
    <script src="./js/bundle.min.js"></script>
</head>
<body>
    <div class="index1"></div>
</body>
</html>

打開瀏覽器，輸入http://localhost:5000便可訪問。

自動打開網頁

能夠下載插件open。

npm install open --save-dev

而後在最後加上open方法的調用，而且在其中傳入訪問的地址。

var gulp = require("gulp");
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
var livereload = require("gulp-livereload");
var connect = require("gulp-connect")
var open = require("open");
// 註冊事件
gulp.task('js', function () {
    return gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest("dist/js/"))
        .pipe(livereload())// 實時監聽
        .pipe(connect.reload())
})

// 註冊less編譯事件
gulp.task('less', function () {
    return gulp.src("less/*.less")
        .pipe(less()) // 編譯less文件 爲css文件
        .pipe(gulp.dest("css/")) // 將轉換文件輸出查看 
        .pipe(livereload())// 實時監聽
        .pipe(connect.reload())
})

gulp.task('css',['less'],function(){
    return gulp.src("css/*.css")
        .pipe(concat("build.css"))
        .pipe(cleanCss({compatibility:'ie8'}))
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/css/"))
        .pipe(livereload())// 實時監聽
        .pipe(connect.reload())

})

// 註冊半自動監聽
gulp.task('watch',['default'],function(){
    // 開啓監聽
    livereload.listen();
    // 確認監聽的目標以及綁定相應的任務 
    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
})
// 全自動監聽
gulp.task('server',['default'],function(){
    // 配置服務器的選項
    // gulp-connect 會提供一個微型的服務器，執行以後會自動的讀取全部的文件，而後提供一個服務器的地址，訪問便可
    connect.server({
        root:"dist/",
        livereload:true,// 實時刷新
        port:5000 // 端口 
    })

    gulp.watch('js/*.js',['js']);
    gulp.watch(['css/*.css','less/*.less'],['css'])
    // 設置訪問路徑 
    open("http://localhost:5000/");
})
// 默認事件
gulp.task("default", ['js','less','css']);

命令行輸入gulp server便可。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程