From 172aebf505e6cbd233c55c40887743c198c569a5 Mon Sep 17 00:00:00 2001 From: Todd Motto Date: Sun, 8 Jun 2014 19:47:34 +0100 Subject: [PATCH] Move to Gulp.js --- .travis.yml | 6 ++-- README.md | 2 +- dist/echo.js | 20 ++++++------- dist/echo.min.js | 4 +-- gulpfile.js | 68 ++++++++++++++++++++++++++++++++++++++++++ package.json | 43 ++++++++++---------------- src/echo.js | 16 +++++----- test/karma.conf.js | 14 +++++++++ test/spec/spec-echo.js | 9 ++++++ 9 files changed, 132 insertions(+), 50 deletions(-) mode change 100644 => 100755 .travis.yml create mode 100755 gulpfile.js mode change 100644 => 100755 package.json create mode 100755 test/karma.conf.js create mode 100755 test/spec/spec-echo.js diff --git a/.travis.yml b/.travis.yml old mode 100644 new mode 100755 index b8fe41e..b8a09e1 --- a/.travis.yml +++ b/.travis.yml @@ -1,5 +1,7 @@ language: node_js node_js: - - "0.11" - "0.10" - - "0.8" \ No newline at end of file + - "0.11" +before_script: + - npm install -g gulp +script: gulp diff --git a/README.md b/README.md index 514b1f9..03e5a20 100644 --- a/README.md +++ b/README.md @@ -116,7 +116,7 @@ Add the image that needs to load when it's visible inside the viewport in a `dat ``` ## Contributing -In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt. +In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Gulp. ## License MIT license diff --git a/dist/echo.js b/dist/echo.js index bb72319..02306a6 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -1,4 +1,4 @@ -/*! echo.js v1.6.0 | (c) 2014 @toddmotto | MIT license | github.com/toddmotto/echo */ +/*! echo.js v1.6.0 | (c) 2014 @toddmotto | https://github.com/echo */ (function (root, factory) { if (typeof define === 'function' && define.amd) { define(factory); @@ -11,7 +11,7 @@ 'use strict'; - var exports = {}; + var echo = {}; var callback = function () {}; @@ -24,11 +24,11 @@ var debounce = function () { clearTimeout(poll); - poll = setTimeout(exports.render, throttle); + poll = setTimeout(echo.render, throttle); }; - exports.init = function (opts) { - opts = opts || {}; + echo.init = function (opts) { + opts = opts || {}; var offsetAll = opts.offset || 0; var offsetVertical = opts.offsetVertical || offsetAll; var offsetHorizontal = opts.offsetHorizontal || offsetAll; @@ -44,7 +44,7 @@ throttle = optionToInt(opts.throttle, 250); unload = !!opts.unload; callback = opts.callback || callback; - exports.render(); + echo.render(); if (document.addEventListener) { root.addEventListener('scroll', debounce, false); root.addEventListener('load', debounce, false); @@ -54,7 +54,7 @@ } }; - exports.render = function () { + echo.render = function () { var nodes = document.querySelectorAll('img[data-echo]'); var length = nodes.length; var src, elem; @@ -82,11 +82,11 @@ } } if (!length) { - exports.detach(); + echo.detach(); } }; - exports.detach = function () { + echo.detach = function () { if (document.removeEventListener) { root.removeEventListener('scroll', debounce); } else { @@ -95,6 +95,6 @@ clearTimeout(poll); }; - return exports; + return echo; }); diff --git a/dist/echo.min.js b/dist/echo.min.js index caae9d0..4dd5f0d 100644 --- a/dist/echo.min.js +++ b/dist/echo.min.js @@ -1,2 +1,2 @@ -/*! echo.js v1.6.0 | (c) 2014 @toddmotto | MIT license | github.com/toddmotto/echo */ -!function(a,b){"function"==typeof define&&define.amd?define(b):"object"==typeof exports?module.exports=b:a.echo=b(a)}(this,function(a){"use strict";var b,c,d,e,f={},g=function(){},h=function(a,b){var c=a.getBoundingClientRect();return c.right>=b.l&&c.bottom>=b.t&&c.left<=b.r&&c.top<=b.b},i=function(){clearTimeout(c),c=setTimeout(f.render,d)};return f.init=function(c){c=c||{};var h=c.offset||0,j=c.offsetVertical||h,k=c.offsetHorizontal||h,l=function(a,b){return parseInt(a||b,10)};b={t:l(c.offsetTop,j),b:l(c.offsetBottom,j),l:l(c.offsetLeft,k),r:l(c.offsetRight,k)},d=l(c.throttle,250),e=!!c.unload,g=c.callback||g,f.render(),document.addEventListener?(a.addEventListener("scroll",i,!1),a.addEventListener("load",i,!1)):(a.attachEvent("onscroll",i),a.attachEvent("onload",i))},f.render=function(){for(var c,d,i=document.querySelectorAll("img[data-echo]"),j=i.length,k={l:0-b.l,t:0-b.t,b:(a.innerHeight||document.documentElement.clientHeight)+b.b,r:(a.innerWidth||document.documentElement.clientWidth)+b.r},l=0;j>l;l++)d=i[l],h(d,k)?(e&&d.setAttribute("data-echo-placeholder",d.src),d.src=d.getAttribute("data-echo"),e||d.removeAttribute("data-echo"),g(d,"load")):e&&(c=d.getAttribute("data-echo-placeholder"))&&(d.src=c,d.removeAttribute("data-echo-placeholder"),g(d,"unload"));j||f.detach()},f.detach=function(){document.removeEventListener?a.removeEventListener("scroll",i):a.detachEvent("onscroll",i),clearTimeout(c)},f}); \ No newline at end of file +/*! echo.js v1.6.0 | (c) 2014 @toddmotto | https://github.com/echo */ +!function(t,e){"function"==typeof define&&define.amd?define(e):"object"==typeof exports?module.exports=e:t.echo=e(t)}(this,function(t){"use strict";var e,o,n,r,c={},i=function(){},a=function(t,e){var o=t.getBoundingClientRect();return o.right>=e.l&&o.bottom>=e.t&&o.left<=e.r&&o.top<=e.b},d=function(){clearTimeout(o),o=setTimeout(c.render,n)};return c.init=function(o){o=o||{};var a=o.offset||0,l=o.offsetVertical||a,u=o.offsetHorizontal||a,f=function(t,e){return parseInt(t||e,10)};e={t:f(o.offsetTop,l),b:f(o.offsetBottom,l),l:f(o.offsetLeft,u),r:f(o.offsetRight,u)},n=f(o.throttle,250),r=!!o.unload,i=o.callback||i,c.render(),document.addEventListener?(t.addEventListener("scroll",d,!1),t.addEventListener("load",d,!1)):(t.attachEvent("onscroll",d),t.attachEvent("onload",d))},c.render=function(){for(var o,n,d=document.querySelectorAll("img[data-echo]"),l=d.length,u={l:0-e.l,t:0-e.t,b:(t.innerHeight||document.documentElement.clientHeight)+e.b,r:(t.innerWidth||document.documentElement.clientWidth)+e.r},f=0;l>f;f++)n=d[f],a(n,u)?(r&&n.setAttribute("data-echo-placeholder",n.src),n.src=n.getAttribute("data-echo"),r||n.removeAttribute("data-echo"),i(n,"load")):r&&(o=n.getAttribute("data-echo-placeholder"))&&(n.src=o,n.removeAttribute("data-echo-placeholder"),i(n,"unload"));l||c.detach()},c.detach=function(){document.removeEventListener?t.removeEventListener("scroll",d):t.detachEvent("onscroll",d),clearTimeout(o)},c}); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100755 index 0000000..b46559d --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,68 @@ +var gulp = require('gulp'), + karma = require('gulp-karma'), + jshint = require('gulp-jshint'), + stylish = require('jshint-stylish'), + header = require('gulp-header'), + uglify = require('gulp-uglify'), + plumber = require('gulp-plumber'), + clean = require('gulp-clean'), + rename = require('gulp-rename'), + package = require('./package.json'); + +var paths = { + output : 'dist/', + scripts : [ + 'src/echo.js' + ], + test: [ + 'test/spec/**/*.js' + ] +}; + +var banner = [ + '/*! ', + '<%= package.name %> ', + 'v<%= package.version %> | ', + '(c) ' + new Date().getFullYear() + ' <%= package.author %> |', + ' <%= package.homepage %>', + ' */', + '\n' +].join(''); + +gulp.task('scripts', ['clean'], function() { + return gulp.src(paths.scripts) + .pipe(plumber()) + .pipe(header(banner, { package : package })) + .pipe(gulp.dest('dist/')) + .pipe(rename({ suffix: '.min' })) + .pipe(uglify()) + .pipe(header(banner, { package : package })) + .pipe(gulp.dest('dist/')); +}); + +gulp.task('lint', function () { + return gulp.src(paths.scripts) + .pipe(plumber()) + .pipe(jshint()) + .pipe(jshint.reporter('jshint-stylish')); +}); + +gulp.task('clean', function () { + return gulp.src(paths.output, { read: false }) + .pipe(plumber()) + .pipe(clean()); +}); + +gulp.task('test', function() { + return gulp.src(paths.scripts.concat(paths.test)) + .pipe(plumber()) + .pipe(karma({ configFile: 'test/karma.conf.js' })) + .on('error', function(err) { throw err; }); +}); + +gulp.task('default', [ + 'lint', + 'clean', + 'scripts', + 'test' +]); diff --git a/package.json b/package.json old mode 100644 new mode 100755 index 59a6704..66ed2f6 --- a/package.json +++ b/package.json @@ -1,34 +1,23 @@ { "name": "echo.js", "version": "1.6.0", - "homepage": "https://github.com/toddmotto/echo", - "author": "Todd Motto", "description": "Lazy-loading with data-* attributes, offset and throttle options", - "author": { - "name": "Todd Motto", - "email": "todd@toddmotto.com", - "url": "http://toddmotto.com", - "github" : "https://github.com/toddmotto" - }, - "licenses": [{ - "type": "MIT" - }], - "repository": { - "type": "git", - "url": "http://github.com/toddmotto/echo.git" - }, + "author": "@toddmotto", + "license": "MIT", + "homepage": "https://github.com/echo", "devDependencies": { - "grunt": "~0.4.1", - "grunt-contrib-jshint": "~0.7.1", - "grunt-contrib-concat": "~0.3.0", - "grunt-contrib-uglify": "~0.2.7", - "grunt-contrib-connect": "~0.3.0", - "grunt-contrib-watch": "~0.4.4", - "connect-livereload": "~0.2.0", - "grunt-open": "~0.2.0", - "matchdep": "~0.1.2" - }, - "peerDependencies": { - "grunt-cli": "*" + "gulp": "~3.7.0", + "gulp-uglify": "~0.3.0", + "gulp-rename": "~1.1.0", + "gulp-clean": "^0.2.4", + "gulp-plumber": "~0.6.2", + "gulp-header": "^1.0.2", + "gulp-jshint": "^1.6.1", + "jshint-stylish": "^0.2.0", + "gulp-karma": "0.0.4", + "karma": "^0.12.16", + "karma-jasmine": "~0.2.0", + "karma-phantomjs-launcher": "^0.1.4", + "karma-spec-reporter": "0.0.13" } } diff --git a/src/echo.js b/src/echo.js index 309db2a..e030a21 100644 --- a/src/echo.js +++ b/src/echo.js @@ -10,7 +10,7 @@ 'use strict'; - var exports = {}; + var echo = {}; var callback = function () {}; @@ -23,10 +23,10 @@ var debounce = function () { clearTimeout(poll); - poll = setTimeout(exports.render, throttle); + poll = setTimeout(echo.render, throttle); }; - exports.init = function (opts) { + echo.init = function (opts) { opts = opts || {}; var offsetAll = opts.offset || 0; var offsetVertical = opts.offsetVertical || offsetAll; @@ -43,7 +43,7 @@ throttle = optionToInt(opts.throttle, 250); unload = !!opts.unload; callback = opts.callback || callback; - exports.render(); + echo.render(); if (document.addEventListener) { root.addEventListener('scroll', debounce, false); root.addEventListener('load', debounce, false); @@ -53,7 +53,7 @@ } }; - exports.render = function () { + echo.render = function () { var nodes = document.querySelectorAll('img[data-echo]'); var length = nodes.length; var src, elem; @@ -81,11 +81,11 @@ } } if (!length) { - exports.detach(); + echo.detach(); } }; - exports.detach = function () { + echo.detach = function () { if (document.removeEventListener) { root.removeEventListener('scroll', debounce); } else { @@ -94,6 +94,6 @@ clearTimeout(poll); }; - return exports; + return echo; }); diff --git a/test/karma.conf.js b/test/karma.conf.js new file mode 100755 index 0000000..a602348 --- /dev/null +++ b/test/karma.conf.js @@ -0,0 +1,14 @@ +module.exports = function (config) { + config.set({ + basePath : '', + autoWatch : true, + frameworks: ['jasmine'], + browsers : ['PhantomJS'], + plugins : [ + 'karma-spec-reporter', + 'karma-phantomjs-launcher', + 'karma-jasmine' + ], + reporters : ['spec'] + }); +}; diff --git a/test/spec/spec-echo.js b/test/spec/spec-echo.js new file mode 100755 index 0000000..143080f --- /dev/null +++ b/test/spec/spec-echo.js @@ -0,0 +1,9 @@ +describe('echo.js', function () { + + describe('init', function () { + it('should be defined', function () { + expect(!!echo).toBe(true); + }); + }); + +});