Basic gulp build added

aymanfarhat · Aug 30, 2015 · 3bf9609 · 3bf9609
1 parent 2491924
commit 3bf9609
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1 @@
 /node_modules
-/_build/*
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,94 @@
+var gulp      = require('gulp'),
+    webserver = require('gulp-webserver'),
+    opn       = require('opn'),
+    concat    = require('gulp-concat'),
+    minifyCSS = require('gulp-minify-css'),
+    rename    = require('gulp-rename'),
+    uglify    = require('gulp-uglify'),
+    jshint    = require('gulp-jshint'),
+    minifyHTML = require('gulp-minify-html'),
+    replaceHTML = require('gulp-html-replace'),
+    rimraf = require('gulp-rimraf'),
+    ignore = require('gulp-ignore'),
+
+    serveDir = './src',
+
+    timestamp = Math.floor(Date.now() / 1000),
+
+    server = {
+        host: 'localhost',
+        port: '9000'
+    },
+
+    distPaths = {
+        build: '_build',
+        js_build_file: 'game.min.' + timestamp + '.js',
+        css_build_file: 'game.min.' + timestamp + '.css'
+    },
+
+    sourcePaths = {
+        css: [
+            'src/css/*.css', 
+        ],
+        js: [
+            'src/js/game.js', 
+            'src/js/*.js'
+        ],
+        mainHtml: [
+            'src/index.html' 
+        ]
+    };
+
+gulp.task('serve', function () {
+    gulp.src(serveDir)
+        .pipe(webserver({
+            host: server.host,
+            port: server.port,
+            fallback: 'index.html',
+            livereload: false,
+            directoryListing: false,
+            open: true
+    }));
+});
+
+gulp.task('openbrowser', function () {
+    opn( 'http://' + server.host + ':' + server.port );
+});
+
+gulp.task('buildCSS', function () {
+    return gulp.src(sourcePaths.css)
+        .pipe(concat(distPaths.css_build_file))
+        .pipe(minifyCSS())
+        .pipe(gulp.dest(distPaths.build));
+});
+
+gulp.task('buildJS', function () {
+    return gulp.src(sourcePaths.js)
+        .pipe(concat(distPaths.js_build_file))
+        .pipe(uglify())
+        .pipe(gulp.dest(distPaths.build));
+});
+
+gulp.task('buildIndex', function () {
+    return gulp.src(sourcePaths.mainHtml)
+        .pipe(replaceHTML({
+            'css': distPaths.css_build_file,
+            'js': distPaths.js_build_file
+        }))
+        .pipe(minifyHTML())
+        .pipe(rename('index.html'))
+        .pipe(gulp.dest(distPaths.build));
+});
+
+gulp.task('setEnvProduction', function () {
+    serveDir = './_build';
+});
+
+gulp.task('cleanBuild', function () {
+    return gulp.src('./_build/*', { read: false })    
+        .pipe(ignore('.gitignore'))
+        .pipe(rimraf());
+});
+
+gulp.task('default', ['serve']);
+gulp.task('build', ['cleanBuild', 'setEnvProduction', 'buildJS', 'buildCSS', 'buildIndex', 'serve']);
diff --git a/package.json b/package.json
@@ -9,6 +9,18 @@
   "author": "Ayman Farhat",
   "license": "MIT",
   "dependencies": {
-    "gulp": "^3.9.0"
+    "gulp": "^3.9.0",
+    "gulp-concat": "^2.6.0",
+    "gulp-html-replace": "^1.5.1",
+    "gulp-ignore": "^1.2.1",
+    "gulp-jshint": "^1.11.2",
+    "gulp-minify-css": "^1.2.1",
+    "gulp-minify-html": "^1.0.4",
+    "gulp-rename": "^1.2.2",
+    "gulp-rimraf": "^0.1.1",
+    "gulp-uglify": "^1.4.0",
+    "gulp-webserver": "^0.9.1",
+    "opn": "^3.0.2",
+    "rimraf": "^2.4.3"
   }
 }
diff --git a/src/index.html b/src/index.html
@@ -11,15 +11,20 @@
         <meta property="og:type" content="website" />
         <meta property="og:url" content="" />
         <meta property="og:image" content="" />
+        <!-- build:css -->
         <link rel="stylesheet" type="text/css" href="./css/style.css" />
+        <!-- endbuild -->
     </head>
     <body>
         <h1>JS13K Starter Project</h1>
         <h3>Click to randomize!</h3>
         <canvas></canvas>
+
+        <!-- build:js -->
         <script src="./js/game.js"></script>
         <script src="./js/draw.js"></script>
         <script src="./js/util.js"></script>
         <script src="./js/random_obj.js"></script>
+        <!-- endbuild -->
     </body>
 </html>