From c9051b3ca0de28e8dda8b7239dd5be26eee1f319 Mon Sep 17 00:00:00 2001 From: nomospace Date: Sun, 29 Nov 2015 00:55:37 +0800 Subject: [PATCH] Support grunt-contrib-copy + uglify tasks --- .gitignore | 1 + .jshintrc | 4 +- Gruntfile.js | 91 +++++++++++---- README.md | 5 +- bower.json | 3 +- package.json | 7 +- src/app.js | 11 +- src/assets/scripts/require.config.js | 11 +- src/assets/styles/common.less | 6 + src/assets/styles/link-list.less | 6 +- src/index.html | 168 ++------------------------- src/mock/links.json | 96 +++++++++++++++ src/templates/link-item-recent.hbs | 25 ++++ src/templates/link-item.hbs | 48 ++++++++ 14 files changed, 291 insertions(+), 191 deletions(-) create mode 100644 src/mock/links.json create mode 100644 src/templates/link-item-recent.hbs create mode 100644 src/templates/link-item.hbs diff --git a/.gitignore b/.gitignore index 17e62f2..0725c63 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ src/bower_components src/assets/styles/all.css dist node_modules +temp diff --git a/.jshintrc b/.jshintrc index c336aca..12a5970 100644 --- a/.jshintrc +++ b/.jshintrc @@ -28,6 +28,8 @@ "exports": true, "define": true, "module": true, - "require": true + "require": true, + "$": true, + "jQuery": true } } \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 3de563b..3367dc1 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -4,6 +4,8 @@ module.exports = function(grunt) { grunt.initConfig({ port: 5601, liveReloadPort: 35729, + srcDir: "src", + tempDir: "temp", // Import package manifest pkg: grunt.file.readJSON("package.json"), @@ -19,18 +21,39 @@ module.exports = function(grunt) { " */\n" }, + // Clean the project + clean: { + temp: ["<%=tempDir%>"] + }, + + // Copy files + copy: { + src: { + cwd: "<%=srcDir%>", + expand: true, + src: ["**/*", "!assets/**/*.{less,css}", "!*/*.hbs"], + dest: "<%=tempDir%>" + } + }, + // Compile less less: { compile: { files: { - "src/assets/styles/all.css": "src/assets/styles/**/*.less" + "<%=tempDir%>/assets/styles/all.css": "<%=srcDir%>/assets/styles/**/*.less" + //expand: true, + //cwd: "<%=srcDir%>/assets/styles/", + //src: ["**/*.less"], + //dest: "<%=tempDir%>/assets/styles/", + //ext: ".css", + //extDot: "last" } }, compress: { options: { compress: true }, - files: "src/assets/styles/all.css" + files: "<%=tempDir%>/assets/styles/all.css" } }, @@ -38,20 +61,22 @@ module.exports = function(grunt) { concat: { js: { options: { - banner: "<%= meta.banner %>" + banner: "<%=meta.banner%>" }, files: { - src: ["src/app/*.js"], - dest: "dist/app.js" + "<%=tempDir%>/*.js": ["<%=tempDir%>/assets/scripts/**/*.js", "<%=tempDir%>/app.js"] } }, css: { options: { - banner: "<%= meta.banner %>", + banner: "<%=meta.banner%>", separator: "" }, files: { - "src/assets/styles/all.css": ["src/assets/styles/all.css", "src/assets/styles/vendor/*.css"] + "<%=tempDir%>/assets/styles/all.css": [ + "<%=tempDir%>/assets/styles/all.css", + "<%=srcDir%>/assets/styles/vendor/*.css" + ] } } }, @@ -60,7 +85,7 @@ module.exports = function(grunt) { jshint: { files: [ "Gruntfile.js", - "src/assets/**/*.js" + "./<%=srcDir%>/assets/**/*.js" ], options: { jshintrc: ".jshintrc" @@ -71,10 +96,10 @@ module.exports = function(grunt) { uglify: { js: { options: { - banner: "<%= meta.banner %>" + banner: "<%=meta.banner%>" }, files: { - "dist/app.js": ["src/assets/scripts/**/*.js"] + "<%=tempDir%>/app.js": "<%=tempDir%>/app.js" } } }, @@ -86,22 +111,43 @@ module.exports = function(grunt) { }, compress: { files: { - "src/assets/styles/all.css": "src/assets/styles/all.css" + "<%=tempDir%>/assets/styles/all.css": "<%=tempDir%>/assets/styles/all.css" } } }, + handlebars: { + compile: { + options: { + namespace: false, + amd: true, + processContent: function(content) { + content = content.replace(/^[\x20\t]+/mg, "").replace(/[\x20\t]+$/mg, ""); + content = content.replace(/^[\r\n]+/, "").replace(/[\r\n]+$/, ""); + return content; + } + }, + files: { + "<%=tempDir%>/templates/link-item.js": ["<%=srcDir%>/templates/link-item.hbs"], + "<%=tempDir%>/templates/link-item-recent.js": ["<%=srcDir%>/templates/link-item-recent.hbs"] + } + } + }, // watch for changes to source // Better than calling grunt a million times watch: { js: { - files: ["src/**/*.js"], + files: ["<%=srcDir%>/**/*.js"], tasks: ["jshint"] }, css: { - files: ["src/**/*.{less,css}"], + files: ["<%=srcDir%>/**/*.{less,css}"], tasks: ["less", "concat:css"] }, + hbs: { + files: ["<%=srcDir%>/templates/*.hbs"], + tasks: ["handlebars"] + }, options: { livereload: "<%=liveReloadPort%>" } @@ -109,7 +155,7 @@ module.exports = function(grunt) { open: { server: { - path: 'http://localhost:<%=port%>/' + path: "http://localhost:<%=port%>/" } }, @@ -118,12 +164,8 @@ module.exports = function(grunt) { options: { port: "<%=port%>", livereload: true, - middleware: function() { - return [ - require('serve-static')("src"), - require("connect-livereload")({port: "<%=liveReloadPort%>"}) - ]; - } + base: ["<%=tempDir%>"], + middleware: null } } } @@ -132,15 +174,20 @@ module.exports = function(grunt) { grunt.loadNpmTasks("grunt-contrib-concat"); grunt.loadNpmTasks("grunt-contrib-jshint"); + grunt.loadNpmTasks("grunt-contrib-clean"); + grunt.loadNpmTasks("grunt-contrib-copy"); grunt.loadNpmTasks("grunt-contrib-uglify"); grunt.loadNpmTasks("grunt-contrib-less"); grunt.loadNpmTasks("grunt-contrib-cssmin"); + grunt.loadNpmTasks("grunt-contrib-handlebars"); grunt.loadNpmTasks("grunt-contrib-watch"); - grunt.loadNpmTasks('grunt-contrib-connect'); + grunt.loadNpmTasks("grunt-contrib-connect"); grunt.loadNpmTasks("grunt-open"); - grunt.registerTask("build", ["less", "concat:css", "uglify", "cssmin"/*, "uglify:js"*/]); + grunt.registerTask("build", ["clean", "copy:src", "less", "concat:css", "handlebars"]); grunt.registerTask("default", ["jshint", "build", "connect:dev", "open", "watch"]); + grunt.registerTask("release", ["default", "uglify", "cssmin", "connect:dev", "open", "watch"]); + grunt.registerTask("serve", ["default"]); grunt.registerTask("travis", ["default"]); }; diff --git a/README.md b/README.md index 56ac737..f1af4ad 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,8 @@ # Run - grunt serve // development - grunt serve:dist // production + grunt serve // development + grunt release // production # Build @@ -21,6 +21,5 @@ # Build war - grunt release # Documentation diff --git a/bower.json b/bower.json index 2792c99..f6e2b43 100644 --- a/bower.json +++ b/bower.json @@ -21,7 +21,8 @@ "underscore": "~1.8.3", "moment": "~2.10.6", "requirejs-text": "~2.0.14", - "fontawesome": "~4.5.0" + "fontawesome": "~4.5.0", + "handlebars": "~4.0.5" }, "devDependencies": {} } diff --git a/package.json b/package.json index 4ba230f..e9e9496 100644 --- a/package.json +++ b/package.json @@ -15,13 +15,18 @@ "dependencies": { "grunt": "~0.4.5", "grunt-cli": "~0.1.13", + "grunt-contrib-clean": "^0.7.0", "grunt-contrib-concat": "^0.5.1", + "grunt-contrib-connect": "^0.11.2", + "grunt-contrib-copy": "^0.8.2", "grunt-contrib-cssmin": "^0.14.0", + "grunt-contrib-handlebars": "^0.11.0", "grunt-contrib-jshint": "^0.11.0", "grunt-contrib-less": "^1.1.0", "grunt-contrib-uglify": "^0.8.0", + "grunt-contrib-watch": "^0.6.1", "grunt-open": "^0.2.3", - "grunt-contrib-connect": "^0.11.2", + "lodash": "^3.10.1", "serve-static": "^1.10.0" }, "devDependencies": { diff --git a/src/app.js b/src/app.js index f1bdc32..02c1249 100644 --- a/src/app.js +++ b/src/app.js @@ -1,4 +1,11 @@ -define(["b", "c"], function(b, c) { +define(["handlebars", "../../templates/link-item", "../../templates/link-item-recent"], function(hb, linkItemTemplate, linkItemRecentTemplate) { "use strict"; - console.log(b, c); + var $ = jQuery, + $linkListContainer = $("#link_list"), + $linkListRecentContainer = $("#link_list_recent"); + console.log(hb); + $.getJSON("mock/links.json").done(function(result) { + $linkListContainer.html(linkItemTemplate(result)); + $linkListRecentContainer.html(linkItemRecentTemplate(result)); + }); }); \ No newline at end of file diff --git a/src/assets/scripts/require.config.js b/src/assets/scripts/require.config.js index 107a15a..0e1bf0f 100644 --- a/src/assets/scripts/require.config.js +++ b/src/assets/scripts/require.config.js @@ -10,6 +10,8 @@ lodash: "../../bower_components/underscore/underscore", bootstrap: "../../bower_components/bootstrap/dist/js/bootstrap", jquery: "../../bower_components/jquery/dist/jquery", + handlebars: "../../bower_components/handlebars/handlebars.runtime", + //template: "../../templates/all", text: "../../bower_components/requirejs-text/text" }, shim: { @@ -18,12 +20,15 @@ }, bootstrap: { deps: ["jquery"] + //}, + //template: { + // deps: ["handlebars"] } }, callback: function() { - require(["bootstrap", function() { - require("../../app"); - }]); + require(["bootstrap"], function() { + require(["../../app"]); + }); } }); }.call(this)); \ No newline at end of file diff --git a/src/assets/styles/common.less b/src/assets/styles/common.less index c7ef1be..8d0e5d1 100644 --- a/src/assets/styles/common.less +++ b/src/assets/styles/common.less @@ -35,7 +35,13 @@ ol, ul { } } } + } +} +.footer { + text-align: center; + &.well { + margin-bottom: 0; } } diff --git a/src/assets/styles/link-list.less b/src/assets/styles/link-list.less index 0320b62..30deed0 100644 --- a/src/assets/styles/link-list.less +++ b/src/assets/styles/link-list.less @@ -44,11 +44,15 @@ } .link-tags { float: right; + li { + display: inline; + margin-right: 10px; + } } .link-meta { font-size: 12px; li { - float: left; + display: inline; margin-right: 20px; a { color: #aea79f; diff --git a/src/index.html b/src/index.html index 56d3f59..8deacf7 100644 --- a/src/index.html +++ b/src/index.html @@ -91,170 +91,24 @@

Top Links

  • hot
    • -
      -
    1. - 1 -
      -   -
      4888
      -   -
      - - - -
      -
      - - The paint on this chocolate shop's door is worn away perfectly to reveal all of its previous colors (Traverse City, Mi) - (imgur.com) -
      -
      -

      - submitted - - by - BradlyL -

      -
      - Java - JS - Ruby -
      -
      - -
      -
      2. -
    2. - 1 -
      -   -
      4888
      -   -
      - - - -
      -

      - - The paint on this chocolate shop's door is worn away perfectly to reveal all of its previous colors (Traverse City, Mi) - (imgur.com) -

      -

      - submitted - - by - BradlyL -

      - -
      -
      3. -
    3. - 1 -
      -   -
      4888
      -   -
      - - - -
      -

      - - The paint on this chocolate shop's door is worn away perfectly to reveal all of its previous colors (Traverse City, Mi) - (imgur.com) -

      -

      - submitted - - by - BradlyL -

      - -
      -
      4. -
    + +

    Recently Viewed Links

    -
      -
    1. - - - - - -
      -

      - - The paint on this chocolate shop's door is worn away perfectly to reveal all of its previous colors (Traverse City, Mi) - (imgur.com) -

      -

      - submitted - - by - BradlyL -

      - -
      -
      2. -
    +
    + + + diff --git a/src/mock/links.json b/src/mock/links.json new file mode 100644 index 0000000..c598069 --- /dev/null +++ b/src/mock/links.json @@ -0,0 +1,96 @@ +{ + "data": [ + { + "id": 1, + "title": "The paint on this chocolate shop's door is worn away perfectly to reveal all of its previous colors", + "tags": [ + "java", + "ruby", + "php" + ], + "url": "https://www.reddit.com/", + "thumbnail": "http://b.thumbs.redditmedia.com/js6y5bNiUfL2Sf168X4QMIJSNLEgewl1cqvpSI2DYbI.jpg", + "domain": "imgur.com", + "creator": { + "id": 10, + "username": "BradlyL" + }, + "timestamp": "1448717232133", + "votes": 1032, + "comments": 2313 + }, + { + "id": 2, + "title": "php function - how to make dynamic with a query", + "tags": [ + "php" + ], + "url": "https://www.reddit.com/", + "thumbnail": "http://b.thumbs.redditmedia.com/8azewVkmSMooHf9CgcC3zjGwOxpIPw_OVUJCd0vZg_E.jpg", + "domain": "imgur.com", + "creator": { + "id": 12, + "username": "advancecreator" + }, + "timestamp": "1448712232133", + "votes": 1331, + "comments": 1213 + }, + { + "id": 3, + "title": "I'm the worst gift wrapper ever. (2015 edition)", + "tags": [ + "Python", + "Ruby", + "Java", + "HTML" + ], + "url": "https://www.reddit.com/", + "thumbnail": "http://b.thumbs.redditmedia.com/qXYaGAhKUHJDIRfJVfLp3FztxH-AKuYR0-VsjC7MuIo.jpg", + "domain": "imgur.com", + "creator": { + "id": 13, + "username": "Luke" + }, + "timestamp": "1448732232133", + "votes": 1251, + "comments": 1143 + }, + { + "id": 4, + "title": "The paint on this chocolate shop's door is worn away perfectly to reveal all of its previous colors", + "tags": [ + "java", + "ruby", + "php" + ], + "url": "https://www.reddit.com/", + "thumbnail": "http://b.thumbs.redditmedia.com/js6y5bNiUfL2Sf168X4QMIJSNLEgewl1cqvpSI2DYbI.jpg", + "domain": "imgur.com", + "creator": { + "id": 10, + "username": "BradlyL" + }, + "timestamp": "1448717232133", + "votes": 1032, + "comments": 2313 + }, + { + "id": 5, + "title": "php function - how to make dynamic with a query", + "tags": [ + "php" + ], + "url": "https://www.reddit.com/", + "thumbnail": "http://b.thumbs.redditmedia.com/8azewVkmSMooHf9CgcC3zjGwOxpIPw_OVUJCd0vZg_E.jpg", + "domain": "imgur.com", + "creator": { + "id": 12, + "username": "advancecreator" + }, + "timestamp": "1448712232133", + "votes": 1331, + "comments": 1213 + } + ] +} \ No newline at end of file diff --git a/src/templates/link-item-recent.hbs b/src/templates/link-item-recent.hbs new file mode 100644 index 0000000..f781a3e --- /dev/null +++ b/src/templates/link-item-recent.hbs @@ -0,0 +1,25 @@ +{{#data}} +
  • +
    +
    + {{title}} + ({{domain}}) +
    +
    +

    + submitted + + by + {{creator.username}} +

    +
    + +
    +
    • +{{/data}} \ No newline at end of file diff --git a/src/templates/link-item.hbs b/src/templates/link-item.hbs new file mode 100644 index 0000000..557ea7d --- /dev/null +++ b/src/templates/link-item.hbs @@ -0,0 +1,48 @@ +{{#data}} +
  • + {{id}} +
    + +
    {{votes}}
    + +
    + + + +
    +
    + {{title}} + ({{domain}}) +
    +
    +

    + submitted + + by + {{creator.username}} +

    +
      + {{#tags}} +
    • {{.}}
      • + {{/tags}} +
    +
    + +
    +
    • +{{/data}} \ No newline at end of file