gulp4.0鐨勪娇鐢ㄥ拰gulpfile.js浠诲姟閰嶇疆

Posted 鐔婂ぇ鏋楃殑鍗氬

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了gulp4.0鐨勪娇鐢ㄥ拰gulpfile.js浠诲姟閰嶇疆相关的知识，希望对你有一定的参考价值。


鑷姩鍖栨瀯寤哄伐鍏?/h2>

鍐欎唬鐮佺殑鏃跺€欎細閬靛惊涓€浜涙鏋剁殑鏂瑰紡鎴栬€呮煇浜涙妧鏈紝鎴栨垜浠嚜宸卞鐞嗙殑妯″潡鍖栵紝浣嗘槸杩欑浠ｇ爜鏄笉鑳界洿鎺ュ湪娴忚鍣ㄨ繍琛岀殑锛岃繖涓繃绋嬫垜浠氨闇€瑕佷娇鐢ㄨ嚜鍔ㄥ寲鏋勫缓宸ュ叿锛岃繖浜涘伐鍏烽兘鏄熀浜巒ode鐜銆?/p>

node瀹樼綉锛歨ttps://nodejs.org锛屼笅杞絃TS鐗堟湰鐨勫嵆鍙€?/p>

甯哥敤鐨勫伐鍏?/h2>

  • grunt 姣旇緝鍙よ€侊紝鍔熻兘灏戯紝鏇存柊灏戯紝鎻掍欢灏戯紝鐜板湪鐢ㄧ殑寰堝皯馃馃

  • gulp pc绔?jquery鐨勯」鐩墦鍖呮洿澶氫娇鐢╣ulp

  • webpack 鏈€涓绘祦鐨勬墦鍖呭伐鍏凤紝vue銆乺eact閮芥槸鐢ㄧ殑webpack馃憡馃憡

gulp鐨勪粙缁?/h2>

  • gulp瀹樼綉锛歨ttps://www.gulpjs.com.cn/

  • 鐢ㄨ嚜鍔ㄥ寲鏋勫缓宸ュ叿澧炲己浣犵殑宸ヤ綔娴佺▼锛?/p>

  • gulp 灏嗗紑鍙戞祦绋嬩腑璁╀汉鐥涜嫤鎴栬€楁椂鐨勪换鍔¤嚜鍔ㄥ寲锛屼粠鑰屽噺灏戜綘鎵€娴垂鐨勬椂闂淬€佸垱閫犳洿澶т环鍊笺€?/p>

  • 绠€鍗曪細浠ｇ爜浼樹簬閰嶇疆銆乶ode 鏈€浣冲疄璺点€佺簿绠€鐨?API 闆嗭紝gulp 璁╁伐浣滃墠鎵€鏈湁鐨勭畝鍗曘€?/p>

  • 楂樻晥锛氬熀浜?node 寮哄ぇ鐨勬祦(stream)鑳藉姏锛実ulp 鍦ㄦ瀯寤鸿繃绋嬩腑骞朵笉鎶婃枃浠剁珛鍗冲啓鍏ョ鐩橈紝浠庤€屾彁楂樹簡鏋勫缓閫熷害銆?/p>

  • 鐢熸€侊細閬靛惊涓ユ牸鐨勫噯鍒欙紝纭繚鎴戜滑鐨勬彃浠剁粨鏋勭畝鍗曘€佽繍琛岀粨鏋滃彲鎺с€?/p>

  • Builds can be the most awful sinkhole for teams to waste their time with - gulp is a serious win for any project

    锛堝浜庝竴涓洟闃熸潵璁诧紝鏋勫缓鏄竴涓氮璐规椂闂寸殑鏈€绯熺硶鐨勪竴涓潙锛屼絾鏄鏋滀娇鐢╣ulp锛屽浜庝换浣曢」鐩潵璁茶繖閮藉皢浼氭槸涓€鍦哄法澶х殑鑳滃埄锛夆湆鉁屸湆鉁?/p>

gulp浣跨敤

  1. 瀹夎node鐜锛歨ttps://nodejs.org锛屼笅杞絃TS鐗堟湰鐨勫嵆鍙?/p>

  2. 鍦ㄤ换鎰忎綅缃墦寮€鍛戒护琛屽伐鍏凤紝浣跨敤npm鍏ㄥ眬瀹夎gulp鍛戒护琛屽伐鍏?nbsp;npm i gulp -g锛屽畨瑁呭畬鎴愪互鍚庢墽琛?code class="mq-21">gulp -v 鍙鐪嬪埌鐗堟湰鍙峰氨璇存槑瀹夎鎴愬姛

  3. 鍒涘缓椤圭洰鐩綍锛屼竴鑸敱灏忓啓瀛楁瘝鍔犳暟瀛楁瀯鎴?/p>

  4. 杩涘叆鐩綍锛屾墽琛?code class="mq-24">npm init -y 鍒濆鍖栭」鐩紝浼氬垱寤轰竴涓猵ackage.json鏂囦欢锛岃繖涓枃浠堕噷灏辨槸褰撳墠椤圭洰鐨勪竴浜涜鏄庝俊鎭紝涔熷彲浠ユ墜鍔ㄤ慨鏀?/p>

  5. 瑙勫垝鐩綍缁撴瀯锛屾瘮濡傦細src鏀炬簮浠ｇ爜锛宒ist灏辨槸鏍规嵁src婧愪唬鐮佷娇鐢╣ulp鎵撳寘涔嬪悗鍙互鐢ㄦ潵涓婄嚎鐨勪唬鐮侊紝dist鏄笉鐢ㄥ姩鐨勶紝鎴戜滑鍐欎唬鐮佸湪src閲岄潰鍐欙紝浣嗘槸鏈€鍚庤繍琛岀殑鏄痙ist鐩綍


    gulp椤圭洰鐩綍缁撴瀯


  6. 鍦ㄥ綋鍓嶉」鐩眬閮ㄥ畨瑁単ulp锛?nbsp;npm i gulp -dev锛岄珮鐗堟湰npm浼氳嚜鍔ㄥ府鎴戜滑 鈥搒ave 淇濆瓨鍦╬ackage.json鏂囦欢鐨勪緷璧栭噷锛?dev鐨勬剰鎬濇槸瀹夎鎴愬紑鍙戜緷璧栵紝涔熷氨鏄杩欎釜鍖呭彧鏈夊紑鍙戠幆澧冮渶瑕侊紝绾夸笂浜у搧鐜涓嶉渶瑕併€傝繖鏍风殑璇濆嵆浣垮垹闄ode_modules涔熷彲浠ョ洿鎺ヨ繍琛?nbsp;npm i 灏卞彲浠ユ牴鎹畃ackage.json閲岄潰鐨勬墍鏈変緷璧栧寘淇℃伅鎶婅繖浜涗緷璧栧寘鍏ㄥ眬瀹夎杩涙潵

  7. 鍒涘缓涓€涓?code class="mq-34">gulpfile.js鏂囦欢锛?span>娉ㄦ剰锛氭枃浠跺悕涓€瀹氳鍙?code class="mq-35">gulpfile锛侊紒锛佺劧鍚庡湪杩欎釜鏂囦欢閲屽埗瀹氬悇绉嶄换鍔°€?/p>

  8. 绠＄悊璺緞锛屾妸鎵€鏈夌殑璺緞闆嗕腑鐢╬aths瀵硅薄鏉ョ鐞嗭紝鍖呮嫭婧愭枃浠惰矾寰勫拰鐩爣璺緞

    ** 浠ｈ〃鎵€鏈夋枃浠跺す

    * 浠ｈ〃鎵€鏈夋枃浠?/p> 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    		 
    const path = {
        html: {
            src: 'src/**/*.html', // src涓嬮潰鐨勬墍鏈夋枃浠跺す涓嬬殑鎵€鏈塰tml鏂囦欢锛屼笅闈㈢殑js锛宑ss浠ユ绫绘帹
            dest: 'dist' // 澶勭悊鐨勭粨鏋滄斁鍒癲ist鐩綍
        },
        css: {
     src: 'src/css/**/*.css', // src涓嬮潰css鐩綍閲岀殑鎵€鏈夋枃浠跺す涓嬬殑鎵€鏈塩ss鏂囦欢
     dest: 'dist/css' // 澶勭悊鐨勭粨鏋滄斁鍒癲ist涓嬬殑css鐩綍閲?/span>
        },
        js: {
     src: 'src/js/**/*.js',
     dest: 'dist/js'
        },
        img: {
     src: 'src/images/**/*',
     dest: 'dist/images'
        },
        libs: {
     src: 'src/libs/**/*',
     dest: 'dist/libs'
        }
    }

  9. 鍒跺畾鍘嬬缉html鐨勪换鍔★細鎵цnpm i gulp-htmlmin -dev瀹夎鍘嬬缉html鐨勬彃浠讹紝鐒跺悗鍒跺畾鍘嬬缉浠诲姟锛屽啀閫氳繃module.exports 鎶婅繖涓换鍔℃毚闇插嚭鍘伙紝灏卞彲浠ユ墽琛?code class="mq-60">gulp html 鏉ヨ繍琛岃繖涓换鍔′簡

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    		 
    const gulp = require('gulp')
    const htmlmin = require('gulp-htmlmin')

    const html = () => {
        // 闇€瑕佹妸浠诲姟浠ｇ爜return
        return gulp.src(path.html.src)
            .pipe(htmlmin({
            	removeComments: true,//娓呴櫎HTML娉ㄩ噴
            	collapseWhitespace: true,//鍘嬬缉HTML
            	collapseBooleanAttributes: true,//鐪佺暐甯冨皵灞炴€х殑鍊?<input checked="true"/> ==> <input checked />
          		removeEmptyAttributes: true,//鍒犻櫎鎵€鏈夌┖鏍间綔灞炴€у€?<input id="" /> ==> <input />
          		removeScriptTypeAttributes: false,//鍒犻櫎<script>鐨則ype="text/javascript"
          		removeStyleLinkTypeAttributes: true,//鍒犻櫎<style>鍜?lt;link>鐨則ype="text/css"
          		minifyJS: true,//鍘嬬缉椤甸潰JS
          		minifyCSS: true//鍘嬬缉椤甸潰CSS
        	}))
        	.pipe(gulp.dest(path.html.dest))
    }
    module.exports = {
      html
    }

  10. 鍒跺畾js浠诲姟锛氬厛ES6杞珽S5锛岀劧鍚庡啀鍘嬬缉锛屾渶鍚庡湪瀵煎嚭閭ｉ噷鍔犱笂js浠诲姟

    瀹夎鍘嬬缉js鐨勫寘npm i gulp-uglify -dev

    瀹夎ES6杞珽S5鐨勫寘npm i gulp-babel @babel/core @babel/preset-env -dev

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    		 
    const uglify = require('gulp-uglify')
    const babel = require('gulp-babel')

    const js = () => {
        return gulp.src(path.js.src)
            .pipe(babel({
            	presets: ['@babel/env']
        	}))
            .pipe(uglify())
            .pipe(gulp.dest(path.js.dest))
            .pipe(connect.reload())
    }
    module.exports = {
        html,
        js
    }

  11. css浠诲姟鍘嬬缉css锛?code class="mq-112">npm i gulp-clean-css -dev

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    		 
    const cleanCss = require('gulp-clean-css')

    const css = () => {
      return gulp.src(path.css.src)
          .pipe(cleanCss())
          .pipe(gulp.dest(path.css.dest))
    }
    module.exports = {
        html,
        js,
        css
    }

  12. 缁欓渶瑕佸吋瀹圭殑css鏍峰紡鑷姩鍔犱笂鍏煎鎬у墠缂€锛?code class="mq-124">npm i gulp-autoprefixer -dev

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    		 
    const cleanCss = require('gulp-clean-css')
    const autoPrefixer = require('gulp-autoprefixer')

    const css = () => {
        return gulp.src(path.js.src)
            .pipe(autoprefixer({
            	presets: ['@babel/env']
        	}))
          .pipe(cleanCss())
          .pipe(gulp.dest(path.css.dest))
    }
    module.exports = {
        html,
        js,
        css
    }

  13. 濡傛灉鐢ㄥ埌sass鏉ュ啓鏍峰紡锛岄偅涔堣繕瑕佹妸css浠诲姟鍋氳繘涓€姝ヤ慨鏀癸細

    sass缂栬瘧鎴愭垚css锛?code class="mq-141">npm i node-sass gulp-sass -dev

    棣栧厛锛?span>path瀵硅薄閲宑ss鐨剆rc灞炴€ц矾寰勮鎶婂悗缂€鍚峜ss鏀规垚scss锛屽啀淇敼css浠诲姟



    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    		 
    const cleanCss = require('gulp-clean-css')
    const autoPrefixer = require('gulp-autoprefixer')
    const sass = require('gulp-sass')

    const css = () => {
        return gulp.src(path.js.src)
        	.pipe(sass())
            .pipe(autoprefixer({
            	presets: ['@babel/env']
        	}))
           .pipe(cleanCss())
           .pipe(gulp.dest(path.css.dest))
    }

  14. 寮€鍚湇鍔″櫒锛?nbsp;npm i gulp-connect -dev椤圭洰鏍圭洰褰曟槸dist锛屾墍浠ラ」鐩腑鐨勪竴鍒囪矾寰勯兘鍐欐垚/寮€澶寸殑缁濆璺緞锛?鎸囩殑灏辨槸dist锛岄伩鍏嶆ā鍧楀寲涔嬪悗鐩稿浣嶇疆鍙戠敓鍙樺彉鍖栧鑷磋矾寰勯敊璇?/p> 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    		 
    const connect = require('gulp-connect')

    const server = () => {
        connect.server({
            root: 'dist', // 椤圭洰鏍硅矾寰勬槸dist
            livereload: true, // 鏈嶅姟鍣ㄦ敮鎸佺儹鏇存柊
            port: 2333 // 閰嶇疆绔彛鍙?span>2333
        })
    }

  15. 鐢变簬dist鐩綍鏄瘡娆℃墽琛屼换鍔℃椂鑷姩鐢熸垚鐨勶紝鎵€浠ヤ负浜嗛伩鍏嶄笂涓€娆℃棫鐨勪唬鐮佸鏂扮殑浠ｇ爜閫犳垚褰卞搷锛屾垜浠竴鑸細鍦ㄥ紑鍚换鍔′箣鍓嶅厛鎶奷ist鐩綍鍒犳帀锛?nbsp;npm i del -dev

    1
    2
    3
    		 
    const del = require('del')

    const clean = () => del(['dist'])

  16. 杩樻湁涓€浜涘浘鐗囨垨鑰呭紩鍏ョ殑绗笁鏂圭殑鏂囦欢闇€瑕佸仛涓€涓Щ鍔ㄥ鐞?/p> 

    1
    2
    3
    4
    5
    		 
    // img浠诲姟锛氬鍒跺埌dist閲?/span>
    const img = () => gulp.src(path.img.src).pipe(gulp.dest(path.img.dest))

    // libs浠诲姟锛氭枃浠剁殑澶嶅埗
    const libs = () => gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))

  17. 鐩戝惉html銆乯s鍜宑ss鏂囦欢鐨勫彉鍖栵紝閲嶅惎瀵瑰簲浠诲姟锛屽湪琚洃鍚殑浠诲姟鍚庨潰閮借閲嶅惎鏈嶅姟鍣?/p> 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    		 
    // watch浠诲姟锛氱洃鍚竴浜涙枃浠剁殑淇敼锛屼竴鏃﹁淇敼浜嗗氨鑷姩閲嶅惎瀵瑰簲鐨勪换鍔?/span>
    const watch = () => {
        gulp.watch(path.html.src, html)
        gulp.watch(path.css.src, css)
        gulp.watch(path.js.src, js)
    }

    // 鍐嶅湪html銆乧ss鍜宩s浠诲姟鍚庨潰閮藉姞涓婁竴鍙?pipe(connect.reload())锛屾瘮濡俢ss浠诲姟鏀规垚杩欐牱锛?/span>
    const css = () => {
      return gulp.src(path.css.src)
          .pipe(sass())
          .pipe(cleanCss())
          .pipe(gulp.dest(path.css.dest))
          .pipe(connect.reload())
    }

  18. 浠诲姟瀵煎嚭鍋氫竴涓嬩慨鏀癸紝鍗曚釜瀵煎嚭鍙兘鍗曚釜鎵ц锛屾墍浠ユ垜浠彲浠ユ妸鎵€鏈夎鎵ц鐨勪换鍔℃斁鍦ㄩ粯璁や汉浠诲姟閲岋紝灏卞彧闇€瑕佸湪鍛戒护琛岄噷鎵цgulp鍗冲彲鎵ц鎵€鏈変换鍔★細瀵煎嚭榛樿浠诲姟娴侊紝鍏堝悓姝ユ墽琛宑lean锛屽啀寮傛鎵ц鍏朵粬浠诲姟

    1
    		 
    module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, img, libs, server, watch))

  19. 濡傛灉闇€瑕佽法鍩熻闂叾浠栨帴鍙ｏ紝鍒欓渶瑕侀厤缃法鍩燂紝闇€瑕佷緷璧栧彟涓€涓腑闂翠欢锛?code class="mq-217">npm i http-proxy-middleware -dev

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    		 
    const connect = require('gulp-connect')
    const proxy = require('http-proxy-middleware')

    const server = () => {
      connect.server({
        root: 'dist',
        livereload: true,
        port: 8000,
        // 涓棿浠讹細鍑芥暟杩斿洖涓€涓暟缁勶紝鏁扮粍閰嶇疆璺ㄥ煙浠ｇ悊
        middleware: function () {
          return [
            // 灏嗕互/api涓哄紑澶寸殑璇锋眰浠ｇ悊鍒板煙 http://localhost:80
     proxy('/api', {
     target: 'http://localhost:80',
     changeOrigin: true
            })
          ]
        }
      })
    }


鐜板湪锛屾垜浠彧闇€瑕佸湪鍛戒护琛岄噷杩愯gulp 椤圭洰灏辫兘鍚姩璧锋潵浜嗭紝鐒跺悗鍦ㄦ祻瑙堝櫒閲岃緭鍏?nbsp;http://localhost:2333灏辫兘璁块棶涓婚〉鍟︼紝鏈€鍚庯紝璐翠笂瀹屾暣浠ｇ爜锛氿煓嗏€嶁檪锔忦煓嗏€嶁檪锔忦煓嗏€嶁檪锔?/p> 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin'),
      cleanCss = require('gulp-clean-css'),
      del = require('del'),
      uglify = require('gulp-uglify'),
      babel = require('gulp-babel'),
      connect = require('gulp-connect'),
      sass = require('gulp-sass')

// 鍦ㄦ瘡娆″紑鍚柊浠诲姟涔嬪墠鍏堟妸dist鍒犳帀
const delDist = () => del(['dist'])

// 鍏堟妸鎵€鏈夌殑浠诲姟鐢ㄥ埌鐨勬枃浠舵簮璺緞鍜岀洰鏍囪矾寰勫仛涓€涓粺涓€瑙勫垝
const path = {
  html: {
    src: 'src/**/*.html',
    dest: 'dist'
  },
  css: {
    src: 'src/css/**/*.scss',
    dest: 'dist/css'
  },
  js: {
    src: 'src/js/**/*.js',
    dest: 'dist/js'
  },
  img: {
    src: 'src/images/**/*',
    dest: 'dist/images'
  },
  libs: {
    src: 'src/libs/**/*',
    dest: 'dist/libs'
  }
}

// 鍒跺畾html浠诲姟锛氶€氳繃鍑芥暟鐨勬柟寮?/span>
const html = () => {
  // 闇€瑕佹妸浠诲姟浠ｇ爜return
  return gulp.src(path.html.src)
    .pipe(htmlmin({
      removeComments: true,//娓呴櫎HTML娉ㄩ噴
      collapseWhitespace: true,//鍘嬬缉HTML
      collapseBooleanAttributes: true,//鐪佺暐甯冨皵灞炴€х殑鍊?<input checked="true"/> ==> <input checked />
      removeEmptyAttributes: true,//鍒犻櫎鎵€鏈夌┖鏍间綔灞炴€у€?<input id="" /> ==> <input />
      removeScriptTypeAttributes: false,//鍒犻櫎<script>鐨則ype="text/javascript"
      removeStyleLinkTypeAttributes: true,//鍒犻櫎<style>鍜?lt;link>鐨則ype="text/css"
      minifyJS: true,//鍘嬬缉椤甸潰JS
      minifyCSS: true//鍘嬬缉椤甸潰CSS
    }))
    .pipe(gulp.dest(path.html.dest))
    .pipe(connect.reload())
}

// css浠诲姟锛氬厛鎶妔css鏂囦欢缂栬瘧鎴恈ss锛屽啀鍘嬬缉
const css = () => {
  return gulp.src(path.css.src)
    .pipe(sass())
    .pipe(cleanCss())
    .pipe(gulp.dest(path.css.dest))
    .pipe(connect.reload())
}

// js浠诲姟
const js = () => {
  return gulp.src(path.js.src)
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest(path.js.dest))
    .pipe(connect.reload())
}

// img浠诲姟锛氬鍒跺埌dist閲?/span>
const img = () => gulp.src(path.img.src).pipe(gulp.dest(path.img.dest))

// libs浠诲姟
const libs = () => gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))

// server浠诲姟
const server = () => {
  connect.server({
    root: 'dist',
    livereload: true,
    port: 1912
  })
}

// watch浠诲姟锛氱洃鍚竴浜涙枃浠剁殑淇敼锛屼竴鏃﹁淇敼浜嗗氨鑷姩閲嶅惎瀵瑰簲鐨勪换鍔?/span>
const watch = () => {
  gulp.watch(path.html.src, html)
  gulp.watch(path.css.src, css)
  gulp.watch(path.js.src, js)
}

// gulp.series 鏄悓姝ユ墽琛屼换鍔★紝绗竴涓墽琛屽畬浜嗘墠鑳芥墽琛岀浜屼釜
// gulp.parallel 鏄紓姝ユ墽琛屼换鍔★紝澶氫釜浠诲姟鍚屾椂杩愯
module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, img, libs, server, watch))



杩欐槸package.json馃檵鈥嶁檪锔忦煓嬧€嶁檪锔忦煓嬧€嶁檪锔?/p> 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
{
  "name": "for-my-rose-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
  "keywords": [],
  "author": "Dary",
  "license": "ISC",
  "dependencies": {
 "gulp": "^4.0.2"
 },
  "devDependencies": {
 "@babel/core": "^7.7.7",
 "@babel/preset-env": "^7.7.7",
 "del": "^5.1.0",
 "gulp-autoprefixer": "^7.0.1",
 "gulp-babel": "^8.0.0",
 "gulp-clean-css": "^4.2.0",
 "gulp-connect": "^5.7.0",
 "gulp-htmlmin": "^5.0.1",
 "gulp-sass": "^4.0.2",
 "gulp-uglify": "^3.0.2",
 "node-sass": "^4.13.0",
 "http-proxy-middleware": "^0.20.0"
 }
}


浠ｇ爜涓嶆槸涓囪兘鐨勶紝浣嗕笉鍐欎唬鐮佹槸涓囦竾涓嶈兘鐨?/p>

 Dary璁?/small>


娆㈣繋璁块棶瀹樼綉锛歨ttp://www.xiongdalin.com/

以上是关于gulp4.0鐨勪娇鐢ㄥ拰gulpfile.js浠诲姟閰嶇疆的主要内容，如果未能解决你的问题，请参考以下文章

Zuul鐨勪娇鐢紝璺敱璁块棶鏄犲皠瑙勫垯

linux缁冧範

ssh鐨勫簲鐢ㄥ拰vnc杩炴帴妗岄潰

css3鐨勪竴浜涘皬鏂规硶

涓ゅ垎閽熶簡瑙ｅ叏涓栫晫鏈€蹇殑 Sketch 鎻掍欢锛歊unner