I used gulp with broswersync, to watch any front end changes. But in the same time I'm using node.js so I need nodemon to restart server if I changed anything on the server side. Not sure I'm doing it right, below is my gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
gulp.task('serve', function() {
browserSync.init({
server: "./public"
});
gulp.watch(['./public/*.html', './public/js/*.js']).on('change', reload);
});
gulp.task('sass', function () {
return gulp.src('./public/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/css'))
.pipe(reload({stream: true}));
});
gulp.task('sass:watch', function () {
gulp.watch('./public/sass/**/*.scss', ['sass'])
});
// our gulp-nodemon task
gulp.task('nodemon', function (cb) {
var started = false;
return nodemon({
script: './bin/www',
ext: 'js',
ignore: ['public/*'],
env: {
'NODE_ENV': 'development',
'DEBUG': 'appname:*'
}
}).on('start', function () {
if (!started) {
cb();
started = true;
}
})
.on('crash', function() {
console.log('nodemon.crash');
})
.on('restart', function() {
console.log('nodemon.restart');
})
.once('quit', function () {
process.exit();
});
});
gulp.task('default', ['serve','sass','sass:watch','nodemon']);
I run gulp but it has error of
Error: listen EADDRINUSE :::3000
Related
I have upgraded Gulp to version 4 and I am receiving errors when doing gulp build because my gulpfile.js is outdated. I need help changing the syntax on my gulpfile.js from Gulp v3 to Gulp v4. Your help would be greatly appreciated.
var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var gutil = require("gulp-util");
var useref = require('gulp-useref');
var runSequence = require('run-sequence');
var del = require('del');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var webpackStream = require("webpack-stream");
var webpack = require("webpack");
var webpackConfig = require("./webpack.config.js");
var injectVersion = require('gulp-inject-version');
gulp.task('sass', function(){
return gulp.src('src/scss/log.scss')
.pipe(sass())
.pipe(gulp.dest('src/css'))
});
gulp.task('images', function(){
return gulp.src('src/images/*.+(png|jpg|gif|svg)')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
});
gulp.task('webpack', function(){
return gulp.src('src/main.js')
.pipe(webpackStream( webpackConfig ))
.pipe(injectVersion())
.pipe(gulp.dest('src/js/'));
});
gulp.task('useref', function(){
return gulp.src('src/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
gulp.task('move:js', function(){
return gulp.src([
'src/js/config.js.example',
'src/js/worker.online.js',
'src/js/worker.queue.js'
])
.pipe(gulp.dest('dist/js'))
});
gulp.task('clean:dist', function() {
return del.sync('dist');
});
gulp.task('watch', ['sass', 'webpack'], function(){
gulp.watch('src/scss/*', ['sass']);
gulp.watch('src/components/**/*.vue', ['webpack']);
gulp.watch('src/*.js', ['webpack']);
});
gulp.task('build', function (callback) {
runSequence('clean:dist',
['webpack', 'sass', 'images'],
'useref',
'move:js',
callback
)
});
gulp.task('default', ['webpack-dev-server', 'watch']);
............................................................
In vertion 4, The way you define dependent task has been changed. Here is the smaple.
// V3
gulp.task('default', ['del'], function() {
// default task code here
});
// v4
gulp.task('default', gulp.series('del', function() {
// default task code here
}));
//v3
gulp.task('default', ['scripts', 'styles'], function() {...});
// v4
gulp.task('default', gulp.parallel('scripts', 'styles'));
More info:
https://www.liquidlight.co.uk/blog/how-do-i-update-to-gulp-4/
https://fettblog.eu/gulp-4-parallel-and-series/
How should I form my 'build' task in my gulpfile.js? Right now I have only set a runSequence on all my current tasks, which destination is the src folder and not distribution.
Should I write secondary tasks like for example sass-dist , 'js-dist' etc..?
var gulp = require('gulp'),
sass = require('gulp-sass'),
plumber = require('gulp-plumber'),
gutil = require('gulp-util'),
pug = require('gulp-pug'),
browserSync = require('browser-sync').create(),
useref = require('gulp-useref'),
uglify = require('gulp-uglify'),
gulpIf = require('gulp-if'),
cssnano = require('gulp-cssnano'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
del = require('del'),
runSequence = require('run-sequence');
function handleError(err) {
gutil.beep();
console.log(err.toString());
this.emit('end');
}
gulp.task('sass', function () {
return gulp.src('src/scss/**/*.scss')
.pipe(plumber({
errorHandler: handleError
}))
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('src/css'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('views', function buildHTML() {
return gulp.src('src/views/*.pug')
.pipe(pug({}))
.pipe(gulp.dest('src/'))
});
gulp.task('watch', ['browserSync', 'views', 'sass'], function () {
gulp.watch('src/scss/**/*.scss', ['sass']);
gulp.watch('src/views/**/*.pug', ['views']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('src/views/**/*.pug', browserSync.reload);
gulp.watch('src/*.html', browserSync.reload);
gulp.watch('src/js/**/*.js', browserSync.reload);
});
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: 'src'
},
});
});
gulp.task('useref', function () {
return gulp.src('src/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'));
});
gulp.task('images', function () {
return gulp.src('src/img/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('dist/images'));
});
gulp.task('fonts', function () {
return gulp.src('src/fonts/**/*')
.pipe(gulp.dest('dist/fonts'));
});
gulp.task('clean:dist', function () {
return del.sync('dist');
});
gulp.task('build', function (callback) {
console.log('Building project...')
runSequence('clean:dist', ['views', 'sass', 'useref', 'images', 'fonts'],
callback
);
});
gulp.task('default', function (callback) {
runSequence(['views', 'sass', 'browserSync', 'watch'],
callback
);
});
Dir list view:
Yes. You must write all tasks
var gulp = require('gulp'),
watch = require('gulp-watch'),
autoprefixer = require('gulp-autoprefixer'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
sass = require('gulp-sass'),
rename = require("gulp-rename"),
minifyCss = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber'),
concatCss = require('gulp-concat-css'),
jade = require('gulp-jade');
// Jade
gulp.task('jade', function(){
gulp.src('app/*.jade')
.pipe(jade({pretty: true}))
.pipe(gulp.dest('./dist/'));
});
//Sass to dist
gulp.task('sass-dist', function () {
return gulp.src('app/sass/**/*.scss')
.pipe(gulp.dest('dist/sass/'));
});
// compiled sass
gulp.task('sass', function () {
return gulp.src('app/sass/**/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 10 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/css/'))
.pipe(minifyCss())
.pipe(rename({suffix: ".min",}))
.pipe(gulp.dest('dist/css/'));
});
// Merge all css files in one
gulp.task('css', function(){
return gulp.src('app/css/*.css')
.pipe(concatCss("all-pluging.css"))
.pipe(minifyCss())
.pipe(gulp.dest('dist/css'));
});
// minify images
gulp.task('images', function(){
return gulp.src('app/images/**/*.*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'));
});
gulp.task('images-content', function(){
return gulp.src('app/assets/images/**/*.*')
.pipe(imagemin())
.pipe(gulp.dest('dist/assets/images'));
});
gulp.task('jshint', function(){
return gulp.src('app/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish))
});
// Merged all js files in one
gulp.task('concat', function() {
return gulp.src(['app/js/jquery/*.js','app/js/lib/*.js'])
.pipe(uglify())
.pipe(concat('all-plugins.js'))
.pipe(rename("all-plugins.min.js"))
.pipe(gulp.dest('dist/js/'));
});
gulp.task('js',function(){
gulp.src('app/js/main.js')
.pipe(plumber())
.pipe(gulp.dest('dist/js/'))
.pipe(uglify())
.pipe(rename("main.min.js"))
.pipe(gulp.dest('dist/js/'));
});
gulp.task('watch', function(){
gulp.watch('app/*.jade',['jade']);
gulp.watch('app/sass/*.scss', ['sass-dist','fonts','sass'] );
gulp.watch('app/assets/images/**/*.*', ["images-content"]);
gulp.watch('app/images/*.*', ["images"]);
gulp.watch("app/css/**/*.css", ["css"]);
gulp.watch('app/js/**/*.js', ["jshint", "concat", "js"]);
});
// Default
gulp.task('default', ['jade',"sass-dist","sass",'css','fonts',"jshint",'concat','js','images','images-content', "watch"]);
const gulp = require('gulp');
const sass = require('gulp-sass');
const nunjucks = require('gulp-nunjucks');
const autoprefixer = require('gulp-autoprefixer');
const cssnano = require('gulp-cssnano');
const imagemin = require('gulp-imagemin');
const browserSync = require('browser-sync').create();
const uglify = require('gulp-uglify');
const plumber = require('gulp-plumber');
var config = {
bootstrapDir: './node_modules/bootstrap-sass',
uploadDir: './upload'
};
gulp.task('css', function () {
gulp.src('./css/*')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer())
.pipe(cssnano())
.pipe(gulp.dest(config.uploadDir + '/css'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('fonts', function () {
gulp.src(config.bootstrapDir + '/assets/fonts/**/*')
.pipe(gulp.dest(config.uploadDir + '/fonts'));
});
gulp.task('js', function () {
gulp.src('./js/*')
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest(config.uploadDir + '/js'));
});
gulp.task('images', function () {
gulp.src('./images/**/*')
.pipe(plumber())
.pipe(imagemin())
.pipe(gulp.dest(config.uploadDir + '/images'));
});
// This is the code for the template(html) task
gulp.task('templates', function () {
gulp.src('./templates/*.html')
.pipe(plumber())
.pipe(nunjucks.compile({
appName: 'Gulp' //Global variable
}))
.pipe(gulp.dest(config.uploadDir));
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: config.uploadDir
}
});
});
//This is my watch task
gulp.task('watch',['browserSync', 'css', 'templates'], function() {
gulp.watch('./css/*', ['css']);
gulp.watch('./templates/*.html', ['templates', browserSync.reload]);
})
//gulp.task('default', ['css', 'fonts', 'js', 'images', 'templates', 'browserSync']);
enter code here
When i run gulp watch any changes made to the css files causes the browser to reload , but if i make a change to my html file, i will need to refresh the browser before i can see the changes
I get to see the changes in my uploadDir "(./upload)" folder but can;t figure out why i have to refresh the page to see the changes live
This is my directory structure:
I set up my workstation, and I set up my Gulp File to work on my folder format, but it is not working properly.
This is my Gulp File:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
imagemin = require('gulp-imagemin'),
changed = require('gulp-changed'),
browserSync = require('browser-sync'),
livereload = require('gulp-livereload'),
gp_concat = require('gulp-concat'),
gp_rename = require('gulp-rename'),
gp_uglify = require('gulp-uglify'),
watch = require('gulp-watch');
gulp.task('sass', function () {
gulp.src('./app/template/css/style_v1.scss')
.pipe(sass())
.on('error', function (err) { console.log(err.message); })
.pipe(gulp.dest('./dist/css'))
.pipe(livereload());
});
gulp.task('compress', function() {
gulp.src('./app/*.js')
.pipe(gp_concat('concat.js'))
.pipe(gulp.dest('dist'))
.pipe(gp_rename('script.min.js'))
.pipe(gp_uglify())
.pipe(gulp.dest('./dist/js'));
});
gulp.task('jpg', function() {
gulp.src('./template/img/**/*.*')
.pipe(changed('./dist/img/'))
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('./dist/img/'));
});
gulp.task('browser-sync', function() {
browserSync.init(['./dist/css/**', 'index.php'], {
server: {
baseDir: './',
index: 'index.php'
}
});
});
gulp.task('watch', ['sass', 'browser-sync','compress'], function () {
return watch('./app/template/css/style_v1.scss', function () {
gulp.src('./app/template/css/style_v1.scss')
.pipe(gulp.dest('build'));
});
});
When I run gulp watch it returns this:
(node:6668) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[08:42:23] Using gulpfile /var/www/html/evandro/sistema_metas/gulpfile.js
[08:42:23] Starting 'sass'...
[08:42:23] 'sass' errored after 7.09 ms
[08:42:23] Error: must provide pattern
What is the problem?
I have another code, the CSS Watch does not work, just watch HTML, What can it be?
gulp-ruby-sass works differently from other gulp plugins. You don't pass it to .pipe(). If you take a look at the documentation it says the following:
Use gulp-ruby-sass instead of gulp.src to compile Sass files.
That means you have to use it like this:
var sass = require('gulp-ruby-sass');
gulp.task('sass', function () {
return sass('./app/template/css/style_v1.scss')
.on('error', function (err) { console.log(err.message); })
.pipe(gulp.dest('./dist/css'))
.pipe(livereload());
});
Alternatively you can use the gulp-sass plugin instead of gulp-ruby-sass. It doesn't use the Ruby implementation of SASS, but rather the C implementation (libsass). It allows you to use .pipe() as you normally would for most other gulp plugins:
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./app/template/css/style_v1.scss')
.pipe(sass())
.on('error', function (err) { console.log(err.message); })
.pipe(gulp.dest('./dist/css'))
.pipe(livereload());
});
runsequence is the code below is not quite working?
var gulp = require('gulp');
var del = require('del');
var browserify = require('gulp-browserify');
var concat = require('gulp-concat');
var runSequence = require('run-sequence');
var nodemon = require('gulp-nodemon');
gulp.task('clean', function(cb) {
console.log('YOLO1');
del(['build/*'], cb);
});
gulp.task('copy', function() {
console.log('YOLO2')
return gulp.src('client/www/index.html')
.pipe(gulp.dest('build'));
});
gulp.task('browserify', function() {
console.log('YOLO3')
return gulp.src('client/index.js')
.pipe(browserify({transform: 'reactify'}))
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
});
gulp.task('build', function(cb) {
console.log('YOLO4')
runSequence('clean', 'browserify', 'copy', cb);
});
gulp.task('default', ['build'], function() {
gulp.watch('client/*/*', ['build']);
nodemon({ script: './bin/www', ignore: ['gulpfile.js', 'build', 'client', 'dist'] });
});
Current Output:
YOLO4,
YOLO1
DESIRED Output:
YOLO4,
YOLO1,
YOLO3,
YOLO2
I am not sure why runSequence is only executing the first task and unable to execute the rest? any ideas?
del does not take a callback, but returns synchronously: (see first sample in https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md)
gulp.task('clean', function() {
console.log('YOLO1');
return del(['build/*']);
});