So I am new to gulp and have been following the docs. So far everything has been working fine until I got to browser-sync. If I run gulp everything transpiles and is moved where it needs to go. The browser loads the index.html file on port 3000. None of the css or js are loaded. In the console I get "Failed to load resource" 404 errors on anything with a src or href attribute, except for images and cdn files. Most of the browser-sync stuff I have is straight from the docs http://www.browsersync.io/docs/gulp/. Here is my gulpfile:
///////////////////////////////////////
// Required
///////////////////////////////////////
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-minify-css'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
sourcemaps = require('gulp-sourcemaps'),
sass = require('gulp-sass');
///////////////////////////////////////
// Required
///////////////////////////////////////
gulp.task('userJs', function () {
return gulp.src('js/*.js')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream());
});
gulp.task('libJs', function () {
return gulp.src('js/libs/*.js')
.pipe(gulp.dest('dist/js/libs'))
.pipe(reload({stream:true}));
});
gulp.task('sass', function () {
return gulp.src('scss/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(minifyCss())
.pipe(concat('app.css'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
});
gulp.task('fonts', function () {
return gulp.src('fonts/*')
.pipe(gulp.dest('dist/fonts'))
.pipe(browserSync.stream());
});
gulp.task('images', function () {
return gulp.src('images/*')
.pipe(gulp.dest('dist/images'))
.pipe(browserSync.stream());
});
gulp.task('html', function () {
return gulp.src('index.html')
.pipe(gulp.dest('dist'))
.pipe(browserSync.stream());
});
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
///////////////////////////////////////
// Watch Task
///////////////////////////////////////
gulp.task('watch', function() {
gulp.watch('js/*.js', ['userJs']);
gulp.watch('js/libs/*.js', ['libJs']);
gulp.watch('scss/*.scss', ['sass']);
gulp.watch('images/*', ['images']);
gulp.watch('fonts/*', ['fonts']);
gulp.watch('index.html', ['html']);
});
///////////////////////////////////////
// Default Task
///////////////////////////////////////
gulp.task('default', ['libJs', 'userJs', 'sass', 'images', 'fonts', 'html', 'browser-sync', 'watch']);
Relevant html:
<head>
<meta charset="UTF-8">
<title>Victor Rodriguez </title>
<meta name="author" content="Victor Rodriguez">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/libs/jquery.keyframes.min.js"></script>
<script src="js/app.js"></script>
Well I feel incredibly stupid. Not just because it took me forever to figure out how to spell incredibly, but also because the browserSync baseDir was set entirely wrong. I had it set as the app's "source" directory instead of the dist directory where my compiled files were being sent. The lesson here is to always have a separate src and dist folder. the fixed gulpfile:
///////////////////////////////////////
// Required
///////////////////////////////////////
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-minify-css'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync').create(),
sourcemaps = require('gulp-sourcemaps'),
sass = require('gulp-sass');
///////////////////////////////////////
// Required
///////////////////////////////////////
gulp.task('userJs', function () {
return gulp.src('src/js/*.js')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream());
});
gulp.task('libJs', function () {
return gulp.src('src/js/libs/*.js')
.pipe(gulp.dest('dist/js/libs'))
.pipe(browserSync.stream());
});
gulp.task('sass', function () {
return gulp.src('src/scss/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(minifyCss())
.pipe(concat('app.css'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
});
gulp.task('fonts', function () {
return gulp.src('fonts/*')
.pipe(gulp.dest('dist/fonts'))
.pipe(browserSync.stream());
});
gulp.task('images', function () {
return gulp.src('src/images/*')
.pipe(gulp.dest('dist/images'))
.pipe(browserSync.stream());
});
gulp.task('html', function () {
return gulp.src('src/index.html')
.pipe(gulp.dest('dist'))
.pipe(browserSync.stream());
});
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "dist" // This was the problem
}
});
});
///////////////////////////////////////
// Watch Task
///////////////////////////////////////
gulp.task('watch', function() {
gulp.watch('src/js/*.js', ['userJs']);
gulp.watch('src/js/libs/*.js', ['libJs']);
gulp.watch('src/scss/*.scss', ['sass']);
gulp.watch('src/images/*', ['images']);
gulp.watch('src/fonts/*', ['fonts']);
gulp.watch('src/index.html', ['html']);
});
///////////////////////////////////////
// Default Task
///////////////////////////////////////
gulp.task('default', ['libJs', 'userJs', 'sass', 'images', 'fonts', 'html', 'browser-sync', 'watch']);
Related
I am using Gulp to compile and minify my SASS. This works fine, but I want to extend the automation by using BrowserSync.
I've followed the instructions on a few tutorial sites but cannot get it working - the browser does not refresh when I update either my .scss or .html files, not do any errors appear on the Terminal.
My gulpfile.js is as such. Would anyone know why browserSync fails to run?
(ps running gulp browserSync does sucessfully open the browser window and index file with http://localhost:3000/ but there is no automatic refreshing).
const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const browserSync = require('browser-sync').create();
// Normal .scss compilation
gulp.task('sass', function(){
return gulp.src('scss/main.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
});
// Minifys .css, is meant to reload browser
gulp.task('mini-css', function() {
return gulp.src('dist/css/main.css')
.pipe(cssnano())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}));
});
// Do both of the above
gulp.task('do-sass', gulp.series('sass', 'mini-css'))
gulp.task('watch', function(){
gulp.watch('scss/**/*.scss', gulp.series('do-sass'));
gulp.watch("*.html").on('change', browserSync.reload);
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: './'
},
})
})
Your watch task should be your default task. Try to put the browserSync.init() in the watch task und then start your gulp with gulp watch
const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const browserSync = require('browser-sync').create();
// Normal .scss compilation
gulp.task('sass', function(){
return gulp.src('scss/main.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
});
// Minifys .css, is meant to reload browser
gulp.task('mini-css', function() {
return gulp.src('dist/css/main.css')
.pipe(cssnano())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}));
});
// Do both of the above
gulp.task('do-sass', gulp.series('sass', 'mini-css'))
gulp.task('watch', function(){
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch('scss/**/*.scss', gulp.series('do-sass'));
gulp.watch("*.html").on('change', browserSync.reload);
});
In my project i use gulp + browsersync. After update gulp v.4.0.0., browsersync not working and my styles not compiled when watch run (only after in manual restart gulp watch).
This is my gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
concat = require('gulp-concat'),
uglify = require('gulp-uglifyjs'),
cssnano = require('gulp-cssnano'),
rename = require('gulp-rename'),
del = require('del'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(autoprefixer(['last 15 versions', '> 1%'], {cascade: true}))
.pipe(cssnano())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({stream: true}))
});
gulp.task('css-libs', gulp.parallel('sass'), function(){
return gulp.src('app/css/main.css')
.pipe(cssnano())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('app/css'));
});
gulp.task('browser-sync', function(){
browserSync({
server: {
//baseDir: 'app'
baseDir: './'
},
notify:false
})
});
gulp.task('watch', gulp.parallel('browser-sync', 'css-libs'), function(){
gulp.watch('app/scss/*.scss', ['sass']);
gulp.watch('*.html', browserSync.reload);
});
How to fix it?
UPD
This is my package.json
Gulp-watch not working when i change scss file.
I believe your 'watch' task should be rewritten like so:
gulp.task('browser-sync', function(){
// note the .init
browserSync.init({
server: {
//baseDir: 'app'
baseDir: './'
},
notify:false
})
});
gulp.task('watch', gulp.parallel('browser-sync', 'css-libs', function(done){
// change in the previous line and the following line
gulp.watch('app/scss/*.scss', gulp.series('sass'));
gulp.watch('*.html', browserSync.reload);
done();
}));
so that the function call with the watches is part of the gulp.parallel call. See the parallel tasks documentation and gulp.task signature.
gulp.task('default', gulp.parallel('one', 'two', function(done) {
// do more stuff
done();
}));
Can any one help me with a gulp file?
I want to start my express server when i run gulp dev. The express server starts in my app.js file. I tried to modify the app.js file but that causes an error.
How do i implement that ?
var gulp = require('gulp')
var sass = require('gulp-sass')
var header = require('gulp-header')
var cleanCSS = require('gulp-clean-css')
var rename = require('gulp-rename')
var uglify = require('gulp-uglify')
var pkg = require('./package.json')
var browserSync = require('browser-sync').create()
var server = require('gulp-develop-server')
var express = require('express')
var app = express()
// Copy third party libraries from /node_modules into /vendor
gulp.task('vendor', function () {
// Bootstrap
gulp.src([
'./node_modules/bootstrap/dist/**/*',
'!./node_modules/bootstrap/dist/css/bootstrap-grid*',
'!./node_modules/bootstrap/dist/css/bootstrap-reboot*'
])
.pipe(gulp.dest('./vendor/bootstrap'))
// Font Awesome
gulp.src([
'./node_modules/font-awesome/**/*',
'!./node_modules/font-awesome/{less,less/*}',
'!./node_modules/font-awesome/{scss,scss/*}',
'!./node_modules/font-awesome/.*',
'!./node_modules/font-awesome/*.{txt,json,md}'
])
.pipe(gulp.dest('./vendor/font-awesome'))
// jQuery
gulp.src([
'./node_modules/jquery/dist/*',
'!./node_modules/jquery/dist/core.js'
])
.pipe(gulp.dest('./vendor/jquery'))
// jQuery Easing
gulp.src([
'./node_modules/jquery.easing/*.js'
])
.pipe(gulp.dest('./vendor/jquery-easing'))
// Simple Line Icons
gulp.src([
'./node_modules/simple-line-icons/fonts/**'
])
.pipe(gulp.dest('./vendor/simple-line-icons/fonts'))
gulp.src([
'./node_modules/simple-line-icons/css/**'
])
.pipe(gulp.dest('./vendor/simple-line-icons/css'))
})
// Compile SCSS
gulp.task('css:compile', function () {
return gulp.src('./scss/**/*.scss')
.pipe(sass.sync({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(gulp.dest('./css'))
})
// Minify CSS
gulp.task('css:minify', ['css:compile'], function () {
return gulp.src([
'./css/*.css',
'!./css/*.min.css'
])
.pipe(cleanCSS())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream())
})
// CSS
gulp.task('css', ['css:compile', 'css:minify'])
// Minify JavaScript
gulp.task('js:minify', function () {
return gulp.src([
'./js/*.js',
'!./js/*.min.js'
])
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./js'))
.pipe(browserSync.stream())
})
// JS
gulp.task('js', ['js:minify'])
// Default task
gulp.task('default', ['css', 'js', 'vendor'])
gulp.task('express', function () {
app.use(express.static(__dirname))
app.listen(6006, '0.0.0.0') // <- CHANGE PORT NUMBER TO PREFERRED
CHOICE
})
// Configure the browserSync task
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: './'
}
})
})
// Dev task
gulp.task('dev', ['express', 'css', 'js', 'browserSync'], function () {
gulp.watch('./scss/*.scss', ['css'])
gulp.watch('./js/*.js', ['js'])
gulp.watch('./*.html', browserSync.reload)
})
I get this error:
Uncaught ReferenceError: require is not defined
I know that in the browser you can not use require API, just trying to make it possible with browserify or requirejs or whatelse but it doesn't work in any way.
This is my gulpfile
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var babel = require('gulp-babel');
var browserify = require('gulp-browserify');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin'),
cache = require('gulp-cache');
var minifycss = require('gulp-minify-css');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('images', function(){
gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images/'));
});
gulp.task('styles', function(){
gulp.src(['src/styles/**/*.scss'])
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(sass())
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest('dist/styles/'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles/'))
.pipe(browserSync.reload({stream:true}))
});
gulp.task('scripts', function(){
return gulp.src('src/scripts/**/*.js')
.pipe(plumber({
errorHandler: function (error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(concat('main.js'))
.pipe(babel())
.pipe(browserify())
.pipe(gulp.dest('dist/scripts/'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts/'))
.pipe(browserSync.reload({stream:true}))
});
gulp.task('default', ['browser-sync'], function(){
gulp.watch("src/styles/**/*.scss", ['styles']);
gulp.watch("src/scripts/**/*.js", ['scripts']);
gulp.watch("*.html", ['bs-reload']);
});
and this is my main.js, just an import of a plugin anime.js
import anime from 'animejs'
Also tried with requireJs but it seems a bit hard to integrate it in my gulpfile, also webpack seems to be hard code for me.
Gulp setup is working fine for me in local.
But i want like if i change files in local then it will build and uploaded to live server automatically (minified css and js/compiled css/js).
I have tried gulp-rsync, vinyl-ftp but couldn't succeed may be i don't know how to use above packages.
Here is a my gulp file.
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');
// Development Tasks
// -----------------
// Start browserSync server
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app'
}
})
})
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass().on('error', sass.logError)) // Passes it through a gulp-sass, log errors to console
.pipe(gulp.dest('app/css')) // Outputs it in the css folder
.pipe(browserSync.reload({ // Reloading with Browser Sync
stream: true
}));
})
// Watchers
gulp.task('watch', function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
})
// Optimization Tasks
// ------------------
// Optimizing CSS and JavaScript
gulp.task('useref', function() {
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'));
});
// Optimizing Images
gulp.task('images', function() {
return 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'))
});
// Copying fonts
gulp.task('fonts', function() {
return gulp.src('app/fonts/**/*')
.pipe(gulp.dest('dist/fonts'))
})
// Cleaning
gulp.task('clean', function() {
return del.sync('dist').then(function(cb) {
return cache.clearAll(cb);
});
})
gulp.task('clean:dist', function() {
return del.sync(['dist/**/*', '!dist/images', '!dist/images/**/*']);
});
// Build Sequences
// ---------------
gulp.task('default', function(callback) {
runSequence(['sass', 'browserSync'], 'watch',
callback
)
})
gulp.task('build', function(callback) {
runSequence(
'clean:dist',
'sass',
['useref', 'images', 'fonts'],
callback
)
})
And here is a my folder structure.
This is main folder
It's a development folder
And this one is production folder in which all files are build.