Created
May 29, 2017 15:09
-
-
Save massiws/d9a0bf99fdc82a36a20d4615acc74229 to your computer and use it in GitHub Desktop.
Simple Gulp boilerplate
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
/** | |
* Gulp boilerplate | |
* | |
* Requirements: | |
* - NodeJS (https://nodejs.org/) | |
* - Gulp (http://gulpjs.com/) | |
* | |
* Start new project: | |
* ``` | |
* mkdir project-name | |
* cd project-name | |
* npm init | |
* npm install --save-dev gulp | |
* ``` | |
* | |
* Install each plugin in project folder with: | |
* ``` | |
* npm install --save-dev {plugin-name} | |
* ``` | |
* | |
* Configured plugin: | |
* - del | |
* - gulp-rename | |
* - gulp-html-minify | |
* - gulp-sitemap | |
* - gulp-save | |
* - gulp-imagemin | |
* - gulp-less | |
* - gulp-sass | |
* - gulp-clean-css | |
* - gulp-concat | |
* - gulp-uglify | |
*/ | |
const gulp = require('gulp'); | |
const rename = require("gulp-rename"); | |
const htmlminify = require('gulp-html-minify'); // Minify HTML. | |
const del = require('del'); // Clean production folder. | |
const sitemap = require('gulp-sitemap'); // Generate sitemap. | |
const save = require('gulp-save'); // Generate sitemap. | |
const imagemin = require('gulp-imagemin'); // Optimize images. | |
const less = require('gulp-less'); // Compile LESS files from /less into /css | |
const sass = require('gulp-sass'); // Compile Sass into standard CSS. | |
const cleanCSS = require('gulp-clean-css'); // Minify compiled CSS | |
const concat = require('gulp-concat'); // Concat and minify javascripts. | |
const uglify = require('gulp-uglify'); // Concat and minify javascripts. | |
// Destination folders: EDIT THIS AS YOU LIKE. | |
const DIST = 'dist'; | |
const SITE_URL = 'http://my-domain.com'; | |
// Clean production folder. | |
gulp.task('clean', function() { | |
console.log('"' + DIST + '" folder is empty!'); | |
return del(DIST); | |
}); | |
// Minify HTML. | |
gulp.task('html' , function(){ | |
gulp.src('src/*.html') | |
.pipe(htmlminify()) | |
.pipe(gulp.dest(DIST)) | |
}); | |
// Generate sitemap. | |
gulp.task('sitemap', function() { | |
gulp.src('src/*.html', {read: false}) | |
.pipe(save('before-sitemap')) | |
.pipe(sitemap({siteUrl: SITE_URL})) | |
.pipe(gulp.dest(DIST)) | |
.pipe(save.restore('before-sitemap')) | |
}); | |
// Copy html files to production folder. | |
gulp.task('copy', function() { | |
gulp.src('src/*.html') | |
.pipe(gulp.dest(DIST)) | |
}) | |
// Optimize images. | |
gulp.task('imagemin', function() { | |
gulp.src('src/images/*') | |
.pipe(imagemin()) | |
.pipe(gulp.dest(DIST + '/images')) | |
}); | |
// Compile Sass into standard CSS. | |
gulp.task('sass', function() { | |
return gulp.src('src/sass/*.scss') | |
.pipe(sass().on('error', sass.logError)) | |
.pipe(gulp.dest('src/css')) | |
}); | |
// Compile LESS files from /less into /css | |
gulp.task('less', function() { | |
gulp.src('src/less/*.less') | |
.pipe(less()) | |
.pipe(gulp.dest('/css')) | |
}); | |
// Concat and minify javascripts. | |
// Destination file name: 'main.min.js' | |
gulp.task('js', function() { | |
gulp.src('src/js/*.js') | |
.pipe(concat('main.js')) | |
.pipe(uglify()) | |
.pipe(rename({ suffix: '.min' })) | |
.pipe(gulp.dest(DIST + '/js')) | |
}); | |
// Minify compiled CSS (destination file name: 'style.min.css') | |
gulp.task('css', function() { | |
return gulp.src('src/css/*.css') | |
.pipe(cleanCSS({ compatibility: 'ie8' })) | |
.pipe(concat('style.css')) | |
.pipe(rename({ suffix: '.min' })) | |
.pipe(gulp.dest(DIST + '/css')) | |
}); | |
// Run all tasks. | |
gulp.task('default', ['clean', 'sitemap', 'copy', 'imagemin', 'less', 'sass', 'css', 'js']); | |
// Watch for changes. | |
gulp.task('dev', function() { | |
gulp.watch('src/js/*.js', ['js']) | |
gulp.watch('src/css/*.css', ['css']) | |
gulp.watch('src/sass/*.scss', ['sass', 'css']) | |
gulp.watch('src/less/*.less', ['less', 'css']) | |
gulp.watch('src/*.html', ['html']) | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment