Localhost doesn't display img but index.html does - html

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'
)
);

Related

upgrading gulp from 3 to 4 - Task function must be specified error - what to do?

I had a simple javascript webpage and used gulp 3. Now (as I understand) node 10 crashes with gulp 3 so that ive upgraded to gulp 4. I have a very limited knowledge about gulp and read tutorials now on how to upgrade and I am still getting error: Task function must be specified.
Any help would be great. thanks!!
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
// Compiles SCSS files from /scss into /css
gulp.task('sass', function (done) {
gulp.src('app/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify compiled CSS
gulp.task('minify-css', ['sass'], function (done) {
gulp.src('app/css/styles.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify custom JS
gulp.task('minify-js', function (done) {
gulp.src('app/js/index.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Copy vendor files from /node_modules into /vendor
gulp.task('copy', function (done) {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/jquery-easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
/*gulp.src(['node_modules/waypoints/lib/jquery.waypoints.js'])
.pipe(gulp.dest('vendor/waypoint'))*/
gulp.src(['node_modules/animate.css/animate.css'])
.pipe(gulp.dest('vendor/animate'))
/* gulp.src(['node_modules/scrollreveal/dist/scrollreveal.js'])
.pipe(gulp.dest('vendor/scrollreveal'))*/
done()
})
// Optimizing Images
gulp.task('images', function(done) {
gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'));
done()
});
// Default task
/*gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);*/
gulp.task('default', gulp.series('sass', 'minify-css', 'minify-js', 'copy'));
// Configure the browserSync task
gulp.task('browserSync', function (done) {
browserSync.init({
server: {
baseDir: ''
},
port: process.env.PORT || 8080
});
done()
})
// Dev task with browserSync
//old:
/*
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js', 'images'], function () {
gulp.watch('scss/!*.scss', ['sass']);
gulp.watch('css/!*.css', ['minify-css']);
gulp.watch('js/!*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**!/!*.js', browserSync.reload);
});*/
//new
gulp.task('watch', function(){
gulp.watch('app/scss/*.scss')
.on('change', function(path, stats) {
console.log('File ' + path + ' was changed');
}).on('unlink', function(path) {
console.log('File ' + path + ' was removed');
});
});
When converting to gulp 4, all Task arrays:
gulp.task('minify-css', ['sass'], function (done) {
should be using series:
gulp.task('minify-css', gulp.series('sass', function (done) {
final file:
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
// Compiles SCSS files from /scss into /css
gulp.task('sass', function (done) {
gulp.src('app/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify compiled CSS
gulp.task('minify-css', gulp.series('sass', function (done) {
gulp.src('app/css/styles.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
}));
// Minify custom JS
gulp.task('minify-js', function (done) {
gulp.src('app/js/index.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Copy vendor files from /node_modules into /vendor
gulp.task('copy', function (done) {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/jquery-easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
/*gulp.src(['node_modules/waypoints/lib/jquery.waypoints.js'])
.pipe(gulp.dest('vendor/waypoint'))*/
gulp.src(['node_modules/animate.css/animate.css'])
.pipe(gulp.dest('vendor/animate'))
/* gulp.src(['node_modules/scrollreveal/dist/scrollreveal.js'])
.pipe(gulp.dest('vendor/scrollreveal'))*/
done()
})
// Optimizing Images
gulp.task('images', function(done) {
gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'));
done()
});
// Default task
/*gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);*/
gulp.task('default', gulp.series('sass', 'minify-css', 'minify-js', 'copy'));
// Configure the browserSync task
gulp.task('browserSync', function (done) {
browserSync.init({
server: {
baseDir: ''
},
port: process.env.PORT || 8080
});
done()
})
// Dev task with browserSync
//old:
/*
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js', 'images'], function () {
gulp.watch('scss/!*.scss', ['sass']);
gulp.watch('css/!*.css', ['minify-css']);
gulp.watch('js/!*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**!/!*.js', browserSync.reload);
});*/
//new
gulp.task('watch', function(){
gulp.watch('app/scss/*.scss')
.on('change', function(path, stats) {
console.log('File ' + path + ' was changed');
}).on('unlink', function(path) {
console.log('File ' + path + ' was removed');
});
});
watch task:
gulp.task('watch', function (done) {
gulp.watch('scss/*.scss', gulp.series('sass'));
gulp.watch('css/!*.css', gulp.series('minify-css'));
gulp.watch('js/!*.js', gulp.series('minify-js'));
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**/!*.js', browserSync.reload);
return
});
I tried using function instead gulp.task() and it worked for me. I found this solution in a youtube video
// compile scss into css
function style() {
// 1. where is my scss file
return gulp.src('./app/scss/**/*.scss')
// 2. pass that file through sass compiler
.pipe(sass().on('error', sass.logError))
// 3. where do I save the compiled CSS?
.pipe(gulp.dest('./app/css'))
// 4. stream changes to all browser
.pipe(browserSync.stream());
}
function watch() {
gulp.watch('./app/scss/**/*.scss', style);
gulp.watch('./app/**/*.html').on('change', browserSync.reload);
gulp.watch('./app/js/**/*.js').on('change', browserSync.reload);
}
exports.style = style;
exports.watch = watch;

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));

browser-sync gulp config

I am trying to improve my Gulp configuration to include browser sync. I currently use MAMP Pro using local.domain.com for each site I'm working on (WordPress sites).
I'd like to get browser-sync to work using this current setup (watches my SASS files and minifies CSS when using watch).
I cannot seem to work out how to get browser sync to work with using the domain in my MAMP Pro setup.
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var uglifycss = require('gulp-uglifycss');
// Lint Task
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('lib/themes/domain/styles/*.scss')
.pipe(sass())
.pipe(gulp.dest('lib/themes/domain/'));
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('uglify', function () {
gulp.src('lib/themes/domain/style.css')
.pipe(uglifycss({
"max-line-len": 80
}))
.pipe(gulp.dest('lib/themes/domain/'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint', 'sass', 'scripts', 'uglify']);
gulp.watch('lib/themes/domain/styles/*/*.scss', ['sass']);
gulp.watch('lib/themes/domain/styles/*.scss', ['sass']);
gulp.watch('lib/themes/domain/style.css', ['uglify']);
});
// Default Task
gulp.task('default', ['lint', 'sass', 'uglify', 'scripts', 'watch']);
I wont write the code for you, instead I'll show you how I like to do it. I run my browser-sync in a separate task, simply watch your build files for changes.
var browserSync = require('browser-sync').create();
var urlPath = "your-url.com";
gulp.task('browser-sync', function (cb) {
browserSync.init({
proxy: urlPath,
}, function() {
gulp.watch("Views/**/*.cshtml").on("change", browserSync.reload);
gulp.watch('Assets/build/scripts/**/*.js').on('change', browserSync.reload);
gulp.watch('Assets/build/styles/**/*.css').on('change', function () {
gulp.src('Assets/build/styles/**/*.css')
.pipe(browserSync.stream());
});
cb();
});
});

Using Gulp BrowserSync to render PHP files

I've been using Gulp and trying to build to some process and one is BrowserSync. Thing is I want it to live reload on PHP files but it seems to only want to render html files. How can I get around this? My gulp file is here:
// gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var flatten = require('gulp-flatten');
var browserSync = require('browser-sync').create();
// Live reload (HTML Only)
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "app/build/"
}
});
gulp.watch("app/scss/*.scss", ['minify-css']);
});
// Sass Compile
gulp.task('sass', function(){
return gulp.src('app/src/scss/**/*.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/build/css/'))
.pipe(browserSync.stream())
});
// Minify CSS after Scss Compile
gulp.task('minify-css', ['sass'], function() {
return gulp.src('app/build/css/*.css')
.pipe(gulp.dest('app/build/css/'))
});
// Compress JS
gulp.task('minify-js', ['flatten'], function() {
return gulp.src('app/src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('app/build/js/'))
});
gulp.task('flatten', function() {
gulp.src('bower_components/**/')
.pipe(flatten({ includeParents: [1, 1]}))
.pipe(gulp.dest('app/build/js/'))
});
gulp.task('watch', ['browser-sync'], function (){
gulp.watch('app/src/scss/*.scss', ['minify-css']);
gulp.watch('app/src/js/*.js', ['minify-js', browserSync.reload])
})
gulp.task('default', ['watch']);
Try adding these lines:
// Reloads the page
gulp.task('php', browserSync.reload);
gulp.task('watch', ['browser-sync'], function (){
gulp.watch('app/src/scss/*.scss', ['minify-css']);
gulp.watch('app/src/js/*.js', ['minify-js', browserSync.reload]);
// Watches for .php file changes
gulp.watch("./*.php", ['php']);
});
gulp.task('default', ['watch']);
install AppServ
Put your project to C:\AppServ\www directory
Change
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "app/build/"
}
});
to
gulp.task('browser-sync', function() {
browserSync({
proxy: "http://localhost/ PUT HERE NAME OF YOUR PROJECT
FOLDER/app/build/%NAME OF YOUR PHP FILE%.php"
});

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']);