前端工程化——Gulp的入門使用

時間 2019-11-06

標籤前端工程 gulp 入門使用欄目 JavaScript 简体版

原文原文鏈接

前言

新人使用gulp的一個記錄。css

首先對於第一個新事物，我會問gulp這是什麼？html

答：gulp是一個自動化構建工具，它能夠作一些自動化的任務，好比:git

檢查Javascript程序員
編譯Sass（或Less之類的）文件github
合併Javascript正則表達式
壓縮並重命名合併後的Javascriptgulp
變動靜態資源數組
給靜態資源添加 md5瀏覽器
合併雪碧圖sass
自動刷新瀏覽器
...

之前爲了提升網站的訪問速度，這些都是人工作的，如今gulp能夠很好的完成他們，由於它們是流程化的，程序員就是極客，這種能用程序作的固然不用人來咯。

好了，想必到這你們也對gulp有了初步的瞭解，下面開始進入使用流程。

gulp的使用

gulp的使用很簡單。

三步走起！！！

項目目錄

一樣，咱們先創建一個新項目用來入門。項目的目錄結構以下：

這裏我先簡單貼出裏面的具體代碼，咱們最最重要的是 gulpfile.js

首先是兩個js文件，我們此次只是爲了測試，因此代碼都很簡單。

header.js 和 index.js

//header.js

function A() {
    console.log("I am A");
}



//index.js

function B() {
    console.log("I am B");
}

下面再看看 index.less

// index.less

@color: #4D926F;

#header {
  background-color: @color;
}
h2 {
  color: @color;
}

再下面是 index.html

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../dist/css/index.css" />
    <title>Title</title>
</head>
<body>

</body>
</html>

Gulp配置文件

最最最重要的 gulpfile.js 閃亮登場，這段咱們好好講講，很是重要。

gulp只有五個方法： task ， run ， watch ， src ，和 dest

task 這個API用來建立任務，在命令行下能夠輸入 gulp test 來執行test的任務。
run 這個API用來運行任務
watch這個API用來監放任務。
src 這個API設置須要處理的文件的路徑，能夠是多個文件以數組的形式[main.scss,vender.scss]，也能夠是正則表達式/*/.scss。
dest 這個API設置生成文件的路徑，一個任務能夠有多個生成路徑，一個能夠輸出未壓縮的版本，另外一個能夠輸出壓縮後的版本。

其實整個gulp的配置文件，基本上都是在作一些任務的配置，好比建立任務，監放任務等等。

// gulpfile.js 

// 引入 gulp
var gulp = require('gulp');

// 引入組件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 編譯less
gulp.task('less', function() {
    gulp.src('src/less/*.less') //該任務針對的文件
        .pipe(sass()) //該任務調用的模塊
        .pipe(gulp.dest('./dist/css')); //將會在dist/css下生成index.css
});

// 檢查腳本
gulp.task('lint', function() {
    gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 合併，壓縮文件
gulp.task('scripts', function() {
    gulp.src('src/js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

// 默認任務
gulp.task('default', function(){
    gulp.run('lint', 'less', 'scripts');

    // 監聽JS文件變化
    gulp.watch('src/js/*.js', function(){
        gulp.run('lint', 'less', 'scripts'); //多個任務就直接日後加便可
    });
     // 監聽less文件變化
    gulp.watch('src/less/*.less', function(){
        gulp.run('lint', 'less', 'scripts');
    });
});

// gulp.task(name[, deps], fn) 定義任務  name：任務名稱 deps：依賴任務名稱 fn：回調函數
// gulp.src(globs[, options]) 執行任務處理的文件  globs：處理的文件路徑(字符串或者字符串數組) 
// gulp.dest(path[, options]) 處理完後文件生成路徑

這時，咱們建立了一個基於其餘任務的default任務。使用 .run() 方法關聯和運行咱們上面定義的任務，使用 .watch() 方法去監聽指定目錄的文件變化，當有文件變化時，會運行回調定義的其餘任務，就會自動從新編譯打包了，就是從新運行上面的任務。

上面的註釋說的都很清楚，初步的，其餘的就不介紹了。

好了，到如今爲止，咱們的代碼已經寫完了。

執行Gulp任務

下面我們開始執行自動化任務命令。
gulp xxx , 這裏的 xxx 就是我們上面寫的 task，我們還能夠寫 gulp less , gulp lint...

結果以下：

並且文件都是編譯好的。

// index.css  less編譯後的，很強大吧

body {
  background-color: #4D926F;
}
h2 {
  color: #4D926F;
}



// all.js  合併了 index.js header.js的內容

function B() {
    console.log("I am B");
}
function A() {
    console.log("I am A");
}



//all.min.js  被壓縮後的

function B(){console.log("I am B")}function A(){console.log("I am A")}

另外說下 gulp.watch 這個是監聽文件變化，咱們修改一下 index.less，gulp就會自動從新執行三個Task，具體就不演示了。

這時候你打開你的views下的index.html，能見到如下畫面，說明你成功了。