Last active
March 4, 2021 21:00
-
-
Save DESIGNfromWITHIN/11383339 to your computer and use it in GitHub Desktop.
Gulpfile.js example Uses browser-sync, node-neat, gulp and gulp-sass
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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']); | |
}); |
^^ npm install node-neat
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
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?