Develop Reference

Why pre/postfixes don't work and are shown as text on the webpage using Gulp4?

I'm trying to use libraries 'gulp-file-include' to include partials (header, footer) in my main html file. I'm also trying to use i18n using 'gulp-html-i18n'. Both partials and i18n seem working ("file-include" throws error when I'm trying to put the wrong path of file, or i18n creates lang directories). However when I try to wrap them into needed pre/postfixes, they are shown as plain text on the webpage.
Here is my gulpfile.js : Codeshare
Html:
<div>##include('header.html')</div>
<div>${{index.title}}$</div>
</body>
Result:

From looking at the https://www.npmjs.com/package/gulp-file-include documentation I can see that there is a difference in the gulpfile.js file you provided and the example in the documentation.
Your code:
function html() {
return src(path.src.html)
.pipe(fileinclude())
.pipe(i18n({
langDir:'./lang',
trace:true,
createLangDirs: true
}))
.pipe(dest(path.build.html))
.pipe(browserSync.stream())
}
gulpfile.js in the documentation:
gulp.task('fileinclude', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest('./'));
});
As you can see, it seems that there are missing parts prefix and basepath which are probably needed.
From looking at the documentation of https://www.npmjs.com/package/gulp-html-i18n it seems that you need to add index.js or index.json or index.yaml under the specific lang folder, like ./lang/en-US/ with the appropriate translations (e.g. "title" in your case)

The problem was with path set in browsersync. I set the src(dev) path instead of build.

Webpack to simply compile a bunch of Pug templates to HTML

Im getting started with webpack but one thing I cannot for the life of me work out is how to take a folder (with possible nested folders), full of .pug templates, and simply compile them to static html and put them in the output folder, maintaining any nested folder structure for each output html file that was in the source templates folder...
I dont want to have to manually specify each individual .pug file, and I definitely dont want webpack to try and parse the .pugs into JS and then attempt to require/import any of the imgs/fonts etc in the pug files and then complain about it, Im just after a basic, static 1:1 compile, pug file in, html file out. Why is it so hard to do that?

Use pug-html-loader to convert .pug to .html file. Use file-loader to copy the file to desired location. Don't use html-loader as you don't want to process resources used by the generated file.
You will end up something like this in your loader rules (untested, webpack 1 syntax, you may need to tweak it for webpack 2)
{
test: /\.pug$/,
loaders: ['file-loader?name=[path][name].html', 'pug-html-loader?pretty&exports=false']
}
Next you need to require all your pug files in your entry file
function requireAll (r) { r.keys().forEach(r); }
requireAll(require.context('./', true, /\.pug$/));

This can be done very simply with only html-webpack-plugin and pug-loader.
webpack.config.js
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// No javascript entrypoint to evaluate. Let the plugin do the heavy lifting
entry: {},
// Translate Pug to HTML
module: { rules: [ { test: /\.pug$/, use: 'pug-loader' } ] },
// Save HTML to file
plugins: [ new HTMLWebpackPlugin({ template: './src/index.pug' }) ]
};
./src/index.pug
doctype html
html(land="en")
head
include path/to/another.pug
...
Got this information from https://extri.co/2017/05/23/using-htmlwebpackplugin-and-pug/ and you can also go further to import css and javascript as normally done with html-webpack-plugin.

Import and convert JS files using Gulp & Babel

Consider the following files:
//foo.js
(function(){
console.log('working');
})();
//bar.js
import 'foo.js';
Now I'm using gulp to compiled from ES6 to ES5. Here's the relevant task:
gulp.task('build-js', function() {
return gulp.src('bar.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('./dist'));
});
My output file looks like this:
'use strict';
require('foo.js');
The isn't the outcome I expected. I want all code to import into the single output file using the ES5 conversion. This way, the single JS file can be loaded in a browser and run correctly. What do I need to do for the desired outcome?
Since bar.js only imports foo.js, the output file should look exactly like foo.js. Also, since foo.js contains only a self executing function, the output file should execute this immediately and log working to the console.

You should add a 'bundle' task if you want to create a single file for the browser. Take a look at browserify or webpack.
http://browserify.org/
https://webpack.github.io/
You usually need to specify an entry point, and the bundler resolves all the dependencies and creates a single js file.
EDIT:
An example task for gulp, using browserify:
var browserify = require('gulp-browserify');
gulp.task('bundle', function() {
gulp.src('./dist/bar.js') // entry point
.pipe(browserify())
.pipe(gulp.dest('./dist'))
});

Is there a way to set smart/dynamic 'joinTo' output-files in Brunch?

First, I'll post an example how I "think" it may be defined in a Brunch configuration file:
files:
javascripts:
joinTo:
# $1 = first sub-match in RegExp
'app_$1.js' : /^app_([a-z0-9]*)/
'vendor.js' : /^vendor/
Essentially I'm trying to figure out a way to have multiple outputs based on the name of each "app_??????" folders the Javascript files are stored in.
So if you have this folder structure, you would get the following output:
brunch_project/
app_300x250/
other.js
app.js
index.html
app_728x90/
other.js
app.js
index.html
public/
app_300x250.js
app_300x250.html
app_728x90.js
app_728x90.html
vendor.js
Note:True, I didn't show in the configuration how the HTML would get renamed/merged the same as the JS files, but that's how I'd like it to work ideally. Bonus high-fives for anyone who shows me how it's done!

If you have only two variants, i'd suggest to just add files like app_728x90.html inside assets/ directories. Then, create subfolders with resolutions inside app/. And use it in regexps.
If you need more than two variants, you can use JavaScript / CoffeeScript code to generate the joinTo clause like that:
joinTo = {}
for res in resolutions
joinTo[res] = ///^app\/#{res}///
exports.config = files: javascripts: joinTo: joinTo

Grunt + Concat + Angularjs

Setup:
A Gruntfile with the following task:
concat: {
build: {
files: {
'build/app.js': [
'src/.js',
'src//.js',
'!src/vendors/'
],
}
}
A lot of angular modules, with its controllers, services, and so on, with a structure like this:
a/
a.js // Module declaration like: angular.module('a',[])
a-controller.ks // Which sets a controller in its root module definition like: angular.module('a').controller()...
Issue:
The task concatenates all the js files it finds in the build folder to a single app.js file, and it does this fine, but messes up with the order of files when concatenating.
For instance, it concatenates first the controller file instead of the main folder file containing the module declaration, triggering the following error:
Module xxxx not available!
I suppose the issue lies in the way concat builds up the files and that is done by the grunt core and specifically the minimatch library, and the possibility it treats dashes to be first than letters, but I don't know how configure to change that behavior, and even know if that is possible.
Question:
So, the question is: How can I make Grunt/Grunt-concat to process dashed f first than the others in the same folder so the ordering is maintained?
Thanks
Update 1:
After digging more, It seems that it has nothing to do with the ordering inside a folder, but Grunt/Core sending the root files to the end and putting them the leaf ones first.

Just specify the order you want to concat your files, placing them in order, what I mean is, first add your single files that should be concatenated at start, after your full folder that does not need to have an order, and finally your final files, something rougth like this:
grunt.initConfig({
concat: {
js: {
src: ['lib/before.js', 'lib/*', 'lib/after.js'],
dest: 'bundle.js',
}
}
});

You will have to specify to the grunt-concat task the order you want your files built. For my projects, I typically keep a folder structure where controllers go in a app/controllers folder, services in services, and etc, but names can vary. I also keep an app.js that declares my app module and specifies the config handler for it. I use a config like this for grunt-uglify but the same can be done for concat with little to no changes:
uglify: {
development: {
files: {
'public/scripts/app.js': [
'public/app/app.js',
'public/app/controllers/*.js',
'public/app/directives/*.js',
'public/app/services/*.js'
]
}
}
}

I just copy paste my answer, the detail you want on second picture, i hope help you.
you may consider this solution
Separate the module declaration to xxx.module.js
In grunt-contrib-concat modify the config like below :
place this outside grunt.initConfig
var clientApp = './app/';
grunt-contrib-concat config
dist: {// grab module first, state the second
src: [
clientApp+'**/*-controller.js',
clientApp+'**/*.module.js',
clientApp+'**/*.state.js',
clientApp+'**/*.js'
],
dest: 'dist/<%= pkg.name %>.js'
}
i use state to so i have to define state too before trying to navigate to any state. This is preview my code, the module declaration is declared fist before anything, then my state. even minified doesnt create any problem.
I hope this help you.
i follow this johnpapa's style guide, your problem might solve there if my solution not work