From f5ed65a8e344051cf464b4b552945c3333bd039b Mon Sep 17 00:00:00 2001 From: Amrit Panesar Date: Thu, 23 Mar 2017 12:17:44 -0700 Subject: [PATCH] Use Grunt for building behind the scenes --- Gruntfile.js | 81 ++++++++++++++++++++++++++++++++++++ app.css | 23 ---------- package.json | 25 +++++++++-- debug.js => src/debug.js | 0 src/index.css | 23 ++++++++++ index.html => src/index.html | 0 index.js => src/index.js | 2 +- 7 files changed, 126 insertions(+), 28 deletions(-) create mode 100644 Gruntfile.js delete mode 100644 app.css rename debug.js => src/debug.js (100%) create mode 100644 src/index.css rename index.html => src/index.html (100%) rename index.js => src/index.js (99%) diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..8452ed7 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,81 @@ +module.exports = function (grunt) { + // Do grunt-related things in here + + // Project configuration. + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + + clean: { + default: { + src: [ + '<%= pkg.grunt.src.path %>/<%= pkg.grunt.build.script %>.js', + '<%= pkg.grunt.build.path %>/*' + ] + } + }, + + browserify: { + default: { + src: ['<%= pkg.grunt.src.path %>/debug.js', '<%= pkg.grunt.src.path %>/<%= pkg.grunt.src.script %>'], + dest: '<%= pkg.grunt.src.path %>/<%= pkg.grunt.build.script %>.js' + }, + build: { + src: ['<%= pkg.grunt.src.path %>/<%= pkg.grunt.src.script %>'], + dest: '<%= pkg.grunt.src.path %>/<%= pkg.grunt.build.script %>.js' + } + }, + + uglify: { + options: { + banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' + }, + default: { + src: [], + dest: [] + }, + build: { + src: '<%= pkg.grunt.src.path %>/<%= pkg.grunt.build.script %>.js', + dest: '<%= pkg.grunt.src.path %>/<%= pkg.grunt.build.script %>.js' + } + }, + + copy: { + default: { + files: [ + { + src: '<%= pkg.grunt.src.path %>/<%= pkg.grunt.build.script %>.js', + dest: '<%= pkg.grunt.build.path %>/<%= pkg.grunt.build.script %>.js' + }, + { + src: '<%= pkg.grunt.src.path %>/<%= pkg.grunt.build.html %>', + dest: '<%= pkg.grunt.build.path %>/<%= pkg.grunt.build.html %>' + } + ] + } + }, + + cachebreaker: { + default: { + options: { + match: ['app.js'], + replacement: 'time' + }, + files: { + src: ['<%= pkg.grunt.build.path %>/<%= pkg.grunt.build.html %>'] + } + } + } + }); + + // Load the plugins. + grunt.loadNpmTasks('grunt-browserify'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-cache-breaker'); + + // Default task(s). + grunt.registerTask('default', ['clean', 'browserify:default', 'copy', 'cachebreaker']); + grunt.registerTask('build', ['clean', 'browserify:build', 'uglify:build', 'copy', 'cachebreaker']); + +}; diff --git a/app.css b/app.css deleted file mode 100644 index e7d4c1c..0000000 --- a/app.css +++ /dev/null @@ -1,23 +0,0 @@ -/** -CSS Boilerplate -*/ - -@import url('./node_modules/bootstrap/dist/css/bootstrap.min.css'); -@import url('./node_modules/bootswatch/darkly/bootstrap.min.css'); -@import url('./node_modules/highlight.js/styles/default.css'); -@import url('./node_modules/highlight.js/styles/monokai-sublime.css'); - -pre { - outline: 1px solid #767676; - padding: 0; - margin: 0; -} - -body { - padding-top: 50px; -} - -textarea#input, code#output { - width: 100%; - height: 25em; -} diff --git a/package.json b/package.json index 70cc2ac..af5bd5a 100644 --- a/package.json +++ b/package.json @@ -5,11 +5,10 @@ "main": "js/app.js", "scripts": { "prebuild": "npm install", - "build": "browserify -u debug.js -g uglifyify -o app.js index.js", - "postbuild": "mkdir -p public_html/ && cp app.js public_html/ && cp index.html public_html/", + "build": "grunt build", + "prebuild:dev": "npm run prebuild", - "build:dev": "browserify -d -o app.js index.js debug.js", - "postbuild:dev": "npm run postbuild" + "build:dev": "grunt" }, "author": "Amrit Panesar ", "license": "MIT", @@ -22,6 +21,13 @@ "browserify-shim": "^3.8.13", "bulkify": "^1.4.2", "crypto-js": "^3.1.9-1", + "grunt": "^1.0.1", + "grunt-browserify": "^5.0.0", + "grunt-cache-breaker": "^2.0.1", + "grunt-cli": "^1.2.0", + "grunt-contrib-clean": "^1.0.0", + "grunt-contrib-copy": "^1.0.0", + "grunt-contrib-uglify": "^2.2.0", "hasher": "^1.2.0", "highlight.js": "^9.9.0", "html": "^1.0.0", @@ -32,6 +38,17 @@ "uglifyify": "^3.0.4", "xml-beautifier": "^0.3.0" }, + "grunt": { + "src": { + "path": "./src", + "script": "index.js" + }, + "build": { + "path": "./public_html", + "script": "app", + "html": "index.html" + } + }, "browserify": { "transform": [ "browserify-css", diff --git a/debug.js b/src/debug.js similarity index 100% rename from debug.js rename to src/debug.js diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..9dc227c --- /dev/null +++ b/src/index.css @@ -0,0 +1,23 @@ +/** +CSS Boilerplate +*/ + +@import url('../node_modules/bootstrap/dist/css/bootstrap.min.css'); +@import url('../node_modules/bootswatch/darkly/bootstrap.min.css'); +@import url('../node_modules/highlight.js/styles/default.css'); +@import url('../node_modules/highlight.js/styles/monokai-sublime.css'); + +pre { + outline: 1px solid #767676; + padding: 0; + margin: 0; +} + +body { + padding-top: 50px; +} + +textarea#input, code#output { + width: 100%; + height: 25em; +} diff --git a/index.html b/src/index.html similarity index 100% rename from index.html rename to src/index.html diff --git a/index.js b/src/index.js similarity index 99% rename from index.js rename to src/index.js index 8f282ca..f96c1cf 100644 --- a/index.js +++ b/src/index.js @@ -7,7 +7,7 @@ window.$ = window.jQuery = require('jquery'); // include bootstrap css and javascript -require('./app.css'); +require('./index.css'); require('bootstrap'); // use hasher for application page management