Closed jagged3dge closed 8 years ago
Where are you seeing that it's using the base index.html
?
If you mean inside your dist/mobile/
folder, it's just that it's getting renamed to index.html
from index-mobile.html
by the dist
gulp task. Make a change like adding a comment or an inline style tag to change the body's background color to your client/index-mobile.html
and then run gulp browsersync
and see if it shows up.
Thanks for the quick reply.
That's almost what I did. I added a simple div
that differentiates the sources of the html files. It seems to me the mobile app dist task is copying over the main index.html file, instead of the one with the suffix
Ok I took a look & tested it and everything looks just fine, but I think I figured out your issue... are you specifying your mobile target when you run gulp browsersync
? For the main target you can leave the -t
flag blank, but for others you'll need to add the targetname. In your case run gulp browsersync -t mobile
.
The reason for this is that the gulp tasks are either able to run for multiple targets (all at once or a selected subset) or only for one at a time. dist
can run for all targets at once, but browsersync
will only run for one. All of the tasks that are depended upon by the one you call end up deferring to the specific target list chosen by the task named on the command line.
I went through the process again, and I figured out my issue. I apologise for jumping the gun, since it seems the issue lies with my webpack config. I'm using HtmlWebpackPlugin to replace the bundle.js
tag with app.js
and vendor.js
chunks. Here's how I set it up for a single target:
plugins: [
...
new HtmlWebpackPlugin({
filename: '../index.html',
template: './client/index.html',
// template: constants.html.src, // I want to use this, but it doesn't interpolate `targetSuffix` template
chunks: [
'init',
'vendor',
'app'
]
})
]
Could you help me with a way to set up the template
property in the above config block that would properly point to whichever mcfly target
I specify when running gulp dist -t {{target}}
?
Yup you caught something: there's an issue with how we currently use webpack.config.js
in the webpack
task. We don't currently have a way of passing the constants to the config so the target and mode can be consumed.
You'll need to jerry-rig a fix on your side until we finalize what we want to do with this. Fortunately it'll be pretty simple. Specific instructions to follow.
In your gulp_tasks/tasks/webpack.js
add this line in the webpackShare()
function (should be around line 25):
var webpackShare = function(shouldWatch, constants, done) {
var version = helper.readJsonFile('./package.json').version;
var dest = constants.dist.distFolder;
dest = helper.isMobile(constants) ? dest + '/www/' + constants.script.dest : dest + '/' + constants.script.dest;
var mode = constants.mode;
var target = constants.targetName;
var bundleName = constants.bundleName || 'bundle.js';
var releaseName = target + '-v' + version;
var sourceMap = releaseName + constants.exorcist.mapExtension;
webpackConfig = webpackConfig(constants); // ADD THIS LINE
//webpackConfig.entry = ['babel/polyfill', constants.webpack.src];
...
Then in your webpack.config.js
just make the following change to your module.exports
to consume the passed constants and return the result:
'use strict';
var path = require('path');
var webpack = require('webpack');
var helper = require('./gulp_tasks/common/helper');
module.exports = function(constants) {
return {
cache: true,
... config stuff that can use constants if needed ...,
plugins: [
...,
new HtmlWebpackPlugin({
filename: '../index.html',
template: './client/index.html',
template: constants.html.src,
chunks: [
'init',
'vendor',
'app'
]
}),
]
};
};
This might not be the final format that we adopt, but it should get you working in the meantime.
@jagged3dge Please let me know if this worked for you
Yep, that works :+1:
Thanks for making this lovely generator :+1:
I am trying to use the same service base with my web and an ionic/cordova mobile app. To that end, I generated a new
target
usingyo mcfly:target mobile --mobile
which created a newindex-mobile.html
file in theclient
folder.Now when I'm building the
mobile
target, I find that it's using the otherindex.html
file instead of starting off ofindex-mobile.html
. Is this by design? If so, what do I need to change to make it automatically use theindex-{{targetSuffix}}.html
file instead of the originalindex.html
.