Skip to content

Instantly share code, notes, and snippets.

@zackexplosion
Created June 21, 2015 05:35
Show Gist options
  • Save zackexplosion/9829597fa5b25c36bbd7 to your computer and use it in GitHub Desktop.
Save zackexplosion/9829597fa5b25c36bbd7 to your computer and use it in GitHub Desktop.
plugins.js not build
// generated on 2015-06-14 using generator-gulp-webapp 1.0.0
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserSync from 'browser-sync';
import del from 'del';
import {stream as wiredep} from 'wiredep';
const $ = gulpLoadPlugins();
const reload = browserSync.reload;
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
.pipe($.autoprefixer({browsers: ['last 1 version']}))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
function lint(files) {
return () => {
return gulp.src(files)
.pipe(reload({stream: true, once: true}))
.pipe($.eslint())
.pipe($.eslint.format())
.pipe($.if(!browserSync.active, $.eslint.failAfterError()));
};
}
gulp.task('lint', lint('app/scripts/**/*.js'));
gulp.task('lint:test', lint('test/spec/**/*.js'));
gulp.task('html', ['styles'], () => {
const assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});
return gulp.src('app/*.html')
.pipe(assets)
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.minifyCss({compatibility: '*'})))
.pipe(assets.restore())
.pipe($.useref())
.pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
.pipe(gulp.dest('dist'));
});
gulp.task('images', () => {
return gulp.src('app/images/**/*')
.pipe($.if($.if.isFile, $.cache($.imagemin({
progressive: true,
interlaced: true,
// don't remove IDs from SVGs, they are often used
// as hooks for embedding and styling
svgoPlugins: [{cleanupIDs: false}]
}))
.on('error', function (err) {
console.log(err);
this.end();
})))
.pipe(gulp.dest('dist/images'));
});
gulp.task('fonts', () => {
return gulp.src(require('main-bower-files')({
filter: '**/*.{eot,svg,ttf,woff,woff2}'
}).concat('app/fonts/**/*'))
.pipe(gulp.dest('.tmp/fonts'))
.pipe(gulp.dest('dist/fonts'));
});
gulp.task('extras', () => {
return gulp.src([
'app/*.*',
'!app/*.html'
], {
dot: true
}).pipe(gulp.dest('dist'));
});
gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
gulp.task('serve', ['styles', 'fonts'], () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp', 'app'],
routes: {
'/bower_components': 'bower_components'
}
}
});
gulp.watch([
'app/*.html',
'app/scripts/**/*.js',
'app/images/**/*',
'.tmp/fonts/**/*'
])
.on('change', reload)
gulp.watch([
'app/*.html',
'app/scripts/**/*.js',
'app/images/**/*',
'.tmp/fonts/**/*'
],['lint']);
//.on('change', 'lint');
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});
gulp.task('serve:dist', () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['dist']
}
});
});
gulp.task('serve:test', () => {
browserSync({
notify: false,
open: false,
port: 9000,
ui: false,
server: {
baseDir: 'test'
}
});
gulp.watch('test/spec/**/*.js').on('change', reload);
gulp.watch('test/spec/**/*.js', ['lint:test']);
});
// inject bower components
gulp.task('wiredep', () => {
gulp.src('app/styles/*.scss')
.pipe(wiredep({
ignorePath: /^(\.\.\/)+/
}))
.pipe(gulp.dest('app/styles'));
gulp.src('app/*.html')
.pipe(wiredep({
exclude: ['bootstrap-sass'],
ignorePath: /^(\.\.\/)*\.\./
}))
.pipe(gulp.dest('app'));
});
gulp.task('build', ['lint', 'html', 'images', 'fonts', 'extras'], () => {
// gulp.task('build', ['html', 'images', 'fonts', 'extras'], () => {
return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});
gulp.task('default', ['clean'], () => {
gulp.start('build');
});
var ghPages = require('gulp-gh-pages');
gulp.task('deploy', function() {
return gulp.src('./dist/**/*')
.pipe(ghPages());
});
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>pixel counter</title>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="/bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container" style="background:#CCC">
<div class="header">
<!-- <ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul> -->
<h3 class="text-muted">pixel counter</h3>
</div>
<!-- <div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">Always a pleasure scaffolding your apps.</p>
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
</div> -->
<div class="row marketing">
<div class="col-lg-12">
<form id="import-form">
<div class="text">Click to slect file or drag file into here</div>
<input type="file" id="import-file" />
</form>
<h1>Imported</h1>
<div id="">
<img id="import-image" src="jobs.png"/>
<!-- <img id="scream" src="images/steve-jobs.png"/> -->
</div>
<!-- <img id="scream" src="cube.png"/> -->
<h1>Preview</h1>
<!-- <canvas id="myCanvas" style="width:310px"></canvas> -->
<canvas id="myCanvas" style="display: none;"></canvas>
<div id="contribution"></div>
<div id="output"></div>
</div>
</div>
<div class="footer">
<p>♥ from the Yeoman team</p>
</div>
</div>
<!-- build:js scripts/plugins.js -->
<script type="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/affix.js"></script>
<script type="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/alert.js"></script>
<script type="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js"></script>
<script type="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js"></script>
<script type="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/modal.js"></script>
<script type="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition.js"></script>
<script type="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/button.js"></script>
<script type="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js"></script>
<script type="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel.js"></script>
<script type="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/scrollspy.js"></script>
<script type="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse.js"></script>
<script type="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab.js"></script>
<!-- endbuild -->
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/moment/moment.js"></script>
<!-- endbower -->
<!-- endbuild -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment