Skip to content

Instantly share code, notes, and snippets.

@edouard-lopez
Created May 5, 2014 15:18
Show Gist options
  • Save edouard-lopez/e99b70af8d4b4463b797 to your computer and use it in GitHub Desktop.
Save edouard-lopez/e99b70af8d4b4463b797 to your computer and use it in GitHub Desktop.
Gulp copy font-awesome files to dist/ directory
'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']);
});
@emregozel
Copy link

Thank you!

@bclincy
Copy link

bclincy commented Jun 1, 2017

Very helpful and I grateful. Just wondered why you used the dollar signs?

@808loud
Copy link

808loud commented Feb 6, 2018

@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