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.

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.

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.

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.

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.

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.

basquith16 commented Aug 11, 2017

^^ npm install node-neat

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment