I'm using gulp to compile React JSX to JS, Sass to css and for live reloading. Everything works pretty good but 'building' .js files taking 2.5s-3s. When I tried import React-Bootstrap in my .jsx gulp finished build after 9-10s. Is there any way to speed up building? Here is my gulp.config:
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
function swallowError(error) {
console.log(error.toString())
this.emit('end')
}
gulp.task('build', function() {
return browserify({ entries: './docs/Main.jsx', extensions: ['.jsx'], debug: true })
.transform('babelify', { presets: ['es2015', 'react'] })
.on('error', swallowError)
.bundle()
.on('error', swallowError)
.pipe(source('bundle.js'))
.on('error', swallowError)
.pipe(gulp.dest('docs/dist'))
.pipe(browserSync.stream())
.on('error', swallowError);
});
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./docs"
});
gulp.watch("docs/scss/*.scss", ['sass']);
gulp.watch('docs/*.js*', ['build']);
gulp.watch(["docs/*.html"]).on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("docs/scss/*.scss")
.pipe(sass())
.on('error', swallowError)
.pipe(gulp.dest("docs/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
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());
});
I have to make 2 steps in gulp:
Make a .css file form less
Minify generated css files
This is my gulpfile:
var gulp = require('gulp'),
watch = require("gulp-watch"),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename');
gulp.task('watch-less', function () {
watch({glob: './*.less'}, function (files) { // watch any changes on coffee files
gulp.start('compile-less'); // run the compile task
});
watch({
glob: ['./*.css', '!./*.min.css']
}, function(files) {
gulp.start('minify-css'); // run the compile task
});
});
gulp.task('compile-less', function () {
gulp.src('./*.less') // path to your file
.pipe(less().on('error', function(err) {
console.log(err);
}))
.pipe(gulp.dest('./'));
});
gulp.task('minify-css', function() {
gulp.src([
'./*.css',
'!./*.min.css'
])
.pipe(cssmin().on('error', function(err) {
console.log(err);
}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./'));
})
gulp.task('default', ['watch-less']);
When i start it only first step is done.
Help me please.
You should keep in mind that with gulp you could simply chain operations on a glob pattern.
Don't really sure why you need gulp.watch when you can use the built-in watcher, this plugin is useful on tricky situations and that's don't seems be the case here, but you can stick with it if you really want to.
Don't forget to return your stream so gulp knows when a task is finished.
I also generally wrap all my watchers inside one watch task, not need to separate them.
To me, your gulpfile should look like this:
var gulp = require('gulp'),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename');
gulp.task('watch', function () {
gulp.watch('./*.less', ['less']);
});
gulp.task('less', function () {
return gulp.src('./*.less')
.pipe(less().on('error', function (err) {
console.log(err);
}))
.pipe(cssmin().on('error', function(err) {
console.log(err);
}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./'));
});
gulp.task('default', ['less', 'watch']);
There is no needing after time, convinient solution for me was:
var gulp = require('gulp'),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename');
gulp.task('watch', function () {
gulp.watch('./styles/*.less', ['less']);
});
gulp.task('less', function () {
gulp.src('./styles/*.less')
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('./styles/'))
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./styles'))
});
gulp.task('default', ['less', 'watch']);
Best of both worlds might be to add the gulp.watch to the default gulp.task and if you require browser-sync it will reload when you make any changes to the folders being watched as shown below:
var gulp = require('gulp'),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename'),
browser = require('browser-sync');
gulp.task('less', function() {
return gulp.src('./*.less')
.pipe(less().on('error', function(err) {
console.log(err);
}))
.pipe(cssmin().on('error', function(err) {
console.log(err);
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./'));
});
gulp.task('server', function() {
browser({
server: {
baseDir: './'
}
});
});
gulp.task('default', ['less', 'server'], function() {
gulp.watch('./*.less', ['less', browser.reload]);
});
This is the way I did it with sass. Kind of the same with less.
The difference with the previous answers is that I wanted one more step:
Get the sass
Transform it into a css and create the file
Get that file and minify it.
So the structure would be like this:
test.scss
test.css
test.min.css
var gulp = require("gulp"),
sass = require("gulp-sass"),
rename = require("gulp-rename");
var paths = {
webroot: "./wwwroot/"
};
paths.scss = paths.webroot + "css/**/*.scss";
gulp.task('sass', function() {
gulp.src(paths.scss)
.pipe(sass())
.pipe(gulp.dest(paths.webroot + "css"))
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest(paths.webroot + "css"));
});
Added a new answer in case someone want the same thing as me.