構建一個基本的前端自動化開發環境 —— 基於 Gulp 的前端集成解決方案（四）

時間 2019-11-09

標籤構建一個基本前端自動化開發環境基於 gulp 集成解決方案欄目測試自動化简体版

原文原文鏈接

經過前面幾節的準備工做，對於 npm / node / gulp 應該已經有了基本的認識，本節主要介紹如何構建一個基本的前端自動化開發環境。下面將逐步構建一個能夠自動編譯 sass 文件、壓縮 javascript 文件、多終端多瀏覽器同步測試的開發環境，而且還能夠經過 piblish 命令對項目下的文件進行打包操做。javascript

相關鏈接導航css

在windows下安裝gulp —— 基於 Gulp 的前端集成解決方案（一）html

執行 $Gulp 時發生了什麼 —— 基於 Gulp 的前端集成解決方案（二）前端

經常使用 Gulp 插件彙總 —— 基於 Gulp 的前端集成解決方案（三）java

構建一個基本的前端自動化開發環境 —— 基於 Gulp 的前端集成解決方案（四）node

1、建立目錄結構

創建以下目錄結構，learn-gulp 做爲咱們的項目根目錄。jquery

learn-gulp/
├── app/
│   ├── sass/
│   │   └─ main.scss
│   ├── scripts/
│   │   └─ javascript.js
│   └── index.html
├── dist/
└── release/

app 爲工做目錄，全部操做都在該目錄下進行。gulp 檢測到文件變更會自動對文件進行處理並分發至 dist 目錄。git

dist 目標文件目錄，這裏是編譯、壓縮過的文件。github

release 能夠發佈至服務器的文件。npm

2、初始化npm軟件包信息

在 learn-gulp 目錄下執行 npm init。這一步主要是建立一個 package.json 文件，便於與開發團隊其餘成員分享當前環境信息。

運行 npm init 會要求輸入項目名稱、版本號、描述、入口程序名稱、關鍵字、做者、license 等信息，根據實際狀況輸入便可。下面是我輸入相關信息後生成的 package.json 文件，供參考：

{
  "name": "fedis",
  "version": "1.0.4",
  "description": "fedis - Front-End development integration solution",
  "main": "index.js",
  "keywords": [
    "gulp",
    "sass",
    "browser-sync",
    "style",
    "html"
  ],
  "author": "kelsen",
  "license": "MIT",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "repository": {
    "type": "git",
    "url": "https://github.com/"
  }
}

注意：部分選項能夠不填寫，如 git 倉庫選項。

3、安裝 npm 軟件包

經過命令 npm install package-name 安裝 npm 軟件包，建議帶上 --save 參數，這樣就會把你安裝的軟件都記錄在 dependencies 字段下，便於分享你的開發環境給其餘人。關於 install 以及 --save 參數的相關信息請參考 NPM 入門 - 基礎使用。

下面列出了要安裝的軟件包

"dependencies": {
    "browser-sync": "2.10.0",
    "browsersync-ssi": "0.2.4",
    "gulp": "^3.9.0",
    "gulp-concat": "^2.6.0",
    "gulp-minify": "0.0.5","gulp-plumber": "^1.0.1","gulp-sass": "2.1.0",
    "gulp-zip": "^3.0.2"
}

這些軟件包的基本介紹請參考經常使用 Gulp 插件彙總 —— 基於 Gulp 的前端集成解決方案（三）。

4、構建 gulp 任務

安裝完全部軟件包後，在項目目錄 learn-gulp 中新建一個javascript文件，命名爲 gulpfile.js ，在該文件中定義任務。若是要了解更詳細的有關任務的信息，請參考執行 $Gulp 時發生了什麼 —— 基於 Gulp 的前端集成解決方案（二）。

一、加載 gulp 插件。

'use strict';

var gulp        = require('gulp'),
    browserSync = require('browser-sync').create(),
    SSI         = require('browsersync-ssi'),
    concat      = require('gulp-concat'),
    minify      = require('gulp-minify'),
    plumber     = require('gulp-plumber'),
    sass        = require('gulp-sass'),
    zip         = require('gulp-zip');

這裏注意，第一行的 'use strict';

二、構建一個處理靜態文件的 server ，並監聽工做目錄，當工做目錄有文件變化時當即進行相關操做並執行 browserSync.reload 從新加載頁面。

gulp.task('serve', function() {

    browserSync.init({
        server: {
            baseDir:["./dist"],
            middleware:SSI({
                baseDir:'./dist',
                ext:'.shtml',
                version:'2.10.0'
            })
        }
    });

    gulp.watch("app/scss/**/*.scss", ['sass']);
    gulp.watch("app/scripts/**/*.js", ['js']);
    gulp.watch("app/**/*.html", ['html']);
    gulp.watch("dist/**/*.html").on("change",browserSync.reload);
});

若有疑問可參考官網文檔：browsersync.io

三、編譯 sass 文件、並自動注入到瀏覽器

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    
    return gulp.src("app/scss/**/*.scss")
        .pipe(plumber())
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(sass({outputStyle:"compact"}))
        .pipe(gulp.dest("dist/styles"))
        .pipe(browserSync.stream());
});

這裏須要注意 app/scss/**/*.scss ，是 app/scss/ 目錄下全部SCSS文件的意思。

四、壓縮 javascript 文件

// javscript files operate
gulp.task('js', function(){
    return gulp.src('app/scripts/**/*.js')
        .pipe(plumber())
        .pipe(minify())
        .pipe(gulp.dest("dist/scripts"))
        .pipe(browserSync.stream());
});

對 learn-gulp/app/scripts/ 下的全部 javascript 文件進行壓縮處理並分發至 learn-gulp/dist/scripts/ 目錄下，每一個文件都會對應的生成相應的壓縮文件, 如 file.js & file.min.js

五、處理 html 文件

gulp.task('html', function() {
    
    return gulp.src("app/*.html")
        .pipe(plumber())        
        .pipe(gulp.dest("dist/"))
        .pipe(browserSync.stream());
});

這裏並未對 html 文件作任何改動，你能夠根據實際狀況進行一些操做。

六、打包發佈目標文件

// publish
gulp.task('publish', function(){
    return gulp.src('dist/**/*')
        .pipe(plumber())
        .pipe(zip('publish.zip'))
        .pipe(gulp.dest('release'))
});

該任務負責把 learn-gulp/dist 目錄下的文件打包成一個 zip 文件並分發至 learn-gulp/release 目錄下。

運行命令 $ gulp publish 可執行該任務。

七、編輯默認任務

gulp.task('default', ['html','serve']);

default 任務是運行 gulp 時執行的第一個任務。咱們經過 default 任務來執行 serve 任務。

5、開始工做

一、運行 gulp 命令，若是沒有異常 gulp 就已經開始工做了，瀏覽器會自動打開。

二、打開 learn-gulp/app/scss/main.scss 輸入以下內容

.fedis-main
{
    background-image: linear-gradient(135deg, #573e81, #133259 40%, #133259);
    color: #FFF;
    padding: 80px;    
    h1{font-size: 6em; font-family: Arial, Helvetica, sans-serif; text-align: center;font-weight: 100; }
}
.footer{color:#888 }

當按下 Ctrl+S 保存時，sass 任務會自動執行，執行完成後 learn-gulp/dist/styles/ 目錄下會生成css文件 main.css

三、打開編輯器在 learn-gulp/app/index.html 文件中輸入下面內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Welcome - Fedis</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.css">
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <div class="container" id="main">
        <div class="row">
            <div class="col-md-12">
                <div class="jumbotron text-center fedis-main">
                    <h1>Fedis</h1>                    
                    <p>Front-End development integration solution</p>
                    <small>
                        <a class="btn btn-success" href="http://shang.qq.com/wpa/qunwpa?idkey=1aab8e1fc1e992b7390185551e84701163bb9dbdc32a769b185d9f8fd6e70262" target="_blank"><i class="fa fa-qq"></i>加入Q 羣<br>221702761</a>
                    </small>
                </div>
                <hr>
                <div class="footer text-center">
                    <small>Fedis 1.0.0 · Created by Kelsen</small>
                </div>
            </div>
        </div>
    </div>
    
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="scripts/javascript.js"></script>
</body>
</html>