Last active
April 17, 2022 12:45
-
-
Save mikestreety/9525414 to your computer and use it in GitHub Desktop.
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
// Define gulp before we start | |
var gulp = require('gulp'); | |
// Define Sass and the autoprefixer | |
var sass = require('gulp-sass'); | |
var prefix = require('gulp-autoprefixer'); | |
// This is an object which defines paths for the styles. | |
// Can add paths for javascript or images for example | |
// The folder, files to look for and destination are all required for sass | |
var paths = { | |
styles: { | |
src: './app/Admin/assets/sass', | |
files: './app/Admin/assets/sass/**/*.scss', | |
dest: './public/css/admin' | |
} | |
} | |
// A display error function, to format and make custom errors more uniform | |
// Could be combined with gulp-util or npm colors for nicer output | |
var displayError = function(error) { | |
// Initial building up of the error | |
var errorString = '[' + error.plugin + ']'; | |
errorString += ' ' + error.message.replace("\n",''); // Removes new line at the end | |
// If the error contains the filename or line number add it to the string | |
if(error.fileName) | |
errorString += ' in ' + error.fileName; | |
if(error.lineNumber) | |
errorString += ' on line ' + error.lineNumber; | |
// This will output an error like the following: | |
// [gulp-sass] error message in file_name on line 1 | |
console.error(errorString); | |
} | |
// Setting up the sass task | |
gulp.task('sass', function (){ | |
// Taking the path from the above object | |
gulp.src(paths.styles.files) | |
// Sass options - make the output compressed and add the source map | |
// Also pull the include path from the paths object | |
.pipe(sass({ | |
outputStyle: 'compressed', | |
sourceComments: 'map', | |
includePaths : [paths.styles.src] | |
})) | |
// If there is an error, don't stop compiling but use the custom displayError function | |
.on('error', function(err){ | |
displayError(err); | |
}) | |
// Pass the compiled sass through the prefixer with defined | |
.pipe(prefix( | |
'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' | |
)) | |
// Funally put the compiled sass into a css file | |
.pipe(gulp.dest(paths.styles.dest)) | |
}); | |
// This is the default task - which is run when `gulp` is run | |
// The tasks passed in as an array are run before the tasks within the function | |
gulp.task('default', ['sass'], function() { | |
// Watch the files in the paths object, and when there is a change, fun the functions in the array | |
gulp.watch(paths.styles.files, ['sass']) | |
// Also when there is a change, display what file was changed, only showing the path after the 'sass folder' | |
.on('change', function(evt) { | |
console.log( | |
'[watcher] File ' + evt.path.replace(/.*(?=sass)/,'') + ' was ' + evt.type + ', compiling...' | |
); | |
}); | |
}); |
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
{ | |
"devDependencies": { | |
"gulp": "^3.5.5", | |
"gulp-sass": "^0.7.1", | |
"gulp-autoprefixer": "~0.0.3", | |
"gulp-minify-css": "0.1.0", | |
} | |
} |
Sweet! .... look out for the extra comma on the end of the package.json
This is nice work, thanks for sharing.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Ah, this is great. Thanks for putting this up!