前端腳本構建方案

時間 2019-11-08

標籤前端腳本構建方案简体版

原文原文鏈接

此次主要是說明如何爲新模塊配置，以實現打包壓縮。css

文件目錄

gulp目錄存放構建配置文件。
build目錄存放構建好的css和js文件。
根目錄下有gulpfile.js和package.json文件
js目錄存放源代碼文件

安裝

在本地安裝Node，而後安裝gulphtml

npm install gulp -g

在項目根目錄下執行前端

npm install

安裝全部的構建過程依賴的包，安裝好之後，配置模塊的構建文件。jquery

配置

模塊配置文件格式以下：web

module.exports = {
css: [
'css/main.css',
'css/selector.css',
'css/search-v1.css',
],
js: ['js/search-main.js']
}

css屬性是須要打包的css文件路徑，構建結束後會打包成一個css文件。
js屬性是js的入口文件，目前採用cmd模式作模板化，只需配置好入口文件，打包過程會對js的引用關係進行分析，將全部引用的js合併打包。npm

js入口文件：json

seajs.config({
// 基礎路徑
// base: window.seajsBase,
// 路徑配置
paths: {
'js': '../js',
'css': '../css',
'dist' : './dist'
},
// 別名配置
alias: {
'jquery': 'js/jquery',
'index': 'js/index',
'citys-pc':'js/citys-pc',
'citys':'js/citys',
'industry':'js/industry-old',
'jobs':'js/jobs-old',
'bigcity':'js/bigcitys',
'js/selector':'js/selector-v1'
},
// 文件編碼
charset: 'utf-8'
})
//加入模塊引用代碼
seajs.use("./js/search-v1")

入口文件中包含了sea-config.js中的配置內容，針對每一個模塊，能夠定義本身的個性配置。gulp

注意加入模塊的引用：後端

seajs.use("./js/search-v1")

針對每一個模塊，模塊負責人只須要維護本身的配置文件，若是發現本身的模塊和其餘模塊的有衝突，最好單首創建本身的模塊，作好註釋。瀏覽器

構建

配置完成後，在根目錄下，執行

gulp

打包完成後，查看build目錄，會生成對應的css和js文件

gulp命令默認會對全部模塊所有構建，若是隻想構建本身的模塊能夠執行

gulp [配置文件名]

例如：

gulp search

注意：

構建系統會爲每一個模塊單首創建一個任務，以該配置文件的名稱做爲任務名。

調試

gulp任務啓動後，會對css和js進行構建，同時啓動本地測試web服務器，以及css和js文件的監聽，若是有css或者js更新，瀏覽器會自動刷新，幫助開發進行調試。

若是想加斷點調試的話，在頁面中引用原有的入口文件便可。

上線

須要上線的文件是build的下css和js文件，也包括圖片，更新後端模板文件的引用，加版本號。

注意：

模板裏的必定要加版本號，css和js都要加。
打包完成之後，sea-config.js文件前端就不須要引用了，只需引用打完包的js便可。若是頁面裏還有其餘模塊沒有打包，sea-config.js文件還須要部署，而且加版本號。
在本地須要對打包後的js和css進行測試，防止打包後出現未知的問題。

實現

整個流程由gulp實現，每一個模塊只需增長一個配置文件，便可實現壓縮打包，在線調試等，核心的gulp代碼以下：

var gulp = require('gulp'),
  path = require('path'),
  gls = require('gulp-live-server'),
  cmd = require('gulp-cmd'),
  minifycss = require('gulp-clean-css'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify'),
  rename = require('gulp-rename'),
  hash = require('gulp-hash'),
  del = require('del'),
  fs = require('fs');
//讀取文件夾內的文件列表
var files = fs.readdirSync('./gulp');
//以文件名做爲屬性組裝配置文件
var config = {};
files.forEach(function (file) {
  config[path.parse(file).name] = require('./gulp/' + file);
})
var tasks = [];
//遍歷配置文件，建立構建任務
for (var item in config) {
  (function (item) {
    var subTasks = [];
    if (config[item]['css']) {
      gulp.task(item + '_css', function () {
        return gulp.src(config[item]['css'])
          .pipe(minifycss({ compatibility: 'ie7' }))
          .pipe(concat(item + '-main.css'))
          .pipe(gulp.dest('build/css/'));
      });
      subTasks.push(item + '_css');
      tasks.push(item + '_css');
    }
    if (config[item]['js']) {
      gulp.task(item + '_js', function () {
        gulp.src('js/jquery.js')
          .pipe(cmd())
          .pipe(gulp.dest('build/js'));
        return gulp.src(config[item]['js'])
         .pipe(concat(item + '-main.js'))
          .pipe(cmd({
            ignore: ['jquery']
          }))
          .pipe(uglify())    //壓縮
          .pipe(gulp.dest('build/js'));  //輸出
      });
      subTasks.push(item + '_js');
      tasks.push(item + '_js');
    }
    if (subTasks.length > 0) {
      gulp.task(item, ['clean'], function () {
        gulp.start(subTasks, 'serve');
      });
    }
  })(item);
}
//監聽服務
gulp.task('serve', function () {
  //啓動80端口做爲本地web服務器
  var server = gls.static('./', 80);
  server.start();
  //監聽文件目錄
  gulp.watch([
    path.resolve(__dirname, './css/*.css'),
    path.resolve(__dirname, './js/*.js'),
    path.resolve(__dirname, './*.html')
  ],
    function (file) {
      gulp.start(tasks, function () {
        server.notify.apply(server, [file]);
      })
    });
});
//清理目標構建文件
gulp.task('clean', function (cb) {
  del(['build/css/*', 'build/js/*']).then(paths => {
    cb();
    console.log('Deleted files and folders:\n', paths.join('\n'));
  });
});
//默認的任務，執行所有的構建任務
gulp.task('default', ['clean'], function () {
  gulp.start(tasks, 'serve');
});