Created
May 5, 2014 15:18
-
-
Save edouard-lopez/e99b70af8d4b4463b797 to your computer and use it in GitHub Desktop.
Gulp copy font-awesome files to dist/ directory
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
'use strict'; | |
// Generated on 2014-04-14 using generator-leaflet 0.0.14 | |
var gulp = require('gulp'); | |
var open = require('open'); | |
var wiredep = require('wiredep').stream; | |
// Load plugins | |
var $ = require('gulp-load-plugins')(); | |
// Styles | |
gulp.task('styles', function () { | |
return gulp.src(['app/styles/*.css']) | |
.pipe($.autoprefixer('last 1 version')) | |
.pipe(gulp.dest('app/styles')) | |
.pipe($.size()); | |
}); | |
// Scripts | |
gulp.task('scripts', function () { | |
return gulp.src(['app/scripts/**/*.js']) | |
.pipe($.jshint('.jshintrc')) | |
.pipe($.jshint.reporter('default')) | |
.pipe($.size()); | |
}); | |
// HTML | |
gulp.task('html', ['styles', 'scripts'], function () { | |
var jsFilter = $.filter('**/*.js'); | |
var cssFilter = $.filter('**/*.css'); | |
return gulp.src('app/*.html') | |
.pipe($.useref.assets()) | |
.pipe(jsFilter) | |
.pipe($.uglify()) | |
.pipe(jsFilter.restore()) | |
.pipe(cssFilter) | |
.pipe($.csso()) | |
.pipe(cssFilter.restore()) | |
.pipe($.useref.restore()) | |
.pipe($.useref()) | |
.pipe(gulp.dest('dist')) | |
.pipe($.size()); | |
}); | |
// Images | |
gulp.task('images', function () { | |
return gulp.src([ | |
'app/images/**/*', | |
'app/lib/images/*']) | |
.pipe($.cache($.imagemin({ | |
optimizationLevel: 3, | |
progressive: true, | |
interlaced: true | |
}))) | |
.pipe(gulp.dest('dist/images')) | |
.pipe($.size()); | |
}); | |
// Data | |
gulp.task('data', function () { | |
return gulp.src([ | |
'app/scripts/**/*.csv', | |
'app/scripts/**/*.json']) | |
.pipe(gulp.dest('dist/scripts')) | |
.pipe($.size()); | |
}); | |
// Fonts | |
gulp.task('fonts', function() { | |
return gulp.src([ | |
'app/bower_components/font-awesome/fonts/fontawesome-webfont.*']) | |
.pipe(gulp.dest('dist/fonts/')); | |
}); | |
// Clean | |
gulp.task('clean', function () { | |
return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], { read: false }).pipe($.clean()); | |
}); | |
// Build | |
gulp.task('build', ['html', 'images', 'data', 'fonts']); | |
// Default task | |
gulp.task('default', ['clean'], function () { | |
gulp.start('build'); | |
}); | |
// Connect | |
gulp.task('connect', $.connect.server({ | |
root: ['app'], | |
port: 9000, | |
livereload: true | |
})); | |
// Open | |
gulp.task('serve', ['connect'], function() { | |
open("http://localhost:9000"); | |
}); | |
// Inject Bower components | |
gulp.task('wiredep', function () { | |
gulp.src('app/styles/*.css') | |
.pipe(wiredep({ | |
directory: 'app/bower_components', | |
ignorePath: 'app/bower_components/' | |
})) | |
.pipe(gulp.dest('app/styles')); | |
gulp.src('app/*.html') | |
.pipe(wiredep({ | |
directory: 'app/bower_components', | |
ignorePath: 'app/' | |
})) | |
.pipe(gulp.dest('app')); | |
}); | |
// Watch | |
gulp.task('watch', ['connect', 'serve'], function () { | |
// Watch for changes in `app` folder | |
gulp.watch([ | |
'app/*.html', | |
'app/styles/**/*.css', | |
'app/scripts/**/*.js', | |
'app/images/**/*' | |
], function (event) { | |
console.log('reload'); | |
return gulp.src(event.path) | |
.pipe($.connect.reload()); | |
}); | |
// Watch .css files | |
gulp.watch('app/styles/**/*.css', ['styles']); | |
// Watch .js files | |
gulp.watch('app/scripts/**/*.js', ['scripts']); | |
// Watch image files | |
gulp.watch('app/images/**/*', ['images']); | |
// Watch bower files | |
gulp.watch('bower.json', ['wiredep']); | |
}); |
Thank you!
Very helpful and I grateful. Just wondered why you used the dollar signs?
@bclincy the $
is calling a package called gulp-load-plugins.
Essentially, think of the $
as shorthand for require('gulp-
.
So instead of
require('gulp-jshint('.jshintrc'))
You can write
$.jshint('.jshintrc')
You can see the $
is a variable, defined on line 9 of the gist.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Very helpful