Initial Commit

Author: ManeeshChiba

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json

.sass-lint.yml

@@ -0,0 +1,86 @@
+options:
+  formatter: stylish
+files:
+  include: '**/*.s+(a|c)ss'
+rules:
+  # Extends
+  extends-before-mixins: 1
+  extends-before-declarations: 1
+  placeholder-in-extend: 1
+
+  # Mixins
+  mixins-before-declarations: 0
+
+  # Line Spacing
+  one-declaration-per-line: 1
+  empty-line-between-blocks: 0
+  single-line-per-selector: 1
+
+  # Disallows
+  no-color-keywords: 1
+  no-color-literals: 0
+  no-css-comments: 1
+  no-debug: 1
+  no-duplicate-properties: 1
+  no-empty-rulesets: 1
+  no-extends: 0
+  no-ids: 0
+  no-important: 1
+  no-invalid-hex: 1
+  no-mergeable-selectors: 1
+  no-misspelled-properties: 0
+  no-qualifying-elements: 0
+  no-trailing-whitespace: 1
+  no-trailing-zero: 1
+  no-transition-all: 0
+  no-url-protocols: 1
+  no-vendor-prefixes: 1
+  no-warn: 1
+  property-units: 0
+
+  # Nesting
+  force-attribute-nesting: 0
+  force-element-nesting: 0
+  force-pseudo-nesting: 0
+
+  # Name Formats
+  class-name-format: 1
+  function-name-format: 1
+  id-name-format: 0
+  mixin-name-format: 1
+  placeholder-name-format: 1
+  variable-name-format: 1
+
+  # Style Guide
+  bem-depth: 0
+  border-zero: 1
+  brace-style: 1
+  clean-import-paths: 1
+  empty-args: 1
+  hex-length: 1
+  hex-notation: 1
+  indentation: 0
+  leading-zero: 1
+  nesting-depth:
+    -  1
+    - max-depth: 4
+  property-sort-order: 0
+  quotes: 1
+  shorthand-values: 1
+  url-quotes: 1
+  variable-for-property: 1
+  zero-unit: 1
+
+  # Inner Spacing
+  space-after-comma: 1
+  space-before-colon: 1
+  space-after-colon: 1
+  space-before-brace: 1
+  space-before-bang: 1
+  space-after-bang: 1
+  space-between-parens: 1
+  space-around-operator: 1
+
+  # Final Items
+  trailing-semicolon: 1
+  final-newline: 0

README.md

@@ -0,0 +1,3 @@
+#Super Simple Parallax
+
+This aims to a super simple parallax plugin driven by CSS custom properties and transforms.

gulp/tasks/clean.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var gulp = require('gulp');
+var del  = require('del');
+
+gulp.task('clean', function() {
+  return del(global.destination);
+});

gulp/tasks/copy.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var gulp = require('gulp');
+
+gulp.task('copy', function () {
+  var staticAssets = gulp.src([
+    'src/**/*',
+    // Exclude the following:
+    '!src/*.html', // html files are handled by html task
+    '!src/{js,js/**}', // scripts are handled by scripts task
+    '!src/{img,img/**}', // handled by image task
+    '!src/{scss,scss/**}', // handled by styles task
+  ])
+  .pipe(gulp.dest(global.destination));
+  return staticAssets;
+});

gulp/tasks/development.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var gulp        = require('gulp');
+var runSequence = require('run-sequence');
+
+gulp.task('dev', function(cb) {
+  global.mode = 'dev';
+  global.destination = 'dev';
+  runSequence('clean', ['styles', 'scsslint', 'scripts', 'jshints', 'copy'], 'watch', cb);
+});

gulp/tasks/jshints.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var gulp = require('gulp'),
+	jshint = require('gulp-jshint'),
+	stylish = require('jshint-stylish'),
+	handleErrors = require('../util/handleErrors');
+
+gulp.task('jshints',function(){
+	return gulp.src(['src/js/**/*.js', '!src/js/vendor/**/*.js'])
+	.pipe(jshint())
+	.pipe(jshint.reporter(stylish))
+});

gulp/tasks/production.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var gulp        = require('gulp');
+var runSequence = require('run-sequence');
+
+gulp.task('prod', function(cb) {
+
+  global.mode = 'prod';
+  global.destination = 'dist';
+  runSequence('clean', 'styles', ['scripts', 'copy'], cb);
+});

gulp/tasks/scripts.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var gulp = require('gulp'),
+	uglify = require('gulp-uglify'),
+	gulpif   = require('gulp-if'),
+	replace = require('gulp-replace'),
+	jshint = require('gulp-jshint'),
+	stylish = require('jshint-stylish'),
+	handleErrors = require('../util/handleErrors');
+
+gulp.task('scripts', function() {
+	return gulp.src(['src/js/**/*.js'])
+	.pipe(gulpif(global.mode !== 'dev',uglify()))
+	.on('error', handleErrors)
+	.pipe(gulp.dest(global.destination + '/js'));
+});

gulp/tasks/scsslint.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var gulp         = require('gulp'),
+    sass         = require('gulp-sass'),
+    sassLint     = require('gulp-sass-lint'),
+    handleErrors = require('../util/handleErrors');
+
+gulp.task('scsslint', function () {
+
+  return gulp.src(['src/scss/**/*.scss','!src/scss/vendor/**/*.scss','!src/scss/_mixins.scss'])
+    .pipe(sassLint({
+      options:{
+      	formatter: 'stylish'
+      },
+      configFile: '.sass-lint.yml'
+    }))
+    .pipe(sassLint.format())
+    .on('error', handleErrors);
+});

gulp/tasks/styles.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var gulp         = require('gulp'),
+    sass         = require('gulp-sass'),
+    sassLint     = require('gulp-sass-lint'),
+    autoprefixer = require('gulp-autoprefixer'),
+    gulpif       = require('gulp-if'),
+    handleErrors = require('../util/handleErrors');
+
+gulp.task('styles', function () {
+
+  return gulp.src(['src/scss/**/*.scss','!src/scss/vendor/**.*.scss'])
+    .pipe( sass({
+        sourceComments: (global.mode === 'dev') ? true : false,
+        outputStyle: (global.mode === 'dev') ? 'nested': 'compressed',
+        errLogToConsole: true
+    }))
+    .on('error', handleErrors)
+    .pipe(autoprefixer({
+        browsers: ['last 2 versions', '> 1%', 'ie 9', 'ie 10']
+    }))
+    .pipe( gulp.dest(global.destination + '/css'));
+});

gulp/tasks/watch.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var gulp = require('gulp');
+
+gulp.task('watch', function() {
+  gulp.watch('src/*.html',  ['html']);
+  gulp.watch('src/scss/**/*.scss',  ['styles','scsslint']); 
+  gulp.watch('src/img/**/*',  ['images']);
+  gulp.watch('src/js/**/*.js',  ['scripts','jshints']);
+});

gulp/util/fileType.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var path = require('path');
+
+/**
+ * Filters out files that don't match the extension. Prevents
+ * accidental inclusion of possible hidden files.
+ * 
+ * Usage:
+ * var fileType = require('fileType');
+ * fs.readdirSync('some/dir/js/').filter(fileType('js'));
+ *
+ * Or
+ * var onlyScripts = require('fileType')('js');
+ * fs.readdirSync('some/dir/js/').filter(onlyScripts);
+ */
+module.exports = function(extension) {
+	var pattern = new RegExp("(\.(" + extension + ")$)", "i");
+	return function(name) {
+  		return pattern.test(path.extname(name));
+  	}
+};

gulp/util/handleErrors.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var notify = require('gulp-notify');
+
+module.exports = function(error) {
+
+  if( global.mode === 'dev' ) {
+
+    var args = Array.prototype.slice.call(arguments);
+
+    // Send error to notification center with gulp-notify
+    notify.onError({
+      title: 'Build Error',
+      message: error.message
+    }).apply(this, args);
+
+    // Keep gulp from hanging on this task
+    this.emit('end');
+
+  } else {
+    // Log the error and stop the process
+    // to prevent broken code from building
+    console.log(error);
+    process.exit(1);
+  }
+
+};

gulpfile.js

@@ -0,0 +1,27 @@
+'use strict';
+
+/*
+ * gulpfile.js
+ * ===========
+ * Rather than manage one giant configuration file responsible
+ * for creating multiple tasks, each task has been broken out into
+ * its own file in gulp/tasks. Any file in that folder gets automatically
+ * required by the loop in ./gulp/index.js (required below).
+ *
+ * To add a new task, simply add a new task file to gulp/tasks.
+ *
+ * Modified upon https://github.com/brad426/web-app-boilerplate which was
+ * heavily inspired by the gulp build for 
+ * https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate
+ * 
+ */
+var fs          = require('fs'),
+	onlyScripts	= require('./gulp/util/fileType')('js'),
+	tasks       = fs.readdirSync('./gulp/tasks/').filter(onlyScripts);
+
+global.isProd = false;
+global.stipWildcard = /\/\*\*.*$/ig;
+
+tasks.forEach(function(task) {
+  require('./gulp/tasks/' + task);
+});

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "css-parallax",
+  "version": "0.0.1",
+  "description": "A super simple parallax plugin",
+  "main": "readme.md",
+  "scripts": {
+    "start": "npm install && gulp dev",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npm prod"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ManeeshChiba/css-parallax.git"
+  },
+  "keywords": [
+    "parallax",
+    "css",
+    "custom",
+    "properties",
+    "css",
+    "transforms"
+  ],
+  "author": "Maneesh Chiba",
+  "devDependencies": {
+    "del": "^2.2.0",
+    "gulp": "^3.9.0",
+    "gulp-autoprefixer": "^3.1.0",
+    "gulp-concat": "^2.6.0",
+    "gulp-if": "^2.0.0",
+    "gulp-jshint": "^2.0.4",
+    "gulp-notify": "^2.2.0",
+    "gulp-replace": "^0.5.4",
+    "gulp-sass": "^3.1.0",
+    "gulp-sass-lint": "^1.3.2",
+    "gulp-sourcemaps": "^1.6.0",
+    "gulp-uglify": "^1.5.1",
+    "gulp-util": "^3.0.7",
+    "jshint": "^2.9.2",
+    "jshint-stylish": "^2.2.0",
+    "lodash.assign": "^4.0.6",
+    "merge-stream": "^1.0.0",
+    "path": "^0.12.7",
+    "run-sequence": "^2.2.0"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ManeeshChiba/css-parallax/issues"
+  },
+  "homepage": "https://github.com/ManeeshChiba/css-parallax"
+}