Web dev environment with gulp

I am trying to set up a build / web development environment with gulp, with basic features for compiling SASS, browser-sync, auto prefixer etc. But after 2 days of consecutive experimenting, I am still failing at accomplishing this (seemingly) easy task, always getting some minor errors.

And it is quite urgent for a project I am working on.

Would somebody be able to help me out, if I provide more information ? (file structure, gulpfile.js code, commands etc.). I haven’t found too many good tutorials on this topic and it might serve as a good reference for future users here too.

Thank you.

The gulp website has great resources and there are plenty of well done Gulp tutorials of there. Their [readme] (https://github.com/gulpjs/gulp/blob/master/docs/README.md) lists a lot too.

Can we see yours? What problems are you having, specifically?

1 Like

thanks very much! I actually went through all the docs and videos once again and managed to get my gulp environment where I want it to be, finally. And I’m starting to understand gulp as well :slight_smile:

Only two issues… I wasn’t able to get my SASS to compile (instead of SCSS). I am not sure why everybody uses scss and not sass. But I’ll just write in sass and use an online converter, so it’s not a big deal… few characters extra.

Also gulp leaves a crapload of files behind, which I cannot delete.

Nor do you want to.

Those are most likely “project files” used to keep track of things - configurations, dependencies, etc.

1 Like

You can paste regular CSS into .scss but not into .sass. I don’t think it matters to the compiler, as long as the syntax is right for the one you’re using. (But don’t quote me on that)

I actually use regular node libsass to do sass instead of the gulp-sass plugin.

A way I familiarize myself with new things is to play around with yeoman projects and see how they do things. I find it helps a lot to better understand the workflow of new tools.

Yeoman is a tool to help boilerplate new projects. There are a lot of different generators to choose from.

1 Like

ye, sure… I only mean old, inactive projects. I just have a huge trail of folders left behind. Is this standard with gulp ? I don’t think it’s very beneficial for a production environment either (pushing all that crap to github for example).

That doesn’t sound right. What are the folders named?

Can we see your gulpfile?

var browserify    = require('browserify');
var gulp          = require('gulp');
var uglify        = require('gulp-uglify');
var browserSync   = require('browser-sync');
var sass          = require('gulp-sass');
var autoprefixer  = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');

gulp.task('browserSync', function() {
    browserSync({
        server: {
            baseDir: "./public/"
        }
    });
});

gulp.task('html', function() {
  return gulp.src('public/**/*.html')
    .pipe(browserSync.reload({stream:true}));
});


gulp.task('styles', function() {
  gulp.src('src/scss/style.scss')
    .pipe(plumber())
      .pipe(sass({outputStyle: 'compressed'}))  //expanded
      // .on('error', errorlog)
      .pipe(autoprefixer({
              browsers: ['last 3 versions'],
              cascade: false
          })) 
    .pipe(gulp.dest('public/css'))
    .pipe(browserSync.reload({stream:true}));
});

// gulp.task('js', function(){
	// gulp.src('assets/js/*.js')
		// .pipe(concat('scripts.js'))
		// .pipe(gulp.dest('build/js'))
		// .pipe(livereload());
// });


gulp.task('watch', function() {
  gulp.watch('public/**/*.html', ['html']);
  gulp.watch('src/scss/**/*.scss', ['styles']);
});

gulp.task('default', ['styles', 'browserSync', 'watch']);

Sidenote: I know I can only use 1 var… will change that later.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.