webpack + gulp 传统多页面搭建上一代的脚步是完全使用webpack来做的一个打包多页面，可是在使用的效果

事情的经过是这样的webpack 传统 jquery + bootstarp 搭建

上一代的脚步是完全使用webpack来做的一个打包多页面，可是在使用的效果来说发现webpack在多页面来吧html 和 css 也打包进去页面加载速度并没有理想中这么好。

所以这一次就加入了gulp来优化了一下

- demo
    - src                #代码开发目录
        +components  #前端组件存放区
          component.html
        +page
            +home
                home.scss
                home.html
                home.js
    
    - dist               #gulp编译打包输出目录,无需建立目录可由gulp根据配置自动生成
        + css                
        + js
        +images
        home.html
    + node_modules       #所使用的nodejs模块
    package.json         #项目配置
    webpack.config.js    #webpack配置

由于这次是使用typescript做的js编译器所以这次的webpack.config.js也继续修改成

const webpack = require('webpack');
const path = require('path');
const fs = require('fs');

const srcDir = path.resolve(__dirname, 'src');

function getEntry() {
    let jsPath = path.resolve(srcDir, 'pages');
    let dirs = fs.readdirSync(jsPath);
    console.log(dirs);
    let matchs = [], files = {};
    dirs.forEach(function (item) {
        let path_js = path.resolve(jsPath, item);
        jsDirs = fs.readdirSync(path_js);
        jsDirs.forEach(function (js) {
            matchs = js.match(/(.+)\.ts$/);
            if (matchs) {
                files[matchs[1]] = path.resolve(path_js, js);
            }
        });
    });
    console.log(files);
    return files;
}

module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: getEntry(),
    output: {
        filename: "[name].js"
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    module: {
        rules: [
            {test: /\.ts?$/, loader: "awesome-typescript-loader"},
            {enforce: "pre", test: /\.js$/, loader: "source-map-loader"}
        ]
    }
};

下面的gulp修改成

const gulp = require('gulp');
const path = require('path');
const fs = require('fs');
const htmlImport = require('gulp-html-import');
const webpack = require('webpack-stream');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const merge = require('merge-stream');


/**
 * 编译html代码
 */
gulp.task('html', () => {
    return gulp.src(['./src/**/*.html', '!./src/components/*.html'])
        .pipe(htmlImport('./src/components/'))
        .pipe(rename(
            {
                dirname: ''
            }
        ))
        .pipe(gulp.dest('dist'))
});

/**
 * 编译webpack
 */
gulp.task('webpack', () => {
    return gulp.src('./src/pages/**/*.ts')
        .pipe(webpack(require('./webpack.config')))
        .pipe(gulp.dest('dist/assets/js'));
});

/**
 * 编译scss
 */

let SrcDirs = path.resolve(__dirname, 'src', 'pages');

function getFolders(dir) {
    return fs.readdirSync(dir)
        .filter(function (file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
}

/**
 * 编译sass
 */

gulp.task('sass', () => {
    let folders = getFolders(SrcDirs);

    let tasks = folders.map(function (folder) {
        let scssPath = path.join(SrcDirs, folder, '/*.scss');
        return gulp.src(scssPath)
            .pipe(concat(scssPath))
            .pipe(sass())
            .pipe(rename(folder + '.css'))
            .pipe(gulp.dest('./dist/assets/css'));
    });

    return merge(tasks);
});

gulp.task('default', gulp.parallel('html', 'webpack', 'sass'));

这次不自动刷新这次基于 http-server 来做

npm run http:run  #即刻运行

允许gulp即刻得到一份传统的html代码直接丟给上个世纪的技术人员套模版 [wordpress \ CMS ] 的外包。还有政府项目也可以用这个。

项目地址

webpack + gulp 传统 多页面搭建

webpack + gulp 传统多页面搭建