Last active
September 26, 2016 22:33
-
-
Save 4foot30/d55ae4fd515221f9eb34ea2093387a0e to your computer and use it in GitHub Desktop.
Half-decent example of a gulpfile for a Sass project
This file contains hidden or 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
| var cleanCSS = require('gulp-clean-css'), | |
| concat = require('gulp-concat'), | |
| gulp = require('gulp'), | |
| autoprefixer = require('gulp-autoprefixer'), | |
| gzip = require('gulp-gzip'), | |
| sass = require('gulp-sass'), | |
| rename = require('gulp-rename'), | |
| uglify = require('gulp-uglify'), | |
| watch = require('gulp-watch'); | |
| gulp.task('sass', function(){ | |
| return gulp.src('www/scss/main.scss') | |
| .pipe(sass()) // Compiles Sass to CSS | |
| .pipe(autoprefixer()) // Auto-prefix the CSS (e.g. -webkit-transition etc.), with default options | |
| .pipe(cleanCSS()) // Minifies compiled CSS | |
| .pipe(rename({ extname: '.min.css' })) | |
| .pipe(gulp.dest('www/css')) // Moves compiled files to final location | |
| }); | |
| gulp.task('js', function() { | |
| return gulp.src([ | |
| // Include specific third-party files first, then all our files from js-src | |
| 'www/third-party/slick/slick.min.js', | |
| 'www/js-src/*.js', | |
| ]) | |
| .pipe(concat('main.min.js')) // Concatenates all js files | |
| .pipe(uglify()) // Minifies Javascript | |
| .pipe(gulp.dest('www/js')) | |
| }); | |
| gulp.task('watch', function() { | |
| // If any .scss or.js files change, automatically run the relevant compilation task | |
| gulp.watch(['www/scss/**/*.scss','www/scss/*.scss'], ['sass']); | |
| gulp.watch(['www/js-src/*.js'], ['js']); | |
| }); | |
| // gzip compress all sass files | |
| gulp.task('gzip-sass', function() { | |
| gulp.src('www/css/main.min.css') | |
| .pipe(rename('main.min.css')) | |
| .pipe(gzip()) | |
| .pipe(gulp.dest('www/css')); | |
| }); | |
| // gzip compress all js files | |
| gulp.task('gzip-js', function() { | |
| gulp.src('www/js/main.min.js') | |
| .pipe(rename('main.min.js')) | |
| .pipe(gzip()) | |
| .pipe(gulp.dest('www/js')); | |
| }); | |
| gulp.task('default', ['sass', 'js', 'watch']); // This task runs when you type "gulp" into the terminal | |
| gulp.task('build', ['sass', 'js', 'gzip-sass', 'gzip-js']); // This task runs on deployment, or when you type "gulp build" into the terminal |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment