From 13eb1def62668599fb1db8fa54490c44f402c28e Mon Sep 17 00:00:00 2001 From: Riku Rouvila Date: Wed, 21 Jan 2015 13:48:40 +0200 Subject: [PATCH] initial commit --- .editorconfig | 13 ++++++ .gitignore | 3 ++ .jshintrc | 3 ++ README.md | 61 ++++++++++++++++++++++++++++ bower.json | 16 ++++++++ gulpfile.js | 106 +++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 44 ++++++++++++++++++++ src/index.html | 10 +++++ src/js/app.jsx | 13 ++++++ src/js/main.js | 5 +++ src/style.css | 3 ++ 11 files changed, 277 insertions(+) create mode 100644 .editorconfig create mode 100644 .gitignore create mode 100644 .jshintrc create mode 100644 README.md create mode 100644 bower.json create mode 100644 gulpfile.js create mode 100644 package.json create mode 100644 src/index.html create mode 100644 src/js/app.jsx create mode 100644 src/js/main.js create mode 100644 src/style.css 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; +}