Merge branch 'master' of github.com:leonidas/gulp-project-template

Conflicts:
	package.json
This commit is contained in:
Riku Rouvila
2014-08-11 14:01:22 +03:00
6 changed files with 117 additions and 75 deletions

View File

@@ -1,3 +0,0 @@
{
"directory" : "vendor"
}

3
.gitignore vendored
View File

@@ -1,3 +1,4 @@
node_modules
bower_components
public
vendor
.DS_Store

View File

@@ -1,6 +1,7 @@
# Project template for [gulp.js](http://gulpjs.com/)
<img width="114px" height="257px" align="right" src="https://raw.githubusercontent.com/gulpjs/artwork/master/gulp-2x.png"/>
## What it does
### What it does
* [Jade](jade-lang.com) files to HTML
* [Stylus](http://learnboost.github.io/stylus) files to CSS
* [CoffeeScript](http://coffeescript.org/) files to Javascript through [browserify](http://browserify.org/)
@@ -18,7 +19,7 @@
npm start
open http://localhost:9001 in your browser
````
## Commands
## CLI Commands
* npm install
* Installs server-side dependencies from NPM and client-side dependencies from Bower
* npm start
@@ -30,22 +31,24 @@ Minification, uglification and other tasks you're expected to run before deployi
NODE_ENV=production npm run build
## Development guidelines
* **public** - directory should be dedicated only to compiled/copied files from **src** - directory.
It should be possible to delete directory completely and after **npm start** or **npm run build** everything should be as they were before the deletation.
* All backend dependencies should be installed with **npm**. Browser dependencies should be installed with **bower** or with **npm**.
## Adding 3rd party libraries
### Adding 3rd party libraries
**Note**: If the package you are looking for can be found in NPM it's much easier to install it from there. After installing packages from NPM they can be required without any of the following instructions.
bower install jquery --save
Now to use jQuery in your frontend code, you'll need to add jQuery to "browser" and "browserify-shim" sections of your package.json. Your package.json should be something like this:
Now to use jQuery in your frontend code, you'll need to add jQuery to "browser" section of your package.json. Your package.json should be something like this:
...
"browser": {
"jquery": "./vendor/jquery/dist/jquery.js"
},
"browserify-shim": {
"jquery": "$"
"jquery": "./bower_components/jquery/dist/jquery.js"
},
"browserify-shim": {},
"browserify": {
"transform": [ "coffeeify", "browserify-shim" ]
}
@@ -55,11 +58,24 @@ Now your should be able to require jQuery in your coffee files
$ = require 'jquery'
For non-CommonJS compatible modules you have to use browserify-shim. Read more about it [here](https://github.com/thlorenz/browserify-shim).
## Development guidelines
* **public** - directory should be dedicated only to compiled/copied files from **src** - directory.
It should be possible to delete directory completely and after **npm start** or **npm run build** everything should be as they were before the deletation.
* All backend dependencies should be installed with **npm**. Browser dependencies should be installed with **bower**.
### Using JavaScript instead of CoffeeScript
Remove coffeeify transform from package.json file (browserify.transform field)
``````
"browserify": {
"transform": ["browserify-shim"]
}
``````
## Enable LiveReload
and change the ".coffee" extension to ".js" from gulpfile.coffee
``````
paths =
scripts:
source: './src/coffee/main.js'
`````
You also can change the directory name to scripts or what ever.
### Enable LiveReload
Install [LiveReload for Chrome](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en)

View File

@@ -11,72 +11,103 @@ streamify = require 'gulp-streamify'
rename = require 'gulp-rename'
uglify = require 'gulp-uglify'
coffeeify = require 'coffeeify'
nodeStatic = require 'node-static'
lr = require 'tiny-lr'
ecstatic = require 'ecstatic'
livereload = require 'gulp-livereload'
plumber = require 'gulp-plumber'
prefix = require 'gulp-autoprefixer'
reloadServer = lr()
production = process.env.NODE_ENV is 'production'
gulp.task 'coffee', ->
paths =
scripts:
source: './src/coffee/main.coffee'
destination: './public/js/'
filename: 'bundle.js'
templates:
source: './src/jade/*.jade'
watch: './src/jade/*.jade'
destination: './public/'
styles:
source: './src/stylus/style.styl'
watch: './src/stylus/*.styl'
destination: './public/css/'
assets:
source: './src/assets/**/*.*'
watch: './src/assets/**/*.*'
destination: './public/'
bundle = watchify('./src/coffee/main.coffee')
handleError = (err) ->
gutil.log err
gutil.beep()
this.emit 'end'
rebundle = ->
gulp.task 'scripts', ->
build = bundle.bundle(debug: not production)
.pipe(source('bundle.js'))
bundle = browserify
entries: [paths.scripts.source]
extensions: ['.coffee']
build.pipe(streamify(uglify())) if production
build = bundle.bundle(debug: not production)
.on 'error', handleError
.pipe source paths.scripts.filename
build
.pipe(gulp.dest('./public/js/'))
.pipe(livereload(reloadServer))
build.pipe(streamify(uglify())) if production
bundle.on 'update', rebundle unless production
build
.pipe gulp.dest paths.scripts.destination
rebundle()
gulp.task 'jade', ->
gulp.task 'templates', ->
gulp
.src('src/jade/*.jade')
.src paths.templates.source
.pipe(jade(pretty: not production))
.pipe(gulp.dest('public/'))
.pipe livereload(reloadServer)
.on 'error', handleError
.pipe gulp.dest paths.templates.destination
.pipe livereload()
gulp.task 'stylus', ->
gulp.task 'styles', ->
styles = gulp
.src('src/stylus/style.styl')
.src paths.styles.source
.pipe(stylus({set: ['include css']}))
.pipe(prefix("last 1 version", "> 1%", "ie 8"))
.on 'error', handleError
.pipe prefix 'last 2 versions', 'Chrome 34', 'Firefox 28', 'iOS 7'
styles.pipe(CSSmin()) if production
styles = styles.pipe(CSSmin()) if production
styles.pipe(gulp.dest('public/css/'))
.pipe livereload reloadServer
styles.pipe gulp.dest paths.styles.destination
.pipe livereload()
gulp.task 'assets', ->
gulp
.src('src/assets/**/*.*')
.pipe gulp.dest 'public/'
.src paths.assets.source
.pipe gulp.dest paths.assets.destination
gulp.task "server", ->
staticFiles = new nodeStatic.Server './public'
require('http').createServer (req, res) ->
req.addListener 'end', ->
staticFiles.serve req, res
req.resume()
.listen 9001
gulp.task 'server', ->
require('http')
.createServer ecstatic root: __dirname + '/public'
.listen 9001
gulp.task "watch", ->
reloadServer.listen 35729, (err) ->
console.error err if err?
livereload.listen()
gulp.watch "src/jade/*.jade", ["jade"]
gulp.watch "src/stylus/*.styl", ["stylus"]
gulp.watch "src/assets/**/*.*", ["assets"]
gulp.watch paths.templates.watch, ['templates']
gulp.watch paths.styles.watch, ['styles']
gulp.watch paths.assets.watch, ['assets']
gulp.task "build", ["coffee", "jade", "stylus", "assets"]
bundle = watchify
entries: [paths.scripts.source]
extensions: ['.coffee']
bundle.on 'update', ->
build = bundle.bundle(debug: not production)
.on 'error', handleError
.pipe source paths.scripts.filename
build
.pipe gulp.dest paths.scripts.destination
.pipe(livereload())
.emit 'update'
gulp.task "build", ['scripts', 'templates', 'styles', 'assets']
gulp.task "default", ["build", "watch", "server"]

View File

@@ -1,2 +0,0 @@
require('coffee-script/register');
require('./gulpfile.coffee');

View File

@@ -18,29 +18,28 @@
"coffee-script": "~1.7.1"
},
"devDependencies": {
"gulp-rename": "~0.2.1",
"gulp-rename": "~1.2.0",
"gulp-uglify": "~0.1.0",
"gulp-util": "~2.2.9",
"gulp-stylus": "0.0.9",
"gulp-jade": "~0.3.0",
"node-static": "~0.7.3",
"gulp-minify-css": "~0.2.0",
"tiny-lr": "0.0.5",
"gulp-livereload": "~0.2.0",
"bower": "~1.2.8",
"browserify-shim": "~3.3.1",
"gulp-plumber": "~0.5.6",
"gulp-autoprefixer": "0.0.6",
"browserify": "~3.33.0",
"gulp-util": "~2.2.17",
"gulp-stylus": "1.0.2",
"gulp-jade": "~0.6.0",
"gulp-livereload": "~2.1.0",
"bower": "~1.3.5",
"browserify-shim": "~3.6.0",
"gulp-plumber": "~0.6.3",
"gulp-autoprefixer": "0.0.7",
"browserify": "~4.1.11",
"gulp-streamify": "0.0.5",
"vinyl-source-stream": "~0.1.1",
"coffeeify": "~0.6.0",
"gulp": "~3.6.0",
"watchify": "~0.6.3",
"karma": "~0.12.21",
"karma-jasmine": "~0.1.5",
"karma-chrome-launcher": "~0.1.4",
"karma-coffee-preprocessor": "~0.2.1"
"karma-coffee-preprocessor": "~0.2.1",
"gulp": "~3.8.1",
"watchify": "~0.10.2",
"ecstatic": "~0.5.3",
"gulp-minify-css": "~0.3.5"
},
"browser": {},
"browserify-shim": {},