基於Gulp4 搭建本地服務器

基於Gulp4 搭建本地服務器

版本：gulp 4.0

Git地址

官方文檔

gulp3分支是基於gulp3搭建的

1.開發環境

gulp4

使用前需要先全局安裝 gulp4.0

    npm install gulp-cli -g
    npm install gulp -D

2.使用方法

• 文件結構：

├── gulpfile.js  // 用於存放gulp腳本的文件
├── .babelrc     // ES6
├── pachage.json 
├── pachage-lock.json 
├── .gitignore   // 忽略文件配置
├── README.md

• 開始搭建

a、從GitHub克隆整個項目到所需搭建的目標文件夾

b、在目錄下，打開cmd執行 npm i （到這一步你就可以去使用了）

c、項目文件夾自己新建好，在項目下執行 gulp start 即可

d、打包，同啓動在項目文件夾下執行gulp build 即可打包於build文件夾下

.babelrc爲ES6配置文件，必須要的

1.安裝依賴

npm install

2. 運行

gulp start

3. 打包

gulp build

注：啓動時報：Error: listen EADDRINUSE 10.96.120.82:8888 說明該端口被佔用了

3.Gulp4語法

相對Gulp3來講，Gulp4的語法變得通俗多了；

核心語句包含如下兩行

gulp4不再能夠通過數組形式傳入任務，在gulp4中你需要使用gulp.series()和gulp.parallel()來執行他們。

• gulp.series 依賴順序執行（異步）
• gulp.parallel 多個依賴嵌套html,css,js 並行（同步）

parallel和series函數可以接受函數作爲參數

• 啓動服務

// start命令可自定義
gulp.task('start', gulp.series(gulp.parallel(connectServe, watchCode, openInBrowser)));

• 打包壓縮

// build命令可自定義
gulp.task('build', gulp.series(cleanBuild, gulp.parallel(htmlMin, imgMin, cssMin, jsMin)));

gulp4在gulp3的基礎上新增了幾個函數，但它的使用依舊簡單方便。一共如下10個：

• gulp.src() --全局匹配一個或多個文件
• gulp.dest() --將文件寫入目錄
• gulp.symlink() --與dest相似，但是使用軟連接形式
• gulp.task() --定義任務
• gulp.lastRun() --獲得上次成功運行的時間戳
• gulp.parallel() --並行運行任務
• gulp.series() --運行任務序列
• gulp.watch() --當文件發生變化時做某些操作
• gulp.tree() --獲得任務書樹
• gulp.registry() --獲得或註冊任務

4.具體功能

首先我們可以通過node來獲取當前項目的文件路徑，而不用每次手動去改變

    // 獲取當前文件夾路徑
    baseRoot = process.env.INIT_CWD;

a、監聽html、css、js改變實現熱刷新

可以對html、css、js實時監聽並編譯，支持LESS編譯及ES6語法

const watchCode = function () {
    return new Promise(resolve => {
        // 監聽
        gutil.log(baseRoot);
        // 獲取當前文件夾路徑
        let baseFile = baseRoot;
        // 斜槓轉義，講\轉成/
        baseFile = baseFile.replace(/\\/g, "/");
        gutil.log(baseFile);
        gulp.watch([baseFile + '/*.html'], gulp.series(htmlCompile));
        gulp.watch([baseFile + '/js/*.js'], gulp.series(jsCompile));
        gulp.watch(baseFile + '/css/*.css', gulp.series(cssCompile));
        gulp.watch(baseFile + '/img/*', gulp.series(imgComplie));
        gulp.watch(baseFile + '/less/*.less', gulp.series(lessCompile));
        resolve();
    });
};

b、less實時編譯

const lessCompile = function () {
    // less編譯
    return gulp.src( baseRoot + '/less/*.less' )
    /*gulp.src(baseRoot + '/less/style.less')*/
    .pipe(less())
    .pipe(autoprefix('last 3 versions'))  // 前綴
    // .pipe(cssmin()) // 壓縮
    .pipe(gulp.dest(baseRoot + '/css'))
    .pipe(connect.reload())
};

c、項目打包

首先，先將打包文件夾做一個清空處理

const cleanBuild = function () {
    // 清除build下的文件
    // return
	return del([
		// 'dist/report.csv',
		// 這裏我們使用一個通配模式來匹配 `mobile` 文件夾中的所有東西
		baseRoot + '/build/*',
		// 我們不希望刪掉這個文件，所以我們取反這個匹配模式
		// '!dist/mobile/deploy.json'
	]);
};

利用gulp4的series異步執行，等清理完成，再同步去執行打包任務（包括html、css、js壓縮）

gulp.task('build', gulp.series(cleanBuild, gulp.parallel(htmlMin, imgMin, cssMin, jsMin)));

d、css 壓縮

添加前綴並壓縮

  // 添加CSS前綴並壓縮
    return new Promise(resolve => {
        gulp.src(baseRoot + '/css/*.css')
        .pipe(autoprefix('last 3 versions'))  // 前綴
        .pipe(cssmin())
        // .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(baseRoot + '/build/css'));
        resolve();
    });

e、js壓縮

支持ES6語法，並壓縮

const jsMin = function () {
    // ES6 編譯並壓縮
    return new Promise(resolve => {
        gulp.src(baseRoot + '/js/*.js')
        .pipe(babel())
        .pipe(uglify())
        // .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(baseRoot + '/build/js'));
        resolve();
    });
};

f、html壓縮

const htmlMin = function () {
    // html壓縮
    return new Promise(resolve => {
        var options = {
            removeComments: true,//清除HTML註釋
            collapseWhitespace: true,//壓縮HTML
            collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
            removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
            minifyJS: true,//壓縮頁面JS
            minifyCSS: true//壓縮頁面CSS
        };
        gulp.src(baseRoot + '/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest(baseRoot + '/build'));
        resolve();
    });
};