怎么用gulp4.0搭建一個前端腳手架

這篇文章主要介紹“怎么用gulp4.0搭建一個前端腳手架”，在日常操作中，相信很多人在怎么用gulp4.0搭建一個前端腳手架問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用gulp4.0搭建一個前端腳手架”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

本文將會介紹如何使用gulp4來搭建項目腳手架，如果您還在使用gulp3或更老的版本，您也以通過本文的一些思想將之前的項目進行完善，更新。如果gulp不是你們團隊的重點，也可以移步我的Webpack4.0搭建文章.

前言

由于本文重點是介紹gulp4.0搭建腳手架的思路，相關插件的用法以及項目結構的設計，由于gulp的基本用法很簡單，如果不熟悉可以移步官網自行研究學習。該腳手架的設計思路和功能如下：

 

同時為了提高開發(fā)環(huán)境的效率，這里我們參考webpack的配置，區(qū)分開發(fā)環(huán)境和生產環(huán)境，在接下來將會具體介紹。

腳手架用到的第三方插件介紹

• gulp-jshint ——js語法檢測

• gulp-util ——終端控制臺打印自定義錯誤信息

• http-proxy-middleware ——設置代理，配合gulp-connect使用

• gulp-less ——將less編譯成css

• gulp-file-include ——用于文件模塊化導入，如用include的方式導入公共部分

• gulp-connect ——用于啟動本地服務器

• gulp-clean ——清理目錄

• gulp-uglify --壓縮js

• gulp-minify-css ——壓縮css

• gulp-autoprefixer ——自動添加瀏覽器前綴

• imagemin-pngquant ——png圖片壓縮

• gulp-imagemin ——圖壓縮

• gulp-cache ——設置gulp打包的緩存，一般用于img

• gulp-md5-plus ——將文件名進行md5處理便于打包更新

當然gulp還有很多常用的插件可以更好的為我們的項目服務，大家也可以整合自己的插件讓項目更加完善。

項目目錄設計

1.src目錄，即我們開發(fā)項目時的源目錄，具體結構如下：

我們定義views是我們視圖層，即頁面文件的目錄，js目錄為業(yè)務邏輯的腳本文件，lib存放第三方框架，include目錄為公共部分的存放目錄，我們可以用gulp-file-include來導入到html中，images和css大家都比較清楚，分別時存放image和css文件的目錄。

2. dist目錄，即輸出的目錄，具體結構如下：

可以看到我們會看到src打包后的目錄對應static目錄，為什么我們會加一層static呢?我的設計是如果項目使用node等服務層框架，我們可以用gulp一并打包放入dist下，這樣dist就是一個完整的包括前后端服務的項目目錄了，當然大家也可以直接將src打包后的文件和文件夾直接放到dist下，根具業(yè)務需求靈活設計吧。

在這里我要說一點，由于筆者親測gulp-md5-plus有時候打包不穩(wěn)定，可能不會給html自動添加對應的md5后綴，所以筆者在這塊做了特殊的處理，如果大家在工作中有更好的方案，可以及時和筆者溝通交流。

3. gulpfile文件配置

由于我們要區(qū)分開發(fā)環(huán)境和生產環(huán)境，所以這里我們使用兩個不同的配置文件，根據(jù)NODE_ENV來區(qū)分用哪個文件。

我們將配置文件統(tǒng)一放到build目錄下，config為公共配置文件，gulp.dev.js和gulp.prod.js分別為開發(fā)和生產環(huán)境配置文件。我們整體的目錄結構如下：

腳手架完整源碼(部分插件和配置會給出詳細注釋)

1 config.js

module.exports = {     dist: './dist/static',  // 配置構建目錄 }

2 gulp.dev.js

const gulp = require('gulp'); // js const Jshint = require("gulp-jshint");          //js檢查 const Gutil = require('gulp-util'); const Proxy = require('http-proxy-middleware'); // const Webpack = require('webpack'); // const WebpackConfig = require('./webpack.config.js');  // css const Less = require('gulp-less');              // 編譯less  // html const FileInclude = require('gulp-file-include'); // 文件模塊化  // server const Connect = require('gulp-connect');        //引入gulp-connect模塊   const Clean = require('gulp-clean');            // 清理目錄  // 配置文件 const config = require('./config'); const { dist } = config;  // html async function html() {     return gulp.src('src/views/*.html')         .pipe(FileInclude({ // HTML模板替換，具體用法見下文             prefix: '##',             basepath: '@file'         })).on('error', function(err) {             console.error('Task:copy-html,', err.message);             this.end();         })         .pipe(gulp.dest(dist)) // 拷貝          .pipe(Connect.reload()) }  // css async function css() {     return await gulp.src('src/css/*.less')     .pipe(Less())       //編譯less     .pipe(gulp.dest(dist + '/css')) //當前對應css文件     .pipe(Connect.reload());//更新 }  // js // const compilerJS = Webpack(WebpackConfig);  async function js() {     return await gulp.src('src/js/**')     .pipe(Jshint())//檢查代碼     // .pipe(Babel({     //     presets: ['es2015']     // }))     .on('error', function(err) {         Gutil.log(Gutil.colors.red('[Error]'), err.toString());     })     .pipe(gulp.dest(dist + '/js')) // 拷貝     .pipe(Connect.reload()); //更新          // 使用es6+可以單獨配置     // compilerJS.run(function(err, stats) {     //     if(err) throw new Gutil.PluginError("webpack:js", err);     //     Gutil.log("[webpack]", stats.toString({     //         colors: true     //     }));     //     cb()     // }); }  // image async function image() {     return await gulp.src('src/images/*')     .pipe(gulp.dest(dist + '/images')); }  // clean dir async function clean() {     // 不設置allowEmpty: true會報File not found with singular glob     return await gulp.src(dist, {allowEmpty: true}).pipe(Clean()); }  // 服務器函數(shù) async function server() {     Connect.server({         root:dist, //根目錄         // ip:'192.168.11.62',//默認localhost:8080         livereload:true, //自動更新         port:9909, //端口         middleware: function(connect, opt) {             return [                 Proxy('/api', {                     target: 'http://localhost:8080',                     changeOrigin:true                 }),                 Proxy('/otherServer', {                     target: 'http://IP:Port',                     changeOrigin:true                 })             ]         }     }) }  module.exports = {     html,     css,     js,     image,     clean,     server }

3 gulp.prod.js

const gulp = require('gulp'); // const Rename = require('gulp-rename');          // 重命名 // js const Uglify = require('gulp-uglify');          // 壓縮js // const Babel = require('gulp-babel'); // css const Minifycss = require('gulp-minify-css');   // 壓縮css const Less = require('gulp-less');              // 編譯less const Autoprefixer = require('gulp-autoprefixer');  // 瀏覽器前綴 // html const MinifyHtml = require("gulp-minify-html"); //壓縮html const FileInclude = require('gulp-file-include'); // 文件模塊化 // image const Imagemin = require('gulp-imagemin'); const Pngquant = require('imagemin-pngquant');  //png圖片壓縮插件 const Cache = require('gulp-cache');   const Clean = require('gulp-clean');            // 清理目錄  // md5 發(fā)版本的時候為了避免瀏覽器讀取了舊的緩存文件，需要為其添加md5戳 const md5 = require("gulp-md5-plus");  const config = require('./config'); const { dist } = config; // html async function html() {     return gulp.src('src/views/*.html')         .pipe(FileInclude({ // HTML模板替換，具體用法見下文             prefix: '##',             basepath: '@file'         }))         // .pipe(MinifyHtml())         .on('error', function(err) {             console.error('Task:copy-html,', err.message);             this.end();         })         .pipe(gulp.dest(dist)) // 拷貝  }  // css async function css() {     return await gulp.src('src/css/**')     .pipe(Less())       //編譯less     .pipe(Autoprefixer({         cascade: true, //是否美化屬性值 默認：true 像這樣：         //-webkit-transform: rotate(45deg);         //        transform: rotate(45deg);         remove: true //是否去掉不必要的前綴 默認：true     }))     .pipe(Minifycss({   // 壓縮css         //類型：Boolean 默認：true [是否開啟高級優(yōu)化（合并選擇器等）]         advanced: true,         //保留ie7及以下兼容寫法 類型：String 默認：''or'*' [啟用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]         compatibility: '',         //類型：Boolean 默認：false [是否保留換行]         keepBreaks: false,         //保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴，如果不加這個參數(shù)，有可能將會刪除你的部分前綴                 keepSpecialComments: '*'     }))     .pipe(gulp.dest(dist + '/css'))     .pipe(md5(10, dist + '/*.html', {         mappingFile: 'manifest.json',         connector: '.' // 文件名和hash的連接符     }))     .pipe(gulp.dest(dist + '/css')) //當前對應css文件 }  // js async function js() {     return await gulp.src('src/js/**')     // .pipe(Babel({     //     presets: ['es2015']     // }))     .pipe(Uglify()) // 壓縮js     .pipe(gulp.dest(dist + '/js'))     .pipe(md5(10, dist + '/*.html', {         mappingFile: 'manifest.json',         connector: '.'     }))     .pipe(gulp.dest(dist + '/js')) // 拷貝 }  // image async function image() {     return await gulp.src('src/images/*')     .pipe(Cache(Imagemin({         optimizationLevel: 5, //類型：Number  默認：3  取值范圍：0-7（優(yōu)化等級）         progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片         interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染         multipass: true, //類型：Boolean 默認：false 多次優(yōu)化svg直到完全優(yōu)化         svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性         use: [Pngquant()] //使用pngquant深度壓縮png圖片的imagemin插件     })))     .pipe(gulp.dest(dist + '/images')); }   // clean dir async function clean() {     // 不設置allowEmpty: true會報File not found with singular glob     return await gulp.src(dist, {allowEmpty: true}).pipe(Clean()); }    module.exports = {     html,     css,     js,     image,     clean }

4 gulpfile.js

const gulp = require('gulp');  // 根據(jù)環(huán)境引入不同的配置文件 let buildConfig; if(process.env.NODE_ENV === 'dev') {     buildConfig = require('./build/gulp.dev');     gulp.task('server', buildConfig.server);  // 本地服務      } else {     buildConfig = require('./build/gulp.prod');     // gulp.task('md5', gulp.series(buildConfig.md5Css, buildConfig.md5Js));     gulp.task('clean', buildConfig.clean);    // 清理目錄    }  gulp.task('html', buildConfig.html);      // 打包html gulp.task('js', buildConfig.js);          // 打包js gulp.task('css', buildConfig.css);        // 打包css gulp.task('images', buildConfig.image);   // 打包image gulp.task('sources', gulp.series('html', gulp.parallel('js', 'css', 'images')));   // 監(jiān)聽文件變化 gulp.task('watch', async () => {     gulp.watch('src/views/*', gulp.series('html')); // 監(jiān)聽HTML變化     gulp.watch('src/js/**', gulp.series('js')); // 監(jiān)聽js變化     gulp.watch('src/css/*', gulp.series('css')); // 監(jiān)聽css變化     gulp.watch('src/images/*', gulp.series('images')); // 監(jiān)聽image變化 });  // build if(process.env.NODE_ENV === 'dev') {     gulp.task('dev', gulp.series('sources', 'server', 'watch')); } else {     gulp.task('build', gulp.series('sources')); }

5 package.json

{   "dependencies": {     "@babel/core": "^7.4.5",     "babel-preset-es2015": "^6.24.1",     "gulp": "^4.0.2",     "gulp-autoprefixer": "^6.1.0",     "gulp-babel": "^8.0.0",     "gulp-cache": "^1.1.2",     "gulp-clean": "^0.4.0",     "gulp-connect": "^5.7.0",     "gulp-file-include": "^2.0.1",     "gulp-imagemin": "^6.0.0",     "gulp-jshint": "^2.1.0",     "gulp-less": "^4.0.1",     "gulp-md5-plus": "^1.0.3",     "gulp-minify-css": "^1.2.4",     "gulp-minify-html": "^1.0.6",     "gulp-rename": "^1.4.0",     "gulp-uglify": "^3.0.2",     "gulp-util": "^3.0.8",     "http-proxy-middleware": "^0.19.1",     "http-server": "^0.11.1",     "imagemin-pngquant": "^8.0.0",     "jshint": "^2.10.2",     "jsonfile": "^5.0.0",     "webpack": "^4.35.2"   },   "scripts": {     "start": "NODE_ENV=dev gulp dev",     "build": "NODE_ENV=prod gulp clean && gulp build",     "serve": "http-server dist/static -p 3000"   },   "devDependencies": {} }

要想獲取項目完整源碼和demo，請移步gulp4_multi_pages。

最后

該腳手架任然有需要完善的地方，比如如何兼容uglify和babel,md5需要使用兩次的情況，如果更好的解決方案，歡迎隨時交流。在腳手架選型上，也不一定非要用gulp，webpack，一般的經驗是傳統(tǒng)型的靜態(tài)網站適合用gulp，由于不需要編譯es6，所以有更小的體積，當然也可以用webpack，本文主要是給大家提供一使用gulp4搭建個腳手架的思路，希望能有所收獲。

到此，關于“怎么用gulp4.0搭建一個前端腳手架”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>