Gulp. How to properly implement the connection header and footer from separate files?

I have the folders "app" and "dist". Written two separate Tasca: the first monitors the files in the folder "app", and the second unloads a project in production (the folder "dist"). Everything is OK, but there is one problem.

At some point I want to implement the connection on the page header and footer from separate files. Generally used for this plugin "gulp-rigger", but all the examples of its use taken HTML file, processed, and tosses in "dist". And "dist" and monitored. But I have something wrong.

How can I implement the standardization of files to operate correctly in the folder "app"
July 2nd 19 at 18:21
1 answer
July 2nd 19 at 18:23
Solution
Anything you write do not understand what's wrong with you?

Example:
var gulp = require('gulp'),
rigger = require('gulp-rigger');
var src = {
 html: ['./src/*.html']
},
gulp.task('html', function() {
gulp.src(src.html)
.pipe(rigger())
 .pipe(gulpIf(env !== 'dev', minifyHTML()))
.pipe(gulp.dest(outputDir))
.pipe(connect.reload())
});

gulp.task('watch', function() {
 gulp.watch('./src/**/*.html', ['html']);
});

in the folder src (app) create a folder template, and which files header.html, footer.html and others...
Then in your html files, just write:
//= template/header.html
//= template/footer.html
and voila, disable yourself a headache.
As I understand it, requires the use of templates without unloading in a separate directory. In other words, to gulp read the file in which the templates are connected. And to "glue" the file together with the template he wants to release with subsequent discharge in sootvetstvuyuschuyu folder. - maudie.Man commented on July 2nd 19 at 18:26
: well, then what happens? in the src folder we provided templates, and Tasca gulp collects them and throws in dist (a product). What about a separate folder speech? - Missouri.Terry commented on July 2nd 19 at 18:29
It's true that rigger works out that way. And the author wants to track, say, index.html in the src folder, in which a bunch of connected templates, assembling it into a finished file. Roughly speaking, to watchit this file.
In fact, I use a rigger as you described. There is nothing new to invent and to watchit file with templates without compilation too, will fail. There may be another plugin. - maudie.Man commented on July 2nd 19 at 18:32
: That's right. He spits out index.html in "dist", no problem. Just ideally, I need to edit index.html in the folder "app" and see in browser the result is already mounted header and footer. But I have my watch configured to monitor the folders "app" and not "dist".
There is some kind of normal solution? Or it is necessary to rewrite Tusk watch on the monitor of the dist folder below the project was peresource any change?
I tried to implement the code above. As a result, when you start watch index.html went to dist with the connected header and footer, but the browser opened the file with these commands:
//= template/header.html
//= template/footer.html

If researching gulpfile for this article: webdesign-master.ru/blog/tools/2016-03-09-gulp-beg...
Actually the question is how to implement this in the rigger Assembly. - Myrtice82 commented on July 2nd 19 at 18:35
: I was all misunderstood you.
Yes, do watch out dist and everything will be fine.
Let's see an example with Habra. https://habrahabr.ru/post/250569/ - maudie.Man commented on July 2nd 19 at 18:38
: I gave you an example of a working example, which contains dozens of projects, and the fact that you threw in the link is just an example, and as for me not the best (perhaps what to learn). - Missouri.Terry commented on July 2nd 19 at 18:41
Well, thank you. I will rewrite. - Myrtice82 commented on July 2nd 19 at 18:44
: please:) here's a look at the link above that You suggested a Nice build the front-end of the project, is very correct and clear for beginners. - Missouri.Terry commented on July 2nd 19 at 18:47

Find more questions by tags Gulp.js