evocode / metalsmith-base Goto Github PK

I would like to host my site in a subfolder (for example Github Pages: http://username.github.io/project/), where this absolute syntax would not work:

How can I make it work with root on localhost but append "project" (in this case) on remote?

Thanks!

Moving over to Khaos will make scaffolding new projects using metalsmith-base extremely easy.

Thank you for a great starter kit. How would I add live reload to it? Thanks!

Thank you for a great starter kit.

But when i run it, there is an error in app.js

app.js:1 Uncaught ReferenceError: webpackJsonp is not defined

webpackJsonp([0],[
/* 0 /
/**/ function(module, exports, webpack_require) {
...

Please tell me how to fix it. Thank you.

After doing npm install then running npm run start:

[22:08:57] Using gulpfile e:\git\metalsmith\metalsmith-base\gulpfile.js [22:08:57] Starting 'vendor'... [22:08:57] Starting 'webpack'... [22:08:57] Starting 'styles'... [22:08:57] Starting 'metalsmith'... [22:08:58] Finished 'vendor' after 1.05 s [22:09:01] Finished 'styles' after 3.65 s [22:09:01] Finished 'webpack' after 3.94 s [22:09:01] Starting 'scripts'... [22:09:01] Finished 'scripts' after 8.37 μs [22:09:01] Finished 'metalsmith' after 3.98 s [22:09:01] Starting 'default'... [22:09:01] Finished 'default' after 13 μs [22:09:01] Starting 'watch'... [22:09:01] Finished 'watch' after 48 ms [22:09:01] Starting 'server'... Server: http://localhost:3507 [22:09:01] Finished 'server' after 159 ms

Then opening the url in chrome I get the following error in the console:

app.js:1 Uncaught ReferenceError: webpackJsonp is not defined

Windows 7
Git Bash
Google Chrome

Why the webpack dependency in package.json? It doesn't appear to be used. Or, am I missing something?

I would like to make use of for example:
https://github.com/IanLunn/Hover
https://github.com/mbostock/d3

For the first one I would like to make use of the bundled scss files and for the second one only the plain min.js file. Should I add bower to the mix or is this somehow supposed to be taken care of by npm or webpack? Thanks and sorry if the question is too basic ...

I have saw the question No.5(#5) Proper way to include JS and CSS libs?

But i also don't know how to do that...
Can you give a more detailed example for "how to add the bootstrap.min.js" ...

gulp.task('webpack', function(callback) {
var webpackPlugins = [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify(args.production ? 'production' : 'development'),
},
})
];

if (args.production) {
webpackPlugins.push(new webpack.optimize.UglifyJsPlugin({minimize: true}));
}

var webpackConfig = {
context: path.join(__dirname, site.metalsmith.config.scriptRoot),
entry: {
app: './app',
vendor: ['jquery']
},
output: {
path: path.join(__dirname, site.metalsmith.config.assetRoot, 'assets'),
filename: '[name].js'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?optional[]=runtime&stage=0'
}
]
},
plugins: webpackPlugins
};

When using code splitting, the app.js file depends on the vendor.js file. Loading them asynchronously doesn't guarantee that vendor.js is loaded before app.js, which causes a webpackJsonp is not defined error.

The easy solution is to just remove the async tag, but maybe there's a way to asynchronously load both of them synchronously "on a different thread" or something. I kind of doubt it as this is just an html template, but yeah.

Before:

<!-- layouts/partials/default.html -->
<script src="/assets/vendor.js" async></script>
<script src="/assets/app.js" async></script>

After:

<!-- layouts/partials/default.html -->
<script src="/assets/vendor.js" ></script>
<script src="/assets/app.js" ></script>