Error in gulp while copying files - javascript

My command line shows following error while i entered the gulp watch command. Since gulp is searching css files from inside the app directory instead of searching it from bower_components.I have tried using minify-css as well as copy-css.Both are not working.
events.js:160
throw er; // Unhandled 'error' event
^
Error: Path F:\Backup Folder\coursera-project\Full stack course\Angular Js\Assignments\week1\confusion\app\bower_components\bootstrap\dist\css\bootstrap.min.css not found!
My gulpfile.js file
'use strict';
var gulp = require('gulp'),
cleancss = require('gulp-clean-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
browserSync = require('browser-sync'),
del = require('del'),
ngannotate = require('gulp-ng-annotate');
gulp.task('jshint', function() {
return gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
// Clean
gulp.task('clean', function() {
return del(['dist']);
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('usemin', 'imagemin','copyfonts');
});
gulp.task('usemin',['jshint'], function () {
return gulp.src('./app/**/*.html')
.pipe(usemin({
css:[cleancss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'))
});
// Images
gulp.task('imagemin', function() {
return del(['dist/images']), gulp.src('app/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
gulp.task('copyfonts', ['clean'], function() {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'], function() {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}', ['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'], function () {
var files = [
'app/**/*.html',
'app/styles/**/*.css',
'app/images/**/*.png',
'app/scripts/**/*.js',
'dist/**/*'
];
browserSync.init(files, {
server: {
baseDir: "dist",
index: "index.html"
}
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});
I am also not able to copy html files to my dist folder.

Related

How can I make 'gulp watch' command work?

Browser console doesn't watch errors but when I try to run the command in git console I have got a error.
let gulp = require('gulp');
let sass = require('gulp-sass');
let watch = require('gulp-watch');
let browserSync = require('browser-sync');
gulp.task('sass', function() {
return gulp.src('src/scss/index.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('src/css/index.css'))
});
gulp.task('sass:watch', function() {
gulp.watch('src/scss/index.scss', ['sass']);
});
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: 'src'
},
notify: false
});
});
Link to my repository https://github.com/dzhulay/Step-Ham

The gulp.watch function requires a list of files and a function as second parameter.
You have to generate the function either with gulp.parallel or gulp.series, such as in your case:
gulp.task('watch', function() {
gulp.watch('src/scss/index.scss', gulp.series('sass'));
});
Also, in order to avoid the "file exists" error as specified in your comment, please implement "gulp-chmod" in your sass task, such as:
var chmod = require('gulp-chmod');
gulp.task('sass', function() {
return gulp.src('src/scss/index.scss')
.pipe(chmod(0o755))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('src/css/index.css'))
});

Jquery library not working after gulp bundle

I am quite a newbie for gulp but i am trying to implement it in my this project. But looks like somewhere i mashup. I order the js files and was trying to get the bundle. But looks like jquery lib or something is not working.
Here is my gulpfile.js code:
'use strict';
// include all necessary plugins in gulp file
var gulp = require('gulp');
var order = require('gulp-order');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
// Task defined for java scripts bundling and minifying
gulp.task('scripts', function() {
return gulp.src('assets/src/js/*.js')
.pipe(order([
"assets/src/js/jquery-3.2.1.slim.min.js",
"assets/src/popper.min.js",
"assets/src/js/bootstrap.min.js",
"assets/src/js/morphext.min.js",
"assets/src/js/pushy.min.js",
"assets/src/quote.js"
], { base: './' }))
.pipe(concat('bundle.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('assets/dist/js'));
});
// Task define for compliling scss file
// Currently i am not using this complier
gulp.task('sass', function() {
return gulp.src('assets/src/css/**/*.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps.init()) // Process the original sources
.pipe(sass())
.pipe(sourcemaps.write()) // Add the map to modified source.
.pipe(gulp.dest('assets/dist/css/'));
});
// Define task to optimize images in project
gulp.task('images', function() {
return gulp.src('assets/src/img/**/*')
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest('assets/dist//img'));
});
// Task watch
gulp.task('watch', function() {
// Watch .js files
gulp.watch('assets/src/js/*.js', ['scripts']);
// Watch .scss files
gulp.watch('assets/src/css/*.scss', ['sass']);
// Watch image files
gulp.watch('assets/src/img/**/*', ['images']);
});
// declaring final task and command tasker
// just hit the command "gulp" it will run the following tasks...
gulp.task('default', ['scripts', 'images' , 'watch']);

I got solution for this problem, here is my new code for gulp.js!
'use strict';
// include all necessary plugins in gulp file
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
// Task defined for java scripts bundling and minifying
gulp.task('scripts', function() {
return gulp.src
([
'assets/src/js/jquery/*.js',
'assets/src/js/vendor/*.js',
'assets/src/js/plugins/*.js',
'assets/src/js/custom/*.js',
])
.pipe(concat('bundle.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('assets/dist/js/'));
});
// Task define for compliling scss file
gulp.task('sass', function() {
return gulp.src('assets/src/scss/**/*.scss', {style: 'compressed'})
.pipe(rename({suffix: 'custom'}))
.pipe(sourcemaps.init()) // Process the original sources
.pipe(sass())
.pipe(sourcemaps.write()) // Add the map to modified source.
.pipe(gulp.dest('assets/dist/css/unminified/'));
});
// Define task to optimize images in project
gulp.task('images', function() {
return gulp.src('assets/src/img/**/*')
.pipe(cache(imagemin({ optimizationLevel:5, progressive: true, interlaced: true })))
.pipe(gulp.dest('assets/dist/img'));
});
// Task watch
gulp.task('watch', function() {
// Watch .js files
gulp.watch('assets/src/js/*.js', ['scripts']);
// Watch .scss files
gulp.watch('assets/src/scss/*.scss', ['sass']);
// Watch image files
gulp.watch('assets/src/img/**/*', ['images']);
});
// declaring final task and command tasker
// just hit the command "gulp" it will run the following tasks...
gulp.task('default', ['scripts', 'images' , 'sass' , 'watch']);

Task 'sass' is not in your Gulpfile - ERROR

Following is the code I am facing this error please help me solve this, i would be really graced to get clear answer ___
Everything runs smooth but except if I save the file, following error occurs
ERROR : Task 'sass' is not in your gulpfile
// require gulp
var gulp = require('gulp');
// require other packages
var concat = require('gulp-concat'),
cssmin = require('gulp-minify-css'),
rename = require("gulp-rename"),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
autoprefix = require('gulp-autoprefixer');
changed = require('gulp-changed'),
// scripts task
gulp.task('scripts', function() {
return gulp.src('./src/js/*.js')
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/js/'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/js/'));
});
// styles task and autoprefix
gulp.task('styles', function() {
gulp.src(['./src/sass/*.scss'])
.pipe(autoprefix('last 2 versions'))
.pipe(sass())
.pipe(concat('styles.css'))
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/css/'));
});
// browser sync
gulp.task('browser-sync', ['styles'], function() {
browserSync({
server: {
baseDir: ''
},
notify: false
});
gulp.watch("./src/sass/*.scss", ['scss']);
gulp.watch("*.html").on('change', browserSync.reload);
});
// watch task
gulp.task('watch', function() {
gulp.watch('./src/js/*.js', ['scripts']);
gulp.watch('./src/sass/*.scss', ['styles']);
});
// image minification
gulp.task('imagemin', function() {
var imgSrc = './src/img/**/*',
imgDst = './dist/img';
gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'imagemin', 'watch']);

You do not have, indeed, defined "sass" task nor "scss" task thats marked as dependable under "browser-sync" file.
Try Replacing:
gulp.watch("./src/sass/*.scss", ['scss']);
with
gulp.watch("./src/sass/*.scss", ['styles']);

Gulp-concat doesnt work. There's no output file

Can't figure out why gulp-concat doesn't work correctly. When i try to compile my javascript it doesn't give me the output file. All the paths are correct. I tried to remove .pipe(concat()) and the .js file appeared in the correct folder. But the same code with concat() doesn't work.
var gulp = require('gulp'),
sass = require('gulp-sass'),
jade = require('gulp-jade-php'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
autoprefixer = require('gulp-autoprefixer');
var path = {
src: {
styles: 'git/**/*.scss',
scripts: 'git/**/scripts/*.js',
jade: 'git/**/*.jade'
},
publicPath: "../",
npm: {
jquery: 'bower_components/jquery/dist/jquery.min.js',
bootstrap: 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js',
swiper: 'bower_components/swiper/dist/js/swiper.jquery.min.js'
},
watch: {
styles: 'git/**/*.scss',
scripts: 'git/**/*.js',
jade: 'git/**/*.jade'
}
};
var scriptPaths = [path.src.scripts, path.npm.jquery, path.npm.bootstrap, path.npm.swiper];
// Scripts //
gulp.task('scripts', function () {
return gulp.src(scriptPaths)
.pipe(concat('script.js'))
.pipe(notify({
message: 'Javascript Success'
}))
.pipe(gulp.dest(path.publicPath))
});
gulp.task('build:scripts', function () {
return gulp.src(scriptPaths)
.pipe(concat('script.js'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(notify({
message: 'Javascript Success'
}))
.pipe(gulp.dest(path.publicPath))
});
// Watch //
gulp.task('watch', function () {
gulp.watch(path.watch.styles, ['styles']);
gulp.watch(path.watch.scripts, ['scripts']);
gulp.watch(path.watch.jade, ['html']);
});
gulp.task('default', ['styles', 'scripts', 'html']);
gulp.task('build', ['build:styles', 'build:scripts', 'html']);
Do you have any ideas why it doesn't work. I tried to remove node_modules and installed it again, but it didn't help

Gulp.js browser-sync not reloading my browser

Gulp browser-sync is not reloading my browser. When I hit save on my project it builds everything fine. My browser blinks and says "Connected to Browser-sync" on the upper right hand corner. It does not load the changes though. When I manually hit refresh, on chrome, it will load the changes. I've been up and down the gulp file and can find nothing wrong. Any advice?
Gulp.js file:
var $ = require('gulp-load-plugins')();
var argv = require('yargs').argv;
var browser = require('browser-sync');
var gulp = require('gulp');
var panini = require('panini');
var rimraf = require('rimraf');
var sequence = require('run-sequence');
var sherpa = require('style-sherpa');
// Check for --production flag
var isProduction = !!(argv.production);
// Port to use for the development server.
var PORT = 8000;
// Browsers to target when prefixing CSS.
var COMPATIBILITY = ['last 2 versions', 'ie >= 9'];
// File paths to various assets are defined here.
var PATHS = {
assets: [
'src/assets/**/*',
'!src/assets/{img,js,scss}/**/*'
],
sass: [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src/'
],
javascript: [
'bower_components/jquery/dist/jquery.js',
'bower_components/what-input/what-input.js',
'bower_components/foundation-sites/js/foundation.core.js',
'bower_components/foundation-sites/js/foundation.util.*.js',
// Paths to individual JS components defined below
'bower_components/foundation-sites/js/foundation.abide.js',
'bower_components/foundation-sites/js/foundation.accordion.js',
'bower_components/foundation-sites/js/foundation.accordionMenu.js',
'bower_components/foundation-sites/js/foundation.drilldown.js',
'bower_components/foundation-sites/js/foundation.dropdown.js',
'bower_components/foundation-sites/js/foundation.dropdownMenu.js',
'bower_components/foundation-sites/js/foundation.equalizer.js',
'bower_components/foundation-sites/js/foundation.interchange.js',
'bower_components/foundation-sites/js/foundation.magellan.js',
'bower_components/foundation-sites/js/foundation.offcanvas.js',
'bower_components/foundation-sites/js/foundation.orbit.js',
'bower_components/foundation-sites/js/foundation.responsiveMenu.js',
'bower_components/foundation-sites/js/foundation.responsiveToggle.js',
'bower_components/foundation-sites/js/foundation.reveal.js',
'bower_components/foundation-sites/js/foundation.slider.js',
'bower_components/foundation-sites/js/foundation.sticky.js',
'bower_components/foundation-sites/js/foundation.tabs.js',
'bower_components/foundation-sites/js/foundation.toggler.js',
'bower_components/foundation-sites/js/foundation.tooltip.js',
'src/assets/js/**/!(app).js',
'src/assets/js/app.js'
]
};
// Delete the "dist" folder
// This happens every time a build starts
gulp.task('clean', function(done) {
rimraf('dist', done);
});
// Browser Sync wrapper task
// allows for proper injection of css files
gulp.task('reload', function(cb) {
browser.reload();
cb();
});
// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
gulp.task('copy', function() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest('dist/assets'));
});
// Copy page templates into finished HTML files
gulp.task('pages', function() {
return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest('dist'));
});
gulp.task('pages:reset', function(cb) {
panini.refresh();
gulp.run('pages', cb);
});
gulp.task('styleguide', function(cb) {
sherpa('src/styleguide/index.md', {
output: 'dist/styleguide.html',
template: 'src/styleguide/template.html'
}, cb);
});
// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
var uncss = $.if(isProduction, $.uncss({
html: ['src/**/*.html'],
ignore: [
new RegExp('^meta\..*'),
new RegExp('^\.is-.*')
]
}));
var minifycss = $.if(isProduction, $.minifyCss());
return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: COMPATIBILITY
}))
.pipe(uncss)
.pipe(minifycss)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/css'))
.pipe(browser.reload({stream: true}));
});
// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {
var uglify = $.if(isProduction, $.uglify()
.on('error', function (e) {
console.log(e);
}));
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.concat('app.js'))
.pipe(uglify)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/js'));
});
// Copy images to the "dist" folder
// In production, the images are compressed
gulp.task('images', function() {
var imagemin = $.if(isProduction, $.imagemin({
progressive: true
}));
return gulp.src('src/assets/img/**/*')
.pipe(imagemin)
.pipe(gulp.dest('dist/assets/img'));
});
// Build the "dist" folder by running all of the above tasks
gulp.task('build', function(done) {
sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done);
});
// Start a server with LiveReload to preview the site in
gulp.task('server', ['build'], function() {
browser.init({
server: 'dist', port: PORT
});
});
// Build the site, run the server, and watch for file changes
gulp.task('default', ['build', 'server'], function() {
gulp.watch(PATHS.assets, ['copy', 'reload']);
gulp.watch(['src/pages/**/*.html'], ['pages', 'reload']);
gulp.watch(['src/{layouts,partials}/**/*.html'], ['pages:reset', 'reload']);
gulp.watch(['src/assets/scss/**/*.scss'], ['sass']);
gulp.watch(['src/assets/js/**/*.js'], ['javascript', 'reload']);
gulp.watch(['src/assets/img/**/*'], ['images', 'reload']);
gulp.watch(['src/styleguide/**'], ['styleguide', 'reload']);
});
Thanks you - Adolfo

I was helped with the fix at zurb/foundation-sites on github by gakimball. There were issues with the gulp.js file for foundation 6.1.1. Github issue page: https://github.com/zurb/panini/issues/10#issuecomment-172692241 explains more. Replacing my gulp.js file with the following code fixed the issue.
New gulp.js:
var $ = require('gulp-load-plugins')();
var argv = require('yargs').argv;
var browser = require('browser-sync');
var gulp = require('gulp');
var panini = require('panini');
var rimraf = require('rimraf');
var sequence = require('run-sequence');
var sherpa = require('style-sherpa');
// Check for --production flag
var isProduction = !!(argv.production);
// Port to use for the development server.
var PORT = 8000;
// Browsers to target when prefixing CSS.
var COMPATIBILITY = ['last 2 versions', 'ie >= 9'];
// File paths to various assets are defined here.
var PATHS = {
assets: [
'src/assets/**/*',
'!src/assets/{img,js,scss}/**/*'
],
sass: [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src/'
],
javascript: [
'bower_components/jquery/dist/jquery.js',
'bower_components/what-input/what-input.js',
'bower_components/foundation-sites/js/foundation.core.js',
'bower_components/foundation-sites/js/foundation.util.*.js',
// Paths to individual JS components defined below
'bower_components/foundation-sites/js/foundation.abide.js',
'bower_components/foundation-sites/js/foundation.accordion.js',
'bower_components/foundation-sites/js/foundation.accordionMenu.js',
'bower_components/foundation-sites/js/foundation.drilldown.js',
'bower_components/foundation-sites/js/foundation.dropdown.js',
'bower_components/foundation-sites/js/foundation.dropdownMenu.js',
'bower_components/foundation-sites/js/foundation.equalizer.js',
'bower_components/foundation-sites/js/foundation.interchange.js',
'bower_components/foundation-sites/js/foundation.magellan.js',
'bower_components/foundation-sites/js/foundation.offcanvas.js',
'bower_components/foundation-sites/js/foundation.orbit.js',
'bower_components/foundation-sites/js/foundation.responsiveMenu.js',
'bower_components/foundation-sites/js/foundation.responsiveToggle.js',
'bower_components/foundation-sites/js/foundation.reveal.js',
'bower_components/foundation-sites/js/foundation.slider.js',
'bower_components/foundation-sites/js/foundation.sticky.js',
'bower_components/foundation-sites/js/foundation.tabs.js',
'bower_components/foundation-sites/js/foundation.toggler.js',
'bower_components/foundation-sites/js/foundation.tooltip.js',
'src/assets/js/**/!(app).js',
'src/assets/js/app.js'
]
};
// Delete the "dist" folder
// This happens every time a build starts
gulp.task('clean', function(done) {
rimraf('dist', done);
});
// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
gulp.task('copy', function() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest('dist/assets'));
});
// Copy page templates into finished HTML files
gulp.task('pages', function() {
return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest('dist'))
.on('finish', browser.reload);
});
gulp.task('pages:reset', function(done) {
panini.refresh();
gulp.run('pages');
done();
});
gulp.task('styleguide', function(done) {
sherpa('src/styleguide/index.md', {
output: 'dist/styleguide.html',
template: 'src/styleguide/template.html'
}, function() {
browser.reload;
done();
});
});
// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
var uncss = $.if(isProduction, $.uncss({
html: ['src/**/*.html'],
ignore: [
new RegExp('^meta\..*'),
new RegExp('^\.is-.*')
]
}));
var minifycss = $.if(isProduction, $.minifyCss());
return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: COMPATIBILITY
}))
.pipe(uncss)
.pipe(minifycss)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/css'))
.pipe(browser.reload({ stream: true }));
});
// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {
var uglify = $.if(isProduction, $.uglify()
.on('error', function (e) {
console.log(e);
}));
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.concat('app.js'))
.pipe(uglify)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/js'))
.on('finish', browser.reload);
});
// Copy images to the "dist" folder
// In production, the images are compressed
gulp.task('images', function() {
var imagemin = $.if(isProduction, $.imagemin({
progressive: true
}));
return gulp.src('src/assets/img/**/*')
.pipe(imagemin)
.pipe(gulp.dest('dist/assets/img'))
.on('finish', browser.reload);
});
// Build the "dist" folder by running all of the above tasks
gulp.task('build', function(done) {
sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done);
});
// Start a server with LiveReload to preview the site in
gulp.task('server', ['build'], function() {
browser.init({
server: 'dist', port: PORT
});
});
// Build the site, run the server, and watch for file changes
gulp.task('default', ['build', 'server'], function() {
gulp.watch(PATHS.assets, ['copy']);
gulp.watch(['src/pages/**/*'], ['pages']);
gulp.watch(['src/{layouts,partials,helpers,data}/**/*'], ['pages:reset']);
gulp.watch(['src/assets/scss/**/{*.scss, *.sass}'], ['sass']);
gulp.watch(['src/assets/js/**/*.js'], ['javascript']);
gulp.watch(['src/assets/img/**/*'], ['images']);
gulp.watch(['src/styleguide/**'], ['styleguide']);
});
Thanks to the code above browser-sync is working again - Thanks gakimball!

Categories

Resources