首页 文章

适用于Jekyll，Webpack和Vue的开发人员设置

提问于
浏览 次
3

我正在使用一个使用Jekyll，Webpack和Vue的项目样板 . 我目前有一个启动webpack-dev-server的npm脚本 . 作为一个业余爱好者，我想知道如何实现以下目标：

  • 监视 ./vue 文件夹中的文件以进行更改

  • on change，捆绑到 ./src/assets/js/bundle.js

  • 执行 jekyll build 所以 ./src 中的文件被构建为 ./dist

  • 刷新页面（或使用热模块更换）

任何建议，或在正确的方向推动将是惊人的 . 目前状态下的回购在这里：https://github.com/jesselcampbell/peregrine

编辑

一种可能的解决方案可能是

  • ax webpack-dev-server来自等式

  • 使用Webpack --watch 自动将我的 ./vue 文件捆绑到 ./src/assets/js/

  • 使用 jekyll-watch gem查看 ./src 并在发生更改时重建为 ./dist

  • 使用 jekyll serve 在开发期间在本地运行该站点

webpack vue.js jekyll

3 回答

  • 0

    我有完全相同的设置，最终得到了一个有效的解决方案 .

    目录设置

    root folder 中的 _config.yml ：

    destination: dist
source: src
keep_files: 
  - webpack

    A webpack folder 对于一切"webpackable"（JS，CSS，LESS， .vue ，...）， webpack.config.js 我用于初始设置：

    const path = require('path');
const webpack = require('webpack')
const WebpackShellPlugin = require('webpack-shell-plugin')

module.exports = {
    watch: true,
    entry: path.join(__dirname, 'entry.js'),
    output: {
        path: path.join(__dirname, '..', 'dist', 'webpack'),
        filename: 'bundle.js',
        publicPath: '/webpack/'
    },
    module: {
        rules: [{
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&mimetype=application/font-woff"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader"
            },
        ]
    },
    plugins: [
        // https://stackoverflow.com/a/39283602/903011
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new WebpackShellPlugin({onBuildStart:['cd .. && jekyll b --watch']})
    ]
}

// start live server
var liveServer = require("live-server");
var params = {
    port: 8080, // Set the server port. Defaults to 8080.
    root: "../dist", // Set root directory that's being served. Defaults to cwd.
    open: true, // When false, it won't load your browser by default.
    logLevel: 1, // 0 = errors only, 1 = some, 2 = lots
};
liveServer.start(params);

    A src folder （在根级别，与 webpack 相同的级别）我保留了整个Jekyll的东西，以及 .html 文件 . 我的 footer.html 文件包含在所有文件中 webpack/bundle.js .

    A dist folder 带有编译文件，可以直接使用（在Web服务器上，CDN上......）

    它是如何工作的

    • 我在根文件夹中运行 webpack （它监视文件夹）

    • 它构建 bundle.js 并将其放在 /dist/webpack 中 . 使用子文件夹，以便在编译时不被Jekyll覆盖（参见上面的Jekyll配置） . 它也可以是一个文件，但我有其他webpack发出的文件

    • 它启动了一个Jekyll构建和监视进程 - 在 src 上，输出到 dist

    • 它启动一个livereload服务器，它服务于 dist

    当我修改 webpack 文件夹中的文件时， webpack rebuilds bundle.js . livereload服务器看到更改并更新浏览器 .

    当我在 src 中修改文件时，Jekyll会看到更改并重建 .html 文件 . livereload服务器看到更改并更新浏览器 .

    希望这可以帮助 .

    回复于
  • 0

    杰西，看看PM2 .

    http://pm2.keymetrics.io/

    要实现您想要做的事情，可以创建一个.sh文件，该文件运行您在监视资产更改时要运行的命令 .

    这也是一篇有用的文章：

    https://medium.com/dailyjs/vue-js-simultaneously-running-express-and-webpack-dev-server-292f4a7ed7a3

    -Brice

    回复于
  • 1

    我用Jekyll，Vue和Webpack创建了这个回购 . 有多个入口点，包含常用和供应商JavaScript的块 .

    https://github.com/PierBover/jekyll-vue-webpack-starter-kit

    要启动Webpack watch和Jekyll服务只是 npm run dev ，它们将并行运行 .

    回复于

相关问题