This is from an 'Automation and Web Tooling' course from Udacity.
Tools Utilized: Gulp, Sass, 7-1 Pattern, Typeplate, Image Optimization, Concatination and Minification
View this project on GitHub
Coming from Grunt, I was pretty excited to try out Gulp since reading about how much faster it can be. This project is a pretty good base to start with if you'll be building an HTML, JavaScript, and Sass project. This project starts with the 7-1 Pattern for the Sass architecture, and Typeplate for the typographic baseline. All of it is autoprefixed and minified, and the output is put in the dist/css folder.
gulp.task('styles', function () {
return gulp.src('stylesheets/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
});The JavaScript is linted and set up for ES6 with babel, if you're into that. It's then concatinated and minified, but with sourcemaps so you can debug in your browser's developer tools.
gulp.task('scripts-dist', function() {
gulp.src('js/**/*.js')
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(concat('scripts.min.js'))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/js'));
});Last, but not least, there is PNG optimization.
gulp.task('copy-images', function() {
return gulp.src('img/*')
.pipe(imagemin({
progressive: true,
use: [pngquant()]
}))
.pipe(gulp.dest('dist/img'));
});