-
-
Save DESIGNfromWITHIN/11383339 to your computer and use it in GitHub Desktop.
/* | |
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']); | |
}); |
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?
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?
^^ npm install node-neat
did u remake this gulpfile for gulp 4?
Brilliant job!, is true what @sergonius said, you just miss the no-neat.
var neat = require('node-neat');