Created
August 4, 2017 06:57
-
-
Save jeyram/720b7a00324427c3bcaa0d913620cd27 to your computer and use it in GitHub Desktop.
My gulpfile
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
| // Include gulp | |
| var gulp = require('gulp'); | |
| // Include Our Plugins | |
| var sourcemaps = require('gulp-sourcemaps'); | |
| var jshint = require('gulp-jshint'); | |
| var sass = require('gulp-sass'); | |
| var importer = require('node-sass-globbing'); | |
| var concat = require('gulp-concat'); | |
| var uglify = require('gulp-uglify'); | |
| var rename = require('gulp-rename'); | |
| var postcss = require('gulp-postcss'); | |
| var cssmin = require('gulp-cssmin'); | |
| var plumber = require('gulp-plumber'); | |
| var autoprefixer = require('autoprefixer'); | |
| var notify = require('gulp-notify'); | |
| var imagemin = require('gulp-imagemin'); | |
| var insert = require('gulp-insert'); | |
| var sass_config = { | |
| importer: importer, | |
| includePaths: [ | |
| 'scss/', | |
| ] | |
| }; | |
| // Compile Our Sass | |
| gulp.task('sass', function() { | |
| return gulp.src('scss/styles.scss') | |
| // Plumber allows us to bypass errors and pipe them to the Mac notification center, if possible | |
| .pipe(plumber({ | |
| errorHandler: notify.onError("Error: <%= error.message %>") | |
| })) | |
| // Initialising sourcemapping | |
| .pipe(sourcemaps.init()) | |
| // Running SASS to compile to CSS | |
| .pipe(sass(sass_config)) | |
| // Prefixing ONLY our CSS file with vendor prefixes so that we don't need them in our SCSS files | |
| .pipe(postcss([autoprefixer({ | |
| browsers: ['last 2 versions'] | |
| })])) | |
| .pipe(sourcemaps.write()) | |
| .pipe(gulp.dest('css')); | |
| }); | |
| //Concatenate & Minify JS | |
| gulp.task('scripts', function() { | |
| return gulp.src('js/scripts/*.js') | |
| // Plumber allows us to bypass errors and pipe them to the Mac notification center, if possible | |
| .pipe(plumber({ | |
| errorHandler: notify.onError("Error: <%= error.message %>") | |
| })) | |
| .pipe(concat('scripts.js')) | |
| // Wraps this main.js file with jQuery closure (and/or any other wrappers we need) | |
| .pipe(insert.wrap('(function ($) {', '}(jQuery));')) // prepends 'string1' and appends 'string2' to the contents | |
| .pipe(gulp.dest('js')) | |
| // start uglify | |
| .pipe(uglify()) | |
| // Renames this uglified, concatenated file to a min version. | |
| .pipe(rename('scripts.min.js')) | |
| // Pipes this minified js file to the JS folder | |
| .pipe(gulp.dest('js')); | |
| }); | |
| //Image minification | |
| gulp.task('imagemin', function() { | |
| return gulp.src('images/**/*') | |
| .pipe(imagemin()) | |
| .pipe(gulp.dest('images/')) | |
| }); | |
| // Watch Files For Changes, and reloads browser window on JS or SCSS change. | |
| gulp.task('watch', function() { | |
| gulp.watch('js/scripts/*.js', ['scripts']); | |
| gulp.watch('scss/*/*.scss', ['sass']); | |
| }); | |
| // Default Task | |
| gulp.task('default', ['sass', 'scripts', 'watch', 'imagemin']); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment