So, I have some landing pages files and previously my folder structure is
Old Folder Structure
landing-page
|-project1
|-css
|-js
|-scss
|-All .html files
|-project2
|-css
|-js
|-scss
|-All HTML files
|-gulpfile.js
|-package.json
gulpfile.js
For Project 1
gulp.task('watch:project1', gulp.series(function() {
browserSync.init({
server: {
baseDir: 'project1'
},
})
}));
For Project 2
gulp.task('watch:project2', gulp.series(function() {
browserSync.init({
server: {
baseDir: 'project2'
},
})
}));
New Folder Structure
landing-page
|-css
|-js
|-project1 ----> Contains HTML pages of project 1
|-project2 ----> Contains HTML pages of project 2
|-scss
|-gulpfile.js
|-package.json
Now, when I tried to run the Watch function it works but did not loading STYLE and JS files with error Cannot GET /
Updated gulpfile Position
landing-page
|-css
|-js
|-project1 ----> Contains HTML pages of project 1
|-project2 ----> Contains HTML pages of project 2
|-scss
|-gulpfile.js
|-package.json
gulpfile.js
gulp.task('watch:demo1', gulp.series(function() {
browserSync.init({
server: {
baseDir: '../landing-page/',
index: "../landing-page/project1/index.html"
}
})
}));
The watch code mentioned above only serve the index file.
So, I have updated my code
gulp.task('watch:demo1', gulp.series(function() {
browserSync.init({
server: {
baseDir: '../landing-page/',
index: "../landing-page/project1/index.html",
directory: true
}
})
}));
It serves all the files like mentioned below in the image.
But, the problem is it did not directly serve a specific project. I mean if I run watch:demo1 it should serve project1 and if I run watch:demo2 it should serve project2
Related
I have html files located on different paths in src folder. I can read them at once with gulp.src(['path/to/file1','path/to/file2']) and output them such as gulp.dest('dist/') and it works fine. But what if I want to output the input files in different paths in the same gulp task?
project structure
src
- index.html
- pages
- about.html
// how I want to output
dist
- index.html
- pages
- about.html
My gulpfile.js for html task looks like
const filePath = {
input: 'src/',
output: 'dist/',
markup: {
index: 'src/index.html',
pages: 'src/pages/**/*.html',
outputIndex: 'dist/',
outputPages: 'dist/pages/'
}
}
function markup(done) {
src([filePath.markup.index, filePath.markup.pages])
// including src/layouts markup into index and pages markup files
.pipe(fileInclude({
prefix: '##',
basepath: '#file'
}))
// change references to files for build
.pipe(useref({noAssets: true}))
// minify on production
.pipe(mode.production(htmlmin(
{ collapseWhitespace: true, removeComments: true }
)))
.pipe(dest(filePath.output));
return done();
}
So far I have tried
.pipe(dest(filePath.markup.outputIndex));
.pipe(dest(filePath.markup.outputPages));
but it outputs both files in root dist as well as pages folder.
And with gulp-if
.pipe(gulpIf(filePath.markup.pages), dest(filePath.markup.outputPages))
.pipe(dest(filePath.markup.outputIndex));
but this also doesn't seem to work also this throws an error Error: gulp-if: child action is required.
I can do this by creating different tasks for index and pages but is there a way I can do it in a single gulp task?
I'm having an issue getting server side includes to work using browserSync and browsersync-ssi. I'm trying to stick a default header and footer file into each page using includes.
https://www.npmjs.com/package/browsersync-ssi
gulpfile.js:
var browserSync = require('browser-sync').create();
var ssi = require('browsersync-ssi');
gulp.task('serve', function(done) {
browserSync({
server: {
baseDir: ['./template'],
middleware: ssi({
baseDir: __dirname + '/template',
ext: '.shtml',
version: '1.4.0'
})
},
});
Inside my /template folder I have two files:
page.html containing:
<!--#include virtual="./header.shtml" -->
and header.shtml containing some HTML markup
According to the examples this should work, can anyone spot where i have gone wrong? Is there an easier or different way to inject a header\footer into every page?
Hello people of the North, I am trying to minify my HTML using gulp because https://developers.google.com/speed/pagespeed/insights is telling me my site is too slow.
My original html files are in the structure of
/app/blog/page1.html
/app/contact/contactus.html
/app/xxx/xxx.html
With my current code the gulp output puts all of the html files into the _build folder, but this wont work for me since, on page load it will look for the html in the respective folder. Should I / can I put the minified html in its original folder so it is referenced automatically as normal?
gulp.task('minify-html', function () {
return gulp.src(configHTML.src)
.pipe(angularify())
.pipe(minifyHTML())
.pipe(gulp.dest('_build/'));
});
It's possible, you should try changing your code for:
gulp.src(configHTML.src, { base: "." })
.pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
.pipe(gulp.dest("."))
this will minify those files itself
how to serve my assets (img, stuff) and my bower_components folder with gulp?
i have:
src/
assets/
vendor (bower_co..)/
gulp connect task
gulp.task('connect', function() {
connect.server({
root: ['src'],
livereload: true
});
});
gulp-connect readme says:
root: ['app', 'tmp'],
but when i pass multiple args they dont get served.
so what am i missing?..
Here is the 'usemin' section of the gulpfile.js
// usemin Task
gulp.task('usemin', function() {
gulp.src('./*.html')
.pipe(usemin({
css: [minifyCss(), 'concat'],
html: [minifyHtml({empty: true})],
js: [uglify(), rev()]
}))
.pipe(gulp.dest('build/'));
});
When I run 'gulp' it generates all the files I need in the build folder but does not update the links in the index.html file with the newly generated files (minified and concatenated).
Can anyone help me with what I am doing wrong?