[TR-3] - adding travis CI, refactoring gulp

.editorconfig

@@ -0,0 +1,17 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.scss, *.css]
+indent_size = 2

.gitattributes

@@ -0,0 +1,10 @@
+# Enforce Unix newlines
+*.css   text eol=lf
+*.scss  text eol=lf
+*.html  text eol=lf
+*.js    text eol=lf
+*.md    text eol=lf
+*.svg   text eol=lf
+*.yml   text eol=lf
+# Don't diff or textually merge source maps
+*.map   binary

.gitignore

@@ -1,3 +1,29 @@
-bower_components/
-node_modules/
-.DS_Store
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.log
+*.orig
+*.rej
+*.swo
+*.swp
+*.vi
+*.zip
+*~
+
+# OS or Editor folders
+._*
+.cache
+.DS_Store
+.idea
+.project
+.settings
+.tmproj
+*.esproj
+*.sublime-project
+*.sublime-workspace
+nbproject
+Thumbs.db
+
+# Folders to ignore
+bower_components
+node_modules

.travis.yml

@@ -0,0 +1,16 @@
+language: node_js
+sudo: false
+node_js:
+- '0.12'
+
+env:
+  global:
+
+install:
+- npm install -g gulp
+- npm install -g karma
+- npm install
+
+cache:
+  directories:
+  - "$HOME/.nvm"

gulp/bundle.js

@@ -0,0 +1,41 @@
+var gulp            = require('gulp');
+var watchify        = require('watchify');
+var browserify      = require('browserify');
+
+var uglify          = require('gulp-uglify');
+var source          = require('vinyl-source-stream');
+var buffer          = require('vinyl-buffer');
+var gutil           = require('gulp-util');
+var sourcemaps      = require('gulp-sourcemaps');
+
+var browserSync     = require('browser-sync');
+var reload          = browserSync.reload;
+
+var browserifyOptions = {
+    entries: ['./src/js/aos.js'],
+    debug: true
+};
+
+var bundle = watchify(browserify(browserifyOptions))
+                .on('update', makeBundle)
+                .on('log', gutil.log);
+
+function makeBundle() {
+    return bundle.bundle()
+        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
+        .pipe(source('aos.js'))
+        .pipe(buffer())
+        .pipe(sourcemaps.init({
+            loadMaps: true
+        }))
+        .pipe(uglify({
+            preserveComments: 'some'
+        }))
+        .pipe(sourcemaps.write('./'))
+        .pipe(gulp.dest('./dist'))
+        .pipe(reload({
+            stream: true
+        }));
+}
+
+module.exports = makeBundle;

gulp/sass.js

@@ -0,0 +1,25 @@
+var gulp            = require('gulp');
+
+var sass            = require('gulp-sass');
+var autoprefixer    = require('gulp-autoprefixer');
+var concat          = require('gulp-concat');
+var minifyCss       = require('gulp-minify-css');
+
+var browserSync     = require('browser-sync');
+var reload          = browserSync.reload;
+
+module.exports = function() {
+  gulp.src('src/sass/*.scss')
+        .pipe(concat('aos.scss'))
+        .pipe(sass({
+            errLogToConsole: true
+        }))
+        .pipe(autoprefixer({
+            browsers: ['> 1%']
+        }))
+        .pipe(minifyCss())
+        .pipe(gulp.dest('dist'))
+        .pipe(reload({
+            stream: true
+        }));
+}

gulp/test.js

@@ -0,0 +1,12 @@
+var gulp            = require('gulp');
+var karma           = require('karma').Server;
+
+var isTravis        = process.env.TRAVIS || false;
+var pathToKarmaConf = __dirname.replace('/gulp', '');
+
+module.exports =  function(done) {
+    new karma({
+        configFile: pathToKarmaConf + '/karma.conf.js',
+        singleRun: isTravis
+    }, done).start();
+};

gulpfile.js

@@ -1,86 +1,21 @@
 var gulp            = require('gulp');
-var sass            = require('gulp-sass');
-var autoprefixer    = require('gulp-autoprefixer');
-var concat          = require('gulp-concat');
-var uglify          = require('gulp-uglify');
-var minifyCss       = require('gulp-minify-css');
 var browserSync     = require('browser-sync');
-var reload          = browserSync.reload;
-var watchify        = require('watchify');
-var browserify      = require('browserify');
-var source          = require('vinyl-source-stream');
-var buffer          = require('vinyl-buffer');
-var gutil           = require('gulp-util');
-var sourcemaps      = require('gulp-sourcemaps');
-var assign          = require('lodash.assign');
-var Server          = require('karma').Server;
 
-// Browserify & watchify
-
-var browserifyOptions = assign({}, watchify.args, {
-    entries: ['./src/js/aos.js'],
-    debug: true
-});
-var bundle = watchify(browserify(browserifyOptions));
-
-bundle.on('update', makeBundle);
-bundle.on('log', gutil.log);
-
-function makeBundle() {
-    return bundle.bundle()
-        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
-        .pipe(source('aos.js'))
-        .pipe(buffer())
-        .pipe(sourcemaps.init({
-            loadMaps: true
-        }))
-        .pipe(uglify({
-            preserveComments: 'some'
-        }))
-        .pipe(sourcemaps.write('./'))
-        .pipe(gulp.dest('./dist'))
-        .pipe(reload({
-            stream: true
-        }));
-}
+var taskBundle      = require('./gulp/bundle');
+var taskSass        = require('./gulp/sass');
+var taskTest        = require('./gulp/test');
 
-gulp.task('bundle', makeBundle);
+// Browserify & watchify
+gulp.task('bundle', taskBundle);
 
 // Sass
-
-gulp.task('sass', function() {
-    gulp.src('src/sass/*.scss')
-        .pipe(concat('aos.scss'))
-        .pipe(sass({
-            errLogToConsole: true
-        }))
-        .pipe(autoprefixer({
-            browsers: ['> 1%']
-        }))
-        .pipe(minifyCss())
-        .pipe(gulp.dest('dist'))
-        .pipe(reload({
-            stream: true
-        }));
-});
+gulp.task('sass', taskSass);
 
 // Tests
+gulp.task('test', taskTest);
 
-gulp.task('test', function(done) {
-    new Server({
-        configFile: __dirname + '/karma.conf.js',
-        singleRun: true
-    }, done).start();
-});
-
-gulp.task('tdd', function(done) {
-    new Server({
-        configFile: __dirname + '/karma.conf.js'
-    }, done).start();
-});
 
 // Static server
-
 gulp.task('browser-sync', function() {
     browserSync({
         server: {
@@ -89,25 +24,15 @@ gulp.task('browser-sync', function() {
     });
 });
 
-// Reload all browsers
-
-gulp.task('bs-reload', function() {
-    browserSync.reload();
-});
-
 // Developement task
-
-gulp.task('watch', ['browser-sync', 'bundle', 'tdd'], function() {
+gulp.task('watch', ['browser-sync', 'bundle', 'test'], function() {
     gulp.watch('./src/sass/**/*.scss', ['sass']);
-    gulp.watch('*.html', ['bs-reload']);
 });
 
-// Task for `gulp` command
-
+// Default task
 gulp.task('default', ['watch']);
 
-// Build js/css and run tests once
-
+// Build js/css and run tests
 gulp.task('build', ['bundle', 'sass', 'test'], function() {
     process.exit();
-});
+});

karma.conf.js

@@ -67,6 +67,6 @@ module.exports = function(config) {
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits
-    singleRun: false
+    singleRun: true
   })
 }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "AOS",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Animate on scroll library",
-  "author": "sanographix",
+  "author": "Michał Sajnóg <[email protected]>",
   "license": "MIT",
   "devDependencies": {
     "browser-sync": "~2.0.1",
@@ -34,5 +34,8 @@
     "lodash.debounce": "^3.1.1",
     "lodash.foreach": "^3.0.3",
     "lodash.throttle": "^3.0.4"
+  },
+  "scripts": {
+    "test": "gulp test"
   }
 }

src/js/aos.js

@@ -155,4 +155,4 @@ var elements            = require('./helpers/elements');
 
     window.AOS = AOS;
 
-})(window, document);
+})(window, document);

test/fixtures/aos.fixture.html

@@ -18,7 +18,7 @@
 	<div class="aos-item" aos="fade-left"></div>
 	<div class="aos-item" aos="fade-right"></div>
 	<div class="aos-item" aos="zoom-in"></div>
-	<div class="aos-item" aos=f"lip-up"></div>
+	<div class="aos-item" aos="flip-up"></div>
 	<div class="aos-item" aos="flip-up"></div>
 	<div class="aos-item" aos="flip-up"></div>
 	<div class="aos-item" aos="flip-up"></div>
@@ -27,4 +27,4 @@
 	<div class="aos-item" aos="flip-up"></div>
 	<div class="aos-item" aos="flip-up"></div>
 </body>
-</html>
+</html>