Created
November 8, 2016 07:16
-
-
Save jetrodn/17eb0c9af8be8ce5f5aae144b360ffb4 to your computer and use it in GitHub Desktop.
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
| /** | |
| * Gulp Dependencies | |
| * | |
| */ | |
| var gulp = require('gulp'), // gulp core | |
| lr = require('tiny-lr'), | |
| livereload = require('gulp-livereload'), | |
| imagemin = require('gulp-imagemin'), // imagemin | |
| concat = require('gulp-concat'), // concatinate js | |
| uglify = require('gulp-uglify'), // uglifies the js | |
| haml = require('gulp-haml'), // haml support | |
| prettify = require('gulp-prettify'), // prettify spaces and tabs | |
| fileinclude = require('gulp-file-include'), | |
| spritesmith = require('gulp.spritesmith'), // generate sprite | |
| changed = require('gulp-changed'), //Only pass through changed files | |
| cache = require('gulp-cached'), | |
| add = require('gulp-add'), // add folders and files | |
| server = lr(); // | |
| var EXPRESS_PORT = 4000; | |
| var EXPRESS_ROOT = 'build'; | |
| var LIVERELOAD_PORT = 35729; | |
| /** | |
| * Local server | |
| * Available at http://localhost:4000 | |
| */ | |
| function startExpress() { | |
| var express = require('express'); | |
| var app = express(); | |
| app.use(require('connect-livereload')()); | |
| app.use(express.static(EXPRESS_ROOT)); | |
| app.listen(EXPRESS_PORT); | |
| } | |
| /** | |
| * File destinations (assets folder relative) | |
| * | |
| */ | |
| var main = { | |
| haml_src: 'haml/**/*.haml', | |
| haml_html_src: 'haml/html/', | |
| js_concat_src: [ // all js files that should be concatinated | |
| 'js/*.js' | |
| ], | |
| js_dest: 'build/js/', // where to put minified js | |
| img_src: 'images/*', // folder with original images | |
| img_dest: 'build/images/' // folder with optimized images | |
| }; | |
| /** | |
| * HAML files | |
| * | |
| */ | |
| gulp.task('hamlify', function () { | |
| gulp.run('hamlify_main'); | |
| }); | |
| gulp.task('hamlify_main', function () { | |
| // Haml main domain. | |
| gulp.src(main.haml_src) | |
| .pipe(changed('build/html/')) | |
| .pipe(haml()) | |
| .pipe(prettify({ | |
| indentSize: 2 | |
| })) | |
| .pipe(gulp.dest('build/html/')) | |
| .pipe(livereload(server)); | |
| }); | |
| gulp.task('fileinclude', function () { | |
| return gulp.src('build/html/*.html') | |
| .pipe(changed('build/html/*.html')) | |
| .pipe(fileinclude({ | |
| prefix: '@@', | |
| basepath: '@file' | |
| })) | |
| .pipe(gulp.dest('build/')); | |
| }); | |
| gulp.task('haml', function () { | |
| // Haml main domain. | |
| gulp.src(main.haml_src) | |
| .pipe(haml()) | |
| .pipe(prettify({ | |
| indentSize: 2 | |
| })) | |
| .pipe(gulp.dest('build/html/')) | |
| .pipe(livereload(server)); | |
| gulp.src('build/html/*.html') | |
| .pipe(fileinclude({ | |
| prefix: '@@', | |
| basepath: '@file' | |
| })) | |
| .pipe(gulp.dest('build/')); | |
| }); | |
| gulp.task('buildhtml', function () { | |
| gulp.src('build/html/*.html') | |
| .pipe(fileinclude({ | |
| prefix: '@@', | |
| basepath: '@file' | |
| })) | |
| .pipe(gulp.dest('build/')); | |
| }); | |
| /** | |
| * Javascript tasks | |
| * | |
| */ | |
| // minify & concatinate js | |
| gulp.task('js-concat', function () { | |
| gulp.src(main.js_concat_src) // get the files | |
| //.pipe(uglify()) // uglify the files | |
| .pipe(concat('main.min.js')) // concatinate to one file | |
| .pipe(gulp.dest(main.js_dest)) // where to put the files | |
| .pipe(livereload(server)); | |
| }); | |
| /** | |
| * Images tasks | |
| * | |
| */ | |
| gulp.task('sprite', function () { | |
| var spriteData = gulp.src('images/sprite/*.png').pipe(spritesmith({ | |
| imgName: 'sprite.png', | |
| cssName: 'sprite.css', | |
| padding: 10, | |
| cssOpts: { | |
| cssClass: function (item) { | |
| return '.sp-' + item.name; | |
| } | |
| } | |
| })); | |
| spriteData.img.pipe(gulp.dest('images/')); | |
| spriteData.css.pipe(gulp.dest('css/')); | |
| var spriteDataStyl = gulp.src('images/sprite/*.png').pipe(spritesmith({ | |
| imgName: 'sprite.png', | |
| cssName: 'sprite.scss', | |
| padding: 10, | |
| cssOpts: { | |
| cssClass: function (item) { | |
| return '.sp-' + item.name; | |
| } | |
| } | |
| })); | |
| spriteData.img.pipe(gulp.dest('build/css/')); | |
| spriteDataStyl.css.pipe(gulp.dest('scss/')); | |
| }); | |
| // optimize images and paste them into build images folder | |
| gulp.task('imagemin', function () { | |
| return gulp.src(main.img_src) // get the images | |
| .pipe(changed(main.img_dest)) | |
| .pipe(imagemin({ | |
| progress: true, | |
| progressive: true, | |
| interlaced: true, | |
| optimizationLevel: 4 | |
| })) | |
| .pipe(gulp.dest(main.img_dest)) //save images | |
| .pipe(livereload(server)); | |
| }); | |
| /** | |
| * Gulp tasks | |
| * | |
| */ | |
| gulp.task('default', function () { | |
| startExpress(); | |
| // on gulp start, run these tasks | |
| gulp.run('hamlify'); | |
| // connect Livereload | |
| server.listen(LIVERELOAD_PORT, function (err) { | |
| if (err) return console.log(err); | |
| // complile html on haml change | |
| gulp.watch('haml/*.haml', ['hamlify_main']); | |
| gulp.watch('build/html/*.html', ['fileinclude']); | |
| gulp.watch('build/html/*.html', ['buildhtml']); | |
| // concat and minify js when it's changed | |
| gulp.watch(main.js_concat_src, ['js-concat']); | |
| // optimize images | |
| gulp.watch(main.img_src, ['imagemin']); | |
| }); | |
| }); | |
| gulp.task('structure', function () { | |
| gulp.src(['files']) | |
| .pipe(add('index.haml', '%div Hello world!')) | |
| .pipe(gulp.dest('./haml')); | |
| gulp.src(['files']) | |
| .pipe(add('main.js', '/* Main scripts file. */')) | |
| .pipe(gulp.dest('./js')); | |
| gulp.src(['files']) | |
| .pipe(add('README', 'Place folders with js libraries here.')) | |
| .pipe(gulp.dest('./js/libraries')); | |
| gulp.src(['files']) | |
| .pipe(add('README', 'Place Images here.')) | |
| .pipe(gulp.dest('./images')); | |
| gulp.src(['files']) | |
| .pipe(add('README', 'Place Sprite images here.')) | |
| .pipe(gulp.dest('./images/sprite')); | |
| gulp.src(['files']) | |
| .pipe(add('main.scss', '/* Main Sass file. */')) | |
| .pipe(gulp.dest('./sass')); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment