Livereload of .html pages - Gulp - gulp

I have got this code so far, but it does not work.
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('webserver', function() {
connect.server({
livereload: true
});
});
gulp.task('default', ['webserver']);

You should specify file path to watch look this :
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('connect', function() {
connect.server({
root: 'app',
livereload: true
});
});
gulp.task('html', function () {
gulp.src('./app/*.html')
.pipe(connect.reload());
});
gulp.task('watch', function () {
gulp.watch(['./app/*.html'], ['html']);
});
gulp.task('default', ['connect', 'watch']);

Related

Localhost doesn't display img but index.html does

i have a problem with at localhost. I use gulp server for my project and i want to display img but when i use localhost it doesn't display but when i open my index.html file it works fine
<img src="src/img/logo.png" alt="Logo">
I can't find a good src to display it. How it should looks like?
edit:
my gulpfile is:
const gulp = require("gulp");
const sass = require("gulp-sass");
const sourcemaps = require('gulp-sourcemaps');
var connect = require('gulp-connect');
gulp.task('connect', function(cb) {
connect.server({
root: './dist',
livereload: true
});
cb();
});
gulp.task("sass", function() {
return gulp.src('./src/scss/main.scss')
.pipe(sourcemaps.init())
.pipe(sass({errLogToConsole: true}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./dist/css'))
.pipe(connect.reload());
});
gulp.task('html', function () {
return gulp.src('./src/*.html')
.pipe(gulp.dest('./dist'))
.pipe(connect.reload());;
});
gulp.task('watch', function () {
gulp.watch('./src/scss/**/*.scss', gulp.series('sass'));
gulp.watch('./src/**/*.html', gulp.series('html'));
});
gulp.task('default', gulp.series('connect', 'watch'));
Based on your gulp configuration your HTML files from src are moved (Part 1) into your ./dist/ folder and then served from there (Part 2). So move your index.html into src and remove it from the img tag.
Moving HTML to dist folder (Part 1):
gulp.task('html', function () {
return gulp.src('./src/*.html')
.pipe(gulp.dest('./dist'))
.pipe(connect.reload());;
});
Gulp server on dist folder (Part 2):
gulp.task('connect', function(cb) {
connect.server({
root: './dist',
livereload: true
});
cb();
});
So what you need is either a task that moves your images as well or the easy way:
Create a img folder in dist containing the image and change the path in your index.html as follows:
<img src="img/logo.png" alt="Logo">
I would recommend to change your gulp config, so it serves from your src folder for development and create a second task for a build process (Including minify css, js and moving the files). I just add a config that i used some time ago:
var gulp = require('gulp');
var sass = require('gulp-sass');
var browsersync = require("browser-sync").create();
var babel = require('gulp-babel');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var plumber = require('gulp-plumber');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var rev = require('gulp-rev');
var revdel = require('rev-del');
var collect = require('gulp-rev-collector');
// Development Tasks
// -----------------
// BrowserSync
function browserSync(done) {
browsersync.init({
server: {
baseDir: "./src/"
},
port: 3000
});
done();
}
// BrowserSync Reload
function browserSyncReload(done) {
browsersync.reload();
done();
}
// Watchers
function watchFiles(){
gulp.watch('src/scss/**/*.scss', gulp.series('sassify', browserSyncReload));
gulp.watch('src/*.html', gulp.series(browserSyncReload));
gulp.watch('src/js/**/*.js', gulp.series(browserSyncReload));
}
// Optimization Tasks
// ------------------
// Sassify
gulp.task('sassify', (cb) => {
gulp.src('src/scss/**/*.scss') // Gets all files ending with .scss in src/scss and children dirs
.pipe(plumber())
.pipe(sass()) // Passes it through a gulp-sass, log errors to console
.pipe(gulp.dest('src/css')) // Outputs it in the css folder
.pipe(browsersync.stream());
cb();
});
// Optimizing CSS
gulp.task('css', (done) => {
gulp.src('src/css/*.css')
.pipe(plumber())
.pipe(cssnano())
.pipe(gulp.dest('dist/css'));
done();
});
// Optimizing JS
gulp.task('js', (cb) => {
gulp.src('src/js/*.js')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['#babel/env']
}))
.pipe(uglify())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/js'));
cb();
});
// HTML
gulp.task('html', (cb) => {
gulp.src('src/*.html')
.pipe(gulp.dest('dist'));
cb();
});
// Optimizing Images
gulp.task('images', function(done) {
gulp.src('src/assets/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/assets'))
done();
});
// Generate Revisions...
gulp.task('revision:rename', function(){
gulp.src(["dist/**/*.css",
"dist/**/*.js"])
.pipe(rev())
.pipe(revdel())
.pipe(gulp.dest('dist'))
.pipe(rev.manifest({ path: 'manifest.json' }))
.pipe(gulp.dest('dist'))
});
// update references
gulp.task('revision:updateReferences', function(){
gulp.src(['dist/manifest.json','dist/**/*.{html,json,css,js}'])
.pipe(collect())
.pipe(gulp.dest('dist'))
});
// Cleaning
gulp.task('clean', function() {
return del.sync('dist').then(function(cb) {
return cache.clearAll(cb);
});
})
gulp.task('clean:dist', (cb) => {
del.sync(['dist/**/*', '!dist/assets', '!dist/assets/**/*']);
cb();
});
// Build Sequences
// ---------------
gulp.task('default',
gulp.series(
'sassify',
gulp.parallel(
watchFiles,
browserSync
)
)
);
gulp.task('build',
gulp.series(
'clean:dist',
'sassify',
gulp.parallel(
'css',
'js',
'images'
),
'html'
)
);

Live reload is not working after upgrading to Gulp 4

My gulpfile.js looks like below,
var gulp = require('gulp');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-csso');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var connect = require('gulp-connect');
gulp.task('connect', function () {
connect.server({
root: 'build',
livereload: true,
port: 3000
});
});
gulp.task('html', function () {
return gulp.src('client/html/**/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('build'))
.pipe(connect.reload())
});
gulp.task('css', function () {
return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'client/scss/*.scss'])
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(gulp.dest('build/css'))
.pipe(connect.reload())
});
gulp.task('images', function () {
return gulp.src(['client/assets/**/*.*'])
.pipe(gulp.dest('build/assets'))
.pipe(connect.reload())
});
gulp.task('js', function () {
return gulp.src('client/javascript/*.js')
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'))
.pipe(connect.reload())
});
gulp.task('watch', gulp.parallel('html', 'css', 'js'));
gulp.task('default', gulp.series('connect', 'watch', 'html', 'css', 'images', 'js'));
When I run this code, I do not get any error on console, but also things do not auto reload on browser. I did this right with previous versions of Gulp, but unable to run it with Gulp 4 somehow. Now whenever I stop the server, I get below error,
[18:44:35] The following tasks did not complete: default, connect
[18:44:35] Did you forget to signal async completion?
Any help will be appreciated. Thanks
Try changing your connect function to explicitly call done(); I think you'll need this when calling series() in Gulp 4
gulp.task('connect', function (done) {
connect.server({
root: 'build',
livereload: true,
port: 3000
});
done();
});
gulp.task('html', (done) =>
gulp.src('client/html/**/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('build'))
.on('end', () => {
connect.reload();
done();
});
);

html files in dist folder don't update

I'm using Zurb panini to do templating and construct pages. I'm not sure where I did wrong. Now if I update my scss files, the BrowserSync will reload and the update will show. But it just doesn't work when I update html files. Could anyone help me to take a look my Gulp config? Thx~
var gulp = require('gulp');
var panini = require('panini');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var autoprefixer = require('autoprefixer-core');
var clean = require('gulp-clean');
gulp.task('copy', function() {
return gulp.src('./src/assets/icon/*')
.pipe(gulp.dest('./dist/assets/icon'));
});
gulp.task('sass', function(){
var processors = [
autoprefixer({browsers:['last 2 versions']})
];
return gulp.src('./src/assets/sass/*.scss')
.pipe(sass())
.pipe(concat('style.css'))
.pipe(gulp.dest('./dist/assets'))
});
gulp.task('clean', function () {
return gulp.src('./dist/*.html', {read: false})
.pipe(clean());
});
gulp.task('pages', function() {
return gulp.src('src/pages/**/*.html')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
}))
.pipe(concat('index.html'))
.pipe(gulp.dest('./dist'));
});
gulp.task('browserSync', function(){
browserSync.init({
server: "./dist"
});
});
gulp.task('watch', function(){
gulp.watch(['./src/{layouts,partials}/**/*'], [panini.refresh]);
gulp.watch("./src/assets/sass/**/*.scss", ['sass']).on('change', browserSync.reload);
gulp.watch("./src/**/*.html").on('change', browserSync.reload);
});
gulp.task('build', ['clean', 'copy', 'sass', 'pages']);
gulp.task('default', ['build', 'watch', 'browserSync']);
//gulp 4.0.2 panini 1.6.3
gulp.task('compile-html', function(){
var paniniOption = {
root: 'src/html/pages/',
layouts: 'src/html/layouts/',
partials: 'src/html/includes/',
helpers: 'src/html/helpers/',
data: 'src/html/data/'
}
return gulp.src('src/html/pages/**/*.html')
.pipe(panini(paniniOption))
.pipe(gulp.dest('_site'));
});
gulp.watch('src/html/pages/**/*').on('change', gulp.series('compile-html', browserSync.reload));
gulp.watch('src/html/{layouts,includes,helpers,data}/**/*').on('change', gulp.series(async () => { await panini.refresh() }, 'compile-html', browserSync.reload));

Can someone review my gulpfile.js?

For anyone trying to minify-html and gulp-sass and browser-sync below is my fixed gulpfile.js
I hope it helps someone as gulp can be difficult for new folks like myself.
'use strict';
var gulp = require('gulp');
var minifyHTML = require('gulp-minify-html');
var sass = require('gulp-sass');
var browsersync = require('browser-sync');
// BrowserSync proxy
gulp.task('browser-sync', function() {
browsersync({
proxy: "localhost:8888"
});
});
// BrowserSync reload all Browsers
gulp.task('browsersync-reload', function () {
browsersync.reload();
});
gulp.task('minify-html', function() {
return gulp.src('src/*.html')
.pipe(minifyHTML({ empty: true }))
.pipe(gulp.dest('dist'))
.pipe(browsersync.reload({ stream:true }));
});
gulp.task('sass', function () {
gulp.src('./src/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/css'))
.pipe(browsersync.reload({ stream:true }));
});
// watch task
gulp.task('watch', ['browser-sync'], function () {
gulp.watch('./src/**/*.html', ['minify-html']);
gulp.watch('./src/sass/**/*.scss', ['sass']);
});
gulp.task('default', [ 'minify-html', 'sass', 'watch']);
Here's a quick stab I took at refactoring your gulpfile. All I've done is removed some duplicated code and split up the tasks in a more logical way. The main thing I'd suggest is that you make sure each task has a single purpose, and that you use the gulp dependency system to combine them as needed.
For future reference I'd ask the Code Review StackExchange as they are more likely to help with refactoring and code reviews.
Sorry for any mistakes, as I don't have an environment to test.
// include gulp
var gulp = require('gulp');
// include plug-ins
var minifyHTML = require('gulp-minify-html');
var minifyCSS = require('gulp-minify-css');
var changed = require('gulp-changed');
var concat = require('gulp-concat');
var browserSync = require('browser-sync').create();
var paths = {
html: { src: './src/*.html', dest: './' },
css: { src: 'src/css/*.css', dest: 'css' },
};
// minify new or changed HTML pages
gulp.task('html:build', function() {
gulp.src(paths.html.src)
.pipe(changed(htmlDst))
.pipe(minifyHTML())
.pipe(gulp.dest(paths.html.dest));
});
// CSS concat, auto-prefix and minify
gulp.task('css:build', function() {
gulp.src(paths.css.src)
.pipe(concat('styles.css'))
.pipe(minifyCSS())
.pipe(gulp.dest(paths.html.dest));
});
gulp.task('html:watch', function() {
gulp.watch(paths.html.src, ['html:build']);
});
gulp.task('css:watch', function() {
gulp.watch(paths.css.src, ['css:build']);
});
gulp.task('serve', function() {
browserSync.init({
server: "./"
});
gulp.watch(["css/*.css", "*.html"]).on('change', browserSync.reload);
});
// default gulp tasks
gulp.task('build', ['html:build', 'css:build']);
gulp.task('watch', ['html:watch', 'css:watch']);
gulp.task('default', ['build', 'watch', 'serve']);

gulp-connect doesn't work on gulp watch

I've just started to learn gulp and I'm trying to use gulp-connect https://www.npmjs.com/package/gulp-connect.
This is my files structure
And it's my gulpfile.js file
var gulp = require('gulp'),
concatCss = require('gulp-concat-css'),
minifyCss = require('gulp-minify-css'),
rename = require('gulp-rename'),
notify = require('gulp-notify'),
autoprefixer = require('gulp-autoprefixer'),
livereload = require('gulp-livereload'),
connect = require('gulp-connect');
// server connect
gulp.task('connect', function() {
connect.server({
root: [__dirname],
livereload: true
});
});
// css
gulp.task('css', function () {
return gulp.src('css/*.css')
/*.pipe(notify('Done!'))*/
.pipe(autoprefixer({
browsers: ['> 1%', 'IE 7']
}))
.pipe(concatCss("style.css"))
.pipe(minifyCss())
.pipe(rename('style.min.css'))
.pipe(gulp.dest('dist/'))
.pipe(connect.reload());
});
//html
gulp.task('html', function(){
gulp.src('index.html')
.pipe(connect.reload());
});
// watch
gulp.task('watch', function () {
gulp.watch('css/*.css', ['css']);
gulp.watch('index.html', ['html']);
});
// default
gulp.task('default', ['connect', 'html', 'css', 'watch']);
I don't undestand why all works correctly when I use command gulp in node.js console, but if I try to use command gulp watch I get an error in browser console
http://localhost:8080/ net::ERR_CONNECTION_REFUSED
What did I do wrong?
You're not running 'connect' task when running 'watch'.
Reformat your tasks like this
gulp.task('watch:assets', function () {
gulp.watch('css/*.css', ['css']);
gulp.watch('index.html', ['html']);
});
gulp.task('default', ['connect', 'html', 'css', 'watch:assets']);
gulp.task('watch', ['connect', 'watch:assets']);
Go back to terminal and run
gulp watch