npm install -g gulp
cd src
npm install
bower install
gulp
Open browser and navigate to 'localhost:3000'
window.App = App = Ember.Application.create() | |
App.Router.map( -> | |
@route('about') | |
@route('contact') | |
) | |
// Core variables and mixins | |
@import "../bower_components/bootstrap/less/variables.less"; | |
@import "../bower_components/bootstrap/less/mixins.less"; | |
// Reset and dependencies | |
@import "../bower_components/bootstrap/less/normalize.less"; | |
@import "../bower_components/bootstrap/less/print.less"; | |
@import "../bower_components/bootstrap/less/glyphicons.less"; | |
// Core CSS | |
@import "../bower_components/bootstrap/less/scaffolding.less"; | |
@import "../bower_components/bootstrap/less/type.less"; | |
@import "../bower_components/bootstrap/less/code.less"; | |
@import "../bower_components/bootstrap/less/grid.less"; | |
@import "../bower_components/bootstrap/less/tables.less"; | |
@import "../bower_components/bootstrap/less/forms.less"; | |
@import "../bower_components/bootstrap/less/buttons.less"; | |
// Components | |
@import "../bower_components/bootstrap/less/component-animations.less"; | |
@import "../bower_components/bootstrap/less/dropdowns.less"; | |
@import "../bower_components/bootstrap/less/button-groups.less"; | |
@import "../bower_components/bootstrap/less/input-groups.less"; | |
@import "../bower_components/bootstrap/less/navs.less"; | |
@import "../bower_components/bootstrap/less/navbar.less"; | |
@import "../bower_components/bootstrap/less/breadcrumbs.less"; | |
@import "../bower_components/bootstrap/less/pagination.less"; | |
@import "../bower_components/bootstrap/less/pager.less"; | |
@import "../bower_components/bootstrap/less/labels.less"; | |
@import "../bower_components/bootstrap/less/badges.less"; | |
@import "../bower_components/bootstrap/less/jumbotron.less"; | |
@import "../bower_components/bootstrap/less/thumbnails.less"; | |
@import "../bower_components/bootstrap/less/alerts.less"; | |
@import "../bower_components/bootstrap/less/progress-bars.less"; | |
@import "../bower_components/bootstrap/less/media.less"; | |
@import "../bower_components/bootstrap/less/list-group.less"; | |
@import "../bower_components/bootstrap/less/panels.less"; | |
@import "../bower_components/bootstrap/less/responsive-embed.less"; | |
@import "../bower_components/bootstrap/less/wells.less"; | |
@import "../bower_components/bootstrap/less/close.less"; | |
// Components w/ JavaScript | |
@import "../bower_components/bootstrap/less/modals.less"; | |
@import "../bower_components/bootstrap/less/tooltip.less"; | |
@import "../bower_components/bootstrap/less/popovers.less"; | |
@import "../bower_components/bootstrap/less/carousel.less"; | |
// Utility classes | |
@import "../bower_components/bootstrap/less/utilities.less"; | |
@import "../bower_components/bootstrap/less/responsive-utilities.less"; | |
// app | |
@import "variables.less"; | |
@import "layout.less"; | |
@import "home.less"; |
{ | |
"name": "gulp-test", | |
"version": "0.0.0", | |
"license": "MIT", | |
"ignore": [ | |
"**/.*", | |
"node_modules", | |
"bower_components", | |
"test", | |
"tests" | |
], | |
"dependencies": { | |
"ember": "~1.7.0", | |
"jquery": "~2.1.1", | |
"bootstrap": "~3.2.0", | |
"handlebars": "~2.0.0" | |
}, | |
"resolutions": { | |
"handlebars": ">= 1.0.0 < 2.0.0" | |
} | |
} |
var gulp = require('gulp'), | |
gutil = require('gulp-util'), | |
uglify = require('gulp-uglify'), | |
concat = require('gulp-concat'), | |
del = require('del'), | |
browserSync= require('browser-sync'), | |
reload = browserSync.reload, | |
fs = require('fs'), | |
coffee = require('gulp-coffee'), | |
gulpFilter = require('gulp-filter'), | |
sourcemaps = require('gulp-sourcemaps'), | |
minimist = require('minimist'), | |
gulpif = require('gulp-if'), | |
less = require('gulp-less'), | |
rename = require('gulp-rename'), | |
handlebars = require('gulp-ember-handlebars') | |
; | |
/* | |
* paths | |
*/ | |
var paths = { | |
dist: { | |
path : '../build', | |
scripts : '../build/scripts', | |
styles : '../build/styles' | |
}, | |
src : { | |
path : '../src', | |
scripts : 'scripts', | |
styles : 'styles', | |
templates: 'templates' | |
} | |
}; | |
var src = { | |
scripts : [ | |
'bower_components/jquery/dist/jquery.js', | |
'bower_components/bootstrap/dist/js/bootstrap.js', | |
'bower_components/handlebars/handlebars.js', | |
'bower_components/ember/ember.js', | |
'scripts/**/*.coffee', | |
'templates/**/*.hbs' | |
], | |
styles : 'styles/app.less' | |
}; | |
/* | |
* options from command line | |
*/ | |
var knownOptions = { | |
string: 'env', | |
default: { env: process.env.NODE_ENV || 'development' } | |
}; | |
var options = minimist(process.argv.slice(2), knownOptions); | |
options.isProduction = options.env === 'production' ? true : false; | |
/* | |
* delete build directory | |
*/ | |
gulp.task('clean', function(cb) { | |
del([paths.dist.path], {force:true}, cb); | |
}); | |
/* | |
* copy html and paste to build directory | |
*/ | |
gulp.task('copy:html', function(){ | |
return gulp.src('*.html') | |
.pipe(gulp.dest(paths.dist.path)); | |
}); | |
/* | |
* compile styles | |
*/ | |
gulp.task('styles', function(){ | |
return gulp.src(src.styles) | |
.pipe(less({compress:true})) | |
.pipe(rename('bundle.css')) | |
.pipe(gulp.dest(paths.dist.styles)) | |
.pipe(browserSync.reload({stream:true})); | |
}); | |
/* | |
* compile scripts | |
*/ | |
gulp.task('scripts', function(){ | |
var coffeeFilter = gulpFilter('**/*.coffee'); | |
var handlebarsFilter = gulpFilter('**/*.hbs'); | |
return gulp.src(src.scripts) | |
.pipe(gulpif(!options.isProduction, sourcemaps.init())) | |
.pipe(coffeeFilter) | |
.pipe(coffee()) | |
.pipe(coffeeFilter.restore()) | |
.pipe(handlebarsFilter) | |
.pipe(handlebars({ | |
outputType:'browser', | |
namespace: 'Ember.TEMPLATES' | |
})) | |
.pipe(handlebarsFilter.restore()) | |
.pipe(gulpif(options.isProduction, uglify())) | |
.pipe(concat('bundle.js')) | |
.pipe(gulpif(!options.isProduction, sourcemaps.write())) | |
.pipe(gulp.dest(paths.dist.scripts)); | |
}); | |
/* | |
* 'gulp build --env production' ===> build source in production mode | |
* 'gulp build' ===> build source in development mode | |
*/ | |
// gulp.task('build', ['clean', 'copy:html', 'scripts']); | |
gulp.task('build', ['clean'], function() { | |
gulp.start('copy:html'); | |
gulp.start('styles'); | |
gulp.start('scripts'); | |
}); | |
/* | |
* run webserver | |
*/ | |
gulp.task('server', function() { | |
browserSync({ | |
server: { | |
baseDir: paths.dist.path | |
}, | |
open: false | |
}); | |
}); | |
/* | |
* 'gulp --env production' ===> build, run webserver and watch source in production mode | |
* 'gulp ===> build, run webserver and watch source in development mode | |
*/ | |
gulp.task('default', ['build', 'server'], function(){ | |
gulp.watch(['*.html'], ['copy:html', browserSync.reload]); | |
gulp.watch(['scripts/**/*.coffee', 'templates/**/*.hbs'], ['scripts', browserSync.reload]); | |
gulp.watch(['styles/**/*.less'], ['styles']); | |
}); | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<meta name="description" content=""> | |
<meta name="author" content=""> | |
<title>Gulp Template</title> | |
<link href="styles/bundle.css" rel="stylesheet"> | |
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
<!--[if lt IE 9]> | |
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
<![endif]--> | |
</head> | |
<body> | |
<script src="scripts/bundle.js"></script> | |
</body> | |
</html> |
{ | |
"name": "gulp-test", | |
"version": "0.0.0", | |
"description": "", | |
"main": "index.js", | |
"scripts": { | |
"test": "echo \"Error: no test specified\" && exit 1" | |
}, | |
"author": "", | |
"license": "ISC", | |
"devDependencies": { | |
"browser-sync": "^1.3.7", | |
"del": "^0.1.3", | |
"gulp": "*", | |
"gulp-coffee": "^2.2.0", | |
"gulp-concat": "*", | |
"gulp-ember-handlebars": "^0.6.0", | |
"gulp-filter": "^1.0.2", | |
"gulp-if": "^1.2.4", | |
"gulp-less": "^1.3.6", | |
"gulp-rename": "^1.2.0", | |
"gulp-sourcemaps": "^1.2.2", | |
"gulp-uglify": "*", | |
"gulp-util": "*", | |
"minimist": "^1.1.0" | |
} | |
} |
@body-padding: 0px; |