gulp構建es6專案

littlebirdflying發表於2018-09-15

專案構建介紹

ES6 專案構建

基礎架構
任務自動化（gulp）
編譯工具（babel、webpack）
程式碼實現

基礎架構

編譯 es5 es3（適用於ie8）

任務自動化（gulp）

什麼是任務自動化

減少人工操作，自動監聽操作與響應。

什麼是gulp

自動化構建工具。

gulp的作用

完工自動化，背後用 nodejs 做開發，提供了很多外掛,完成不同任務。

瞭解如何使用gulp完成任務自動化

gulp中文文件、api、外掛

編譯工具（babel、webpack）

什麼是babel、webpack

babel：js 的編譯器

webpack：解決模組化的工具

babel的核心用法

解決相容性問題、編譯，如何和 gulp 結合。

瞭解webpack及webpack-stream的作用

webpack-stream 是 webpack 對 gulp 的支援，gulp 是通過 stream （二進位制的流）的方式進行操作。

程式碼實現

建立一個ES6前端工程

完成目錄結構、自動構建、伺服器搭建

專案目錄建立

程式碼地址

根目錄 es6-lottery，建立3部分：前端、服務端、工具。

app/ 前端程式碼

app/css/樣式
app/js/ js
- app/js/class/ 類
  - app/js/class/test.js 初始化類檔案
  - app/js/class/index.js 入口檔案
app/views/ 模板 html
app/views/error.ejs 初始化模板檔案，錯誤檔案（ejs，伺服器程式碼通過express做，其使用的模板引擎是 ejs 模板引擎）
app/views/index.ejs 入口檔案

server/ 伺服器

server/下，命令列 express -e . express腳手架在當前目錄使用 ejs 模板引擎， npm install

tasks/ 工具

tasks/util/ 常見指令碼

tasks/util/args.js 初始化指令碼檔案

package.json 命令列 npm init ，配置依賴包

.babelrc babel 編譯配置檔案

gulpfile.babel.js gulp 配置檔案，指令碼使用了 es6 語法需要加上 babel

命令列處理，建立JS編譯任務指令碼

命令列處理

命令列引數解析

// tasks/util/args.js
import yargs from 'yargs'; // 處理命令列引數，識別命令列

const args = yargs  // 命令列引數處理

  .option('production',{ // 區分開發環境和正式環境
    boolean:true,
    default:false,
    describe:'min all scripts'
  })

  .option('watch',{ // 監聽開發環境中的檔案
    boolean:true,
    default:false,
    describe:'watch all files'
  })

  .option('verbose',{ // 詳細輸出命令列日誌
    boolean:true,
    default:false,
    describe:'log'
  })

  .option('sourcemaps',{ // 資源對映，強制生成 sourcemaps
    describe:'force the creation of sroucemaps'
  })

  .option('port',{ // 伺服器埠
    string:true,
    default:8080,
    describe:'server port'
  })

  .argv // 命令列以字串進行解析

export default args;
複製程式碼

js 處理指令碼

建立 /tasks/script.js

import gulp from 'gulp';
import gulpif from 'gulp-if'; // gulp if 判斷
import concat from 'gulp-concat'; // gulp 檔案拼接
import webpack from 'webpack'; // 打包
import gulpWebpack from 'webpack-stream'; // gulp 基於 stream
import named from 'vinyl-named'; // 檔案重新命名標誌
import livereload from 'gulp-livereload'; // 熱更新
import plumber from 'gulp-plumber'; // 處理檔案資訊流
import rename from 'gulp-rename'; // 檔案重新命名
import uglify from 'gulp-uglify'; // js,css 壓縮
import {log,colors} from 'gulp-util'; // 命令列輸出，log 和 color 的輸出
import args from './util/args'; // 命令列引數解析

gulp.task('scripts',()=>{ // 建立指令碼命令
  return gulp.src(['app/js/index.js']) // 開啟檔案
    .pipe(plumber({ 
      errorHandle:function(){ // 處理錯誤，結合 webpack

      }
    }))
    .pipe(named()) // 檔案重新命名
    .pipe(gulpWebpack({ // 編譯，結合 webpack
      module:{
        loaders:[{
          test:/\.js$/,
          loader:'babel'
        }]
      }
    }),null,(err,stats)=>{ // 處理錯誤
      log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
        chunks:false
      }))
    })
    .pipe(gulp.dest('server/public/js')) // 輸出路徑
    .pipe(rename({ // 重新命名
      basename:'cp',
      extname:'.min.js'
    }))
    .pipe(uglify({compress:{properties:false}, output:{'quote_keys':true}})) // 檔案壓縮
    .pipe(gulp.dest('server/public/js')) // 輸出路徑
    .pipe(gulpif(args.watch,livereload())) // 監聽檔案變化
})

複製程式碼

建立模板、服務任務指令碼

模板處理指令碼

建立 /tasks/pages.js

import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';
import args from './util/args';

gulp.task('pages',()=>{ // 建立 pages 任務
  return gulp.src('app/**/*.ejs') // 開啟檔案，app 下的所有 ejs 檔案
    .pipe(gulp.dest('server')) // 拷貝
    .pipe(gulpif(args.watch,livereload())) // 監聽 熱更新
})
複製程式碼

css 處理指令碼

建立 /tasks/css.js

import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';
import args from './util/args';

gulp.task('css',()=>{
  return gulp.src('app/**/*.css')
    .pipe(gulp.dest('server/public'))
})

複製程式碼

伺服器任務指令碼

// tasks/server.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import liveserver from 'gulp-live-server'; // 啟動指令碼作為伺服器
import args from './util/args';

gulp.task('serve',(cb)=>{ // 建立 serve 任務
  if(!args.watch) return cb(); // 如果不監聽，返回 cb

  var server = liveserver.new(['--harmony','server/bin/www']); // 建立伺服器
  server.start(); // 啟動伺服器

  gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function(file){
    server.notify.apply(server,[file]); // 通知伺服器做處理
  }) // 監聽 server/ 下的 js 和 ejs 檔案

  gulp.watch(['server/routes/**/*.js','server/app.js'],function(){
    server.start.bind(server)() 
  }); // 監聽路由和應用介面變化
})
複製程式碼

檔案自動監聽，專案構建測試

監聽 js css ejs 變化，對應執行響應指令碼檔案

// tasks/browser.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import gutil from 'gulp-util'; // gulp 常用工具集合
import args from './util/args';

gulp.task('browser',(cb)=>{ // 建立任務
  if(!args.watch) return cb();
  gulp.watch('app/**/*.js',['scripts']); // app/中 js發生變化，執行 script 指令碼
  gulp.watch('app/**/*.ejs',['pages']);
  gulp.watch('app/**/*.css',['css']);
});

複製程式碼

每次清空生成檔案

// tasks/clean.js
import gulp from 'gulp';
import del from 'del'; // 做刪除處理
import args from './util/args';

gulp.task('clean',()=>{ // 建立任務
  return del(['server/public','server/views']) // 清空兩個目錄
})
複製程式碼

串聯指令碼

// tasks/build.js
import gulp from 'gulp';
import gulpSequence from 'gulp-sequence'; // 處理包執行順序

gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve'])); // 清目錄->拷css->編譯模板->執行指令碼->陣列browser->serve
複製程式碼

預設任務指令碼

// tasks/default.js
import gulp from 'gulp';

gulp.task('default',['build']); // 命令列 gulp，自動會找 default 任務
複製程式碼

全域性安裝 gulp 後，命令列執行 gulp ，會依次執行指令碼。

引入 tasks 目錄檔案

// gulpfile.babel.js
import requireDir from 'require-dir';

requireDir('./tasks'); // 引入 tasks 目錄檔案，並執行
複製程式碼

配置 .babelrc

{
  "presets":["es2015"],
  "plugins":["transform-decorators-legacy"]
}

複製程式碼

熱更新

// server/app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(require('connect-livereload')()); // 接收熱更新,新增這句話，注意順序
app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


module.exports = app;
複製程式碼

自動更新完成

命令列 gulp --watch 監聽

localhost: 3000 開啟

Vue1.0+Webpack1+Gulp專案升級構建方案的踩坑路
2019-04-04
VueWeb
使用gulp搭建專案
2021-05-26
【Vue】Vue1.0+Webpack1+Gulp專案升級構建方案的踩坑路
2019-04-04
VueWeb
快速搭建gulp專案實戰
2018-06-29
淺談自動化構建之gulp
2021-01-29
Gradle之多專案構建
2018-09-17
Gradle
JAVA專案映象構建
2024-03-28
Java
Gradle構建SpringBoot專案
2020-05-26
GradleSpring Boot
CMAKE 《window構建專案》
2024-08-01
webpack快速構建專案
2021-09-09
Web
Maven 構建 Java 專案
2022-07-27
MavenJava
如何構建「大型 Node.js 專案」的專案結構？
2018-05-15
Node.js
使用Maven構建Java專案
2019-01-19
MavenJava
使用gradle構建springboot專案
2019-03-03
GradleSpring Boot
2. vite 構建專案
2024-08-03
Vite
使用Dockerfile構建django專案
2024-06-26
DockerDjango
SpringBoot淺析——專案構建
2020-12-22
Spring Boot
前端工程構建之談：gulp3要不要升級到Gulp4
2021-01-27
前端
構建dubbo分散式平臺-maven構建根專案
2018-08-29
分散式Maven
小白學習Vue(11)--環境安裝及專案構建 | webstorm構建vue專案
2020-11-20
VueWebORM
有手就行5——jenkins專案構建型別（pipeline流水線專案構建推薦）
2022-02-11
Jenkins型別
使用 webpack 構建小程式專案
2019-03-03
Web
如何構建大型的前端專案
2018-10-11
前端
Gradle快速構建Spring Boot專案
2018-06-14
GradleSpring Boot
vue-cli構建vue專案
2018-08-07
Vue
如何使用Webpack工具構建專案
2023-04-21
Web
如何使用Docker構建前端專案
2022-05-09
Docker前端
jenkins構建go及java專案
2021-04-05
JenkinsGoJava
在gradle中構建java專案
2021-02-20
GradleJava
Jenkins 2.32.3引數化構建maven專案-java專案
2020-04-04
JenkinsMavenJava
Gulp4 Koa專案簡單配置示例
2019-01-20
使用gulp編寫常用自動化構建任務
2018-09-28
使用 happypack 提升 Webpack 專案構建速度
2019-02-21
APPWeb
webpack+nodejs+npm構建前端專案
2018-05-01
WebNodeJSNPM前端
Gradle學習系列----多專案構建
2018-05-18
Gradle
首次使用ideal構建maven專案web
2018-09-29
IdeaMavenWeb
vue-cli構建專案使用 less
2018-08-07
Vue
Jenkins自動化前端專案構建
2018-03-12
Jenkins前端