Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gulpfile.js example Uses browser-sync, node-neat, gulp and gulp-sass
/*
Gulpfile.js file for the tutorial:
Using Gulp, SASS and Browser-Sync for your front end web development - DESIGNfromWITHIN
http://designfromwithin.com/blog/gulp-sass-browser-sync-front-end-dev
Steps:
1. Install gulp globally:
npm install --global gulp
2. Type the following after navigating in your project folder:
npm install gulp gulp-util gulp-sass gulp-uglify gulp-rename gulp-minify-css gulp-notify gulp-concat gulp-plumber browser-sync --save-dev
3. Move this file in your project folder
4. Setup your vhosts or just use static server (see 'Prepare Browser-sync for localhost' below)
5. Type 'Gulp' and ster developing
*/
/* Needed gulp config */
var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var notify = require('gulp-notify');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
/* Scripts task */
gulp.task('scripts', function() {
return gulp.src([
/* Add your JS files here, they will be combined in this order */
'js/vendor/jquery-1.11.1.js',
'js/app.js'
])
.pipe(concat('main.js'))
.pipe(gulp.dest('js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js'));
});
/* Sass task */
gulp.task('sass', function () {
gulp.src('scss/style.scss')
.pipe(plumber())
.pipe(sass({
includePaths: ['scss'].concat(neat)
}))
.pipe(gulp.dest('css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('css'))
/* Reload the browser CSS after every change */
.pipe(reload({stream:true}));
});
/* Reload task */
gulp.task('bs-reload', function () {
browserSync.reload();
});
/* Prepare Browser-sync for localhost */
gulp.task('browser-sync', function() {
browserSync.init(['css/*.css', 'js/*.js'], {
/*
I like to use a vhost, WAMP guide: https://www.kristengrote.com/blog/articles/how-to-set-up-virtual-hosts-using-wamp, XAMP guide: http://sawmac.com/xampp/virtualhosts/
*/
proxy: 'your_dev_site.url'
/* For a static server you would use this: */
/*
server: {
baseDir: './'
}
*/
});
});
/* Watch scss, js and html files, doing different things with each. */
gulp.task('default', ['sass', 'browser-sync'], function () {
/* Watch scss, run the sass task on change. */
gulp.watch(['scss/*.scss', 'scss/**/*.scss'], ['sass'])
/* Watch app.js file, run the scripts task on change. */
gulp.watch(['js/app.js'], ['scripts'])
/* Watch .html files, run the bs-reload task on change. */
gulp.watch(['*.html'], ['bs-reload']);
});
@marcusreese

This comment has been minimized.

Copy link

marcusreese commented Sep 23, 2015

I'm trying to use your gist, and thankful for it.
What is the purpose of the following?

  • npm install --global gulp
  • gulp-util
  • gulp-notify

I'm thinking you're not using these. Can I leave them out?

@sergonius

This comment has been minimized.

Copy link

sergonius commented Oct 22, 2015

You should add node-neat to the npm install list.
And why not gulp-autoprefixer.
Otherwise, great job!

@Rolando-Barbella

This comment has been minimized.

Copy link

Rolando-Barbella commented Nov 4, 2015

Brilliant job!, is true what @sergonius said, you just miss the no-neat.

var neat = require('node-neat');

@bibliofille

This comment has been minimized.

Copy link

bibliofille commented Mar 2, 2016

I thought I had followed the steps correctly, but then I typed 'gulp' into the command line and received this error message:
Error: Cannot find module 'node-neat' at Function.Module._resolveFilename (module.js:338:15) at Function.Module._load (module.js:280:25) at Module.require (module.js:364:17) at require (module.js:380:17) at Object.<anonymous> (/Users/labedzde/Documents/Sites/truetolifetraining/gulpfile.js:12:12) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Module.require (module.js:364:17) Debbies-MacBook-Pro:truetolifetraining labedzde$
Did I miss a step?

@charlotte17

This comment has been minimized.

Copy link

charlotte17 commented Jul 26, 2016

In my package.json have "node-neat": "^1.7.2" and gulpfile.json var neat = require('node-neat');
but in terminal show the follow message:
Error: Cannot find module 'node-neat'
at Function.Module._resolveFilename (module.js:326:15)
at Function.Module._load (module.js:277:25)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at Object. (/home/user/websites/example/sites/all/themes/example_theme/gulpfile.js:5:12)
at Module._compile (module.js:410:26)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
How can I fix this error?

@basquith16

This comment has been minimized.

Copy link

basquith16 commented Aug 11, 2017

^^ npm install node-neat

@pesukaru1

This comment has been minimized.

Copy link

pesukaru1 commented Mar 6, 2019

did u remake this gulpfile for gulp 4?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.