I have gulpfile.js
like below in normal HTML project. Now, I'm creating a Node/Express project on another project and I want to use Nodemon/Browsersync sametime on Gulp.
By the way I've tried some other samples before submitting this question but I haven't been successfull.
So, how should I set my gulpfile.js
for using Nodemon/Browsersync on Gulp?
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync').create();
var sourcemaps = require("gulp-sourcemaps");
// Error Handling
var gulp_src = gulp.src;
gulp.src = function() {
return gulp_src.apply(gulp, arguments)
.pipe(plumber(function(error) {
// Output an error message
gutil.log(gutil.colors.red('Error (' + error.plugin + '): ' + error.message));
// emit the end event, to properly end the task
this.emit('end');
})
);
};
// Styles
gulp.task('styles', function() {
return gulp.src('./src/sass/*.scss')
.pipe(sass())
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.init())
.pipe(gulp.dest('./dist/css/'))
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(concat("main.css", {newLine: ""}))
.pipe(gulp.dest('./dist/css/'))
.pipe(browserSync.reload({ stream: true }))
});
// Scripts
gulp.task('scripts', function() {
return gulp.src('./src/js/*.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('./dist/js/'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'));
});
// BrowserSync
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: './'
},
open: false,
// browser: "Google Chrome",
notify: false,
// notify: {
// styles: {
// top: 'auto',
// bottom: '0'
// }
// },
snippetOptions: {
rule: {
match: /<\/body>/i,
fn: function (snippet, match) {
return snippet + match;
}
}
}
})
})
// Watch task
gulp.task('watch', ['browserSync'], function() {
gulp.watch('./src/sass/*.scss', ['styles']);
gulp.watch('./*.html', browserSync.reload);
gulp.watch('./src/js/*.js', ['scripts']);
});
gulp.task('default', ['styles', 'scripts', 'watch']);
via fatihturan
No comments:
Post a Comment