commit 13eb1def62668599fb1db8fa54490c44f402c28e Author: Riku Rouvila Date: Wed Jan 21 13:48:40 2015 +0200 initial commit diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..e1e62b8 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false + diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d5158d1 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +public +bower_components diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..a08e606 --- /dev/null +++ b/.jshintrc @@ -0,0 +1,3 @@ +{ + "browserify": true +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..8363a15 --- /dev/null +++ b/README.md @@ -0,0 +1,61 @@ +# Project template for [gulp.js](http://gulpjs.com/) + + +### What it does +* [Jade](http://jade-lang.com) files to HTML +* [Stylus](http://learnboost.github.io/stylus) files to CSS +* [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) files to Javascript through [browserify](http://browserify.org/) + * You are able to use 'require' in your client-side code +* Serves your static files to localhost:9001 +* Reloads your browser with LiveReload when files change + +## Getting things up and running +- Install [Node.js](http://nodejs.org) + +``` + git clone git@github.com:leonidas/gulp-project-template.git + cd + npm install + npm start + open http://localhost:9001 in your browser +```` +### Enable LiveReload +Install [LiveReload for Chrome](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en) + +## CLI Commands +* npm install + * Installs server-side dependencies from NPM and client-side dependencies from Bower +* npm start + * Compiles your files, starts watching files for changes, serves static files to port 9001 +* npm run build + * Builds everything + +Minification, uglification and other tasks you're expected to run before deploying your product can be made by running the build command with env variable NODE_ENV set to "production" + + 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 deletion. +* All backend dependencies should be installed with **npm**. Browser dependencies should be installed with **bower** or with **npm**. + +### Using JavaScript instead of CoffeeScript +Remove coffeeify transform from package.json file (browserify.transform field) +```diff + "transform": [ +- "coffeeify", + "debowerify", + "deamdify" + ] +``` + +and change the ".coffee" extension to ".js" from gulpfile.coffee +```diff +config = + scripts: +- source: './src/coffee/main.coffee' +- extensions: ['.coffee'] ++ source: './src/js/main.js' ++ extensions: ['.js'] +``` +You also can change the directory name to scripts or what ever. diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..170acdd --- /dev/null +++ b/bower.json @@ -0,0 +1,16 @@ +{ + "name": "gulp-template", + "version": "0.0.0", + "authors": [ + "Riku Rouvila " + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": {} +} diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..291057c --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,106 @@ +'use strict'; + +var browserify = require('browserify'); +var ecstatic = require('ecstatic'); +var gulp = require('gulp'); +var gutil = require('gulp-util'); +var livereload = require('gulp-livereload'); +var path = require('path'); +var source = require('vinyl-source-stream'); +var watchify = require('watchify'); + +var config = { + scripts: { + source: './src/js/main.js', + extensions: ['.jsx'], + destination: './public/js/', + filename: 'bundle.js' + }, + templates: { + source: './src/**/*.html', + watch: './src/**/*.html', + destination: './public/' + }, + styles: { + source: './src/**/style.css', + watch: './src/**/*.css', + destination: './public/css/' + }, + assets: { + source: './src/assets/**/*.*', + watch: './src/assets/**/*.*', + destination: './public/' + } +}; + +function handleError(err) { + gutil.log(err); + gutil.beep(); + return this.emit('end'); +} + +gulp.task('scripts', function() { + var build, bundle; + bundle = browserify({ + entries: [config.scripts.source], + extensions: config.scripts.extensions, + debug: false + }); + build = bundle.bundle().on('error', handleError).pipe(source(config.scripts.filename)); + return build.pipe(gulp.dest(config.scripts.destination)); +}); + +gulp.task('templates', function() { + return gulp.src(config.templates.source) + .pipe(gulp.dest(config.templates.destination)) + .on('error', handleError) + .pipe(livereload({auto: false})); +}); + +gulp.task('styles', function() { + return gulp.src(config.styles.source) + .pipe(gulp.dest(config.styles.destination)) + .pipe(livereload({auto: false})); +}); + +gulp.task('assets', function() { + return gulp.src(config.assets.source) + .pipe(gulp.dest(config.assets.destination)); +}); + +gulp.task('server', function() { + return require('http').createServer(ecstatic({ + root: path.join(__dirname, 'public') + })).listen(9001); +}); + +gulp.task('watch', function() { + livereload.listen(); + + gulp.watch(config.templates.watch, ['templates']); + gulp.watch(config.styles.watch, ['styles']); + gulp.watch(config.assets.watch, ['assets']); + + var bundle = watchify(browserify({ + entries: [config.scripts.source], + extensions: config.scripts.extensions, + debug: true, + cache: {}, + packageCache: {}, + fullPaths: true + })); + + return bundle.on('update', function() { + return bundle.bundle() + .on('error', handleError) + .pipe(source(config.scripts.filename)) + .pipe(gulp.dest(config.scripts.destination)) + .pipe(livereload()); + }).emit('update'); +}); + +gulp.task('no-js', ['templates', 'styles', 'assets']); + +gulp.task('build', ['scripts', 'no-js']); + +gulp.task('default', ['watch', 'no-js', 'server']); diff --git a/package.json b/package.json new file mode 100644 index 0000000..717a770 --- /dev/null +++ b/package.json @@ -0,0 +1,44 @@ +{ + "name": "gulp-template", + "version": "1.0.0", + "description": "Project template for gulp.js", + "author": "Riku Rouvila ", + "license": "MIT", + "main": "gulpfile.js", + "scripts": { + "prepublish": "bower install", + "start": "gulp", + "build": "gulp build" + }, + "keywords": [ + "gulp", + "template" + ], + "dependencies": { + "react": "^0.11.2" + }, + "devDependencies": { + "bower": "~1.3.5", + "browserify": "~6.1.0", + "ecstatic": "~0.5.3", + "deamdify": "^0.1.1", + "debowerify": "~0.9.1", + "gulp": "~3.8.1", + "gulp-autoprefixer": "1.0.1", + "gulp-livereload": "~2.1.0", + "gulp-minify-css": "~0.3.5", + "gulp-streamify": "0.0.5", + "gulp-uglify": "~1.0.1", + "gulp-util": "~3.0.1", + "reactify": "~0.14.0", + "vinyl-source-stream": "~1.0.0", + "watchify": "~2.0.0" + }, + "browserify": { + "transform": [ + "reactify", + "debowerify", + "deamdify" + ] + } +} diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..e5eef1d --- /dev/null +++ b/src/index.html @@ -0,0 +1,10 @@ + + + + Gulp template + + + + + + diff --git a/src/js/app.jsx b/src/js/app.jsx new file mode 100644 index 0000000..c13b27e --- /dev/null +++ b/src/js/app.jsx @@ -0,0 +1,13 @@ +/*** @jsx React.DOM */ + +var React = require('react'); + +var APP = React.createClass({ + render:function(){ + return ( +

Hello World

+ ) + } +}); + +React.renderComponent(, document.body) diff --git a/src/js/main.js b/src/js/main.js new file mode 100644 index 0000000..dc60997 --- /dev/null +++ b/src/js/main.js @@ -0,0 +1,5 @@ +/*jslint browser: true */ +'use strict'; + +require('./app'); + diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..0f5b3bc --- /dev/null +++ b/src/style.css @@ -0,0 +1,3 @@ +body, html { + margin: 0; +}