Initial commit

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

.eslintrc.js

@@ -0,0 +1,197 @@
+module.exports = {
+  "env": {
+    "es6": true,
+    "node": true
+  },
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "ecmaVersion": 6
+  },
+  "plugins": ["node"],
+  "root": true,
+  "rules": {
+    "accessor-pairs": 2,
+    "array-bracket-spacing": [1, "never"],
+    "array-callback-return": 2,
+    "arrow-body-style": 0,
+    "arrow-parens": [1, "as-needed"],
+    "arrow-spacing": [1, { "after": true, "before": true }],
+    "block-scoped-var": 2,
+    "block-spacing": 1,
+    "brace-style": [1, "1tbs", { "allowSingleLine": true }],
+    "camelcase": [1, { "properties": "never" }],
+    "callback-return": 2,
+    "comma-spacing": [1, { "after": true, "before": false }],
+    "comma-style": [1, "last"],
+    "curly": 0,
+    "complexity": 0,
+    "computed-property-spacing": [1, "never"],
+    "consistent-return": 2,
+    "consistent-this": [2, "that"],
+    "default-case": 2,
+    "dot-location": [1, "property"],
+    "dot-notation": [1, { "allowKeywords": true }],
+    "eol-last": 1,
+    "eqeqeq": 2,
+    "func-names": 0,
+    "func-style": [1, "declaration"],
+    "generator-star-spacing": [1, "before"],
+    "global-require": 2,
+    "guard-for-in": 2,
+    "handle-callback-err": [2, "^(err|error)$"],
+    "id-blacklist": 0,
+    "id-length": 0,
+    "id-match": 0,
+    "indent": [1, 2, {
+      "VariableDeclarator": { "var": 2, "let": 2, "const": 3 },
+      "SwitchCase": 1
+    }],
+    "init-declarations": 0,
+    "jsx-quotes": [1, "prefer-double"],
+    "key-spacing": [1, {
+      "afterColon": true,
+      "beforeColon": false
+    }],
+    "keyword-spacing": [1, {
+        "after": true,
+        "before": true
+      }
+    ],
+    "linebreak-style": 0,
+    "lines-around-comment": 0,
+    "max-depth": [2, 10],
+    "max-len": 0,
+    "max-nested-callbacks": [2, 3],
+    "max-params": 0,
+    "new-cap": 2,
+    "new-parens": 2,
+    "newline-after-var": 1,
+    "newline-per-chained-call": 0,
+    "no-alert": 2,
+    "no-array-constructor": 2,
+    "no-bitwise": 0,
+    "no-caller": 2,
+    "no-confusing-arrow": 0,
+    "no-catch-shadow": 2,
+    "no-continue": 0,
+    "no-console": 0,
+    "no-div-regex": 2,
+    "no-else-return": 2,
+    "no-empty-function": 1,
+    "no-eq-null": 2,
+    "no-eval": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-label": 2,
+    "no-extra-parens": [2, "functions"],
+    "no-floating-decimal": 2,
+    "no-implicit-globals": 0,
+    "no-implied-eval": 2,
+    "no-inline-comments": 0,
+    "no-invalid-this": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": 2,
+    "no-lone-blocks": 2,
+    "no-lonely-if": 2,
+    "no-loop-func": 2,
+    "no-magic-numbers": 0,
+    "no-mixed-requires": [1, { "allowCall": true, "grouping": true }],
+    "no-multi-spaces": 1,
+    "no-multi-str": 2,
+    "no-multiple-empty-lines": 2,
+    "no-native-reassign": 2,
+    "no-negated-condition": 0,
+    "no-nested-ternary": 0,
+    "no-new": 2,
+    "no-new-func": 2,
+    "no-new-object": 2,
+    "no-new-require": 2,
+    "no-new-wrappers": 2,
+    "no-octal-escape": 2,
+    "no-param-reassign": 0,
+    "no-process-exit": 2,
+    "no-proto": 2,
+    "no-restricted-imports": 0,
+    "no-restricted-modules": 0,
+    "no-restricted-syntax": [2, "WithStatement"],
+    "no-return-assign": 2,
+    "no-script-url": 2,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow": 2,
+    "no-shadow-restricted-names": 2,
+    "no-spaced-func": 1,
+    "no-sync": 0,
+    "no-ternary": 0,
+    "no-throw-literal": 2,
+    "no-trailing-spaces": 1,
+    "no-undef-init": 2,
+    "no-undefined": 2,
+    "no-underscore-dangle": 0,
+    "no-unmodified-loop-condition": 2,
+    "no-unneeded-ternary": 1,
+    "no-unused-expressions": 1,
+    "no-unused-vars": [1, { "args": "after-used", "vars": "all" }],
+    "no-use-before-define": 0,
+    "no-useless-call": 1,
+    "no-useless-concat": 1,
+    "no-useless-constructor": 1,
+    "no-var": 2,
+    "no-void": 2,
+    "no-warning-comments": 0,
+    "no-whitespace-before-property": 1,
+    "no-with": 2,
+    "object-curly-spacing": [1, "always"],
+    "object-shorthand": 1,
+    "one-var": 0,
+    "one-var-declaration-per-line": [1, "initializations"],
+    "operator-assignment": [2, "always"],
+    "operator-linebreak": [2, "after"],
+    "padded-blocks": 0,
+    "prefer-arrow-callback": 1,
+    "prefer-const": 1,
+    "prefer-reflect": 0,
+    "prefer-rest-params": 0,
+    "prefer-spread": 1,
+    "prefer-template": 1,
+    "quote-props": [1, "as-needed", {
+      "keywords": true,
+      "numbers": true
+    }],
+    "quotes": [1, "double", "avoid-escape"],
+    "radix": [2, "always"],
+    "require-jsdoc": [1, {
+      "require": {
+        "FunctionDeclaration": false,
+        "MethodDefinition": true,
+        "ClassDeclaration": true
+      }
+    }],
+    "require-yield": 2,
+    "semi": 2,
+    "semi-spacing": [1, { "after": true, "before": false }],
+    "sort-imports": 1,
+    "sort-vars": 1,
+    "space-before-blocks": 1,
+    "space-before-function-paren": [1, "never"],
+    "space-in-parens": [1, "never"],
+    "space-infix-ops": 1,
+    "space-unary-ops": [1, { "nonwords": false, "words": true }],
+    "spaced-comment": [1, "always"],
+    "strict": [2, "safe"],
+    "template-curly-spacing": [1, "never"],
+    "valid-jsdoc": 0,
+    "vars-on-top": 0,
+    "wrap-iife": [1, "outside"],
+    "wrap-regex": 0,
+    "yield-star-spacing": [1, "before"],
+    "yoda": [1, "never", { "exceptRange": true }],
+    "node/no-missing-import": 2,
+    "node/no-missing-require": 2,
+    "node/no-unpublished-import": 2,
+    "node/no-unpublished-require": 2,
+    "node/no-unsupported-features": [2, { "version": 5 }],
+    "node/shebang": 2
+  }
+};

.gitignore

@@ -0,0 +1,5 @@
+Thumbs.db
+.DS_Store
+node_modules
+npm-debug.log
+/build

README.md

@@ -0,0 +1,70 @@
+# react-sass-boilerplate
+
+Quick start for React and Sass
+
+Required: Node.js v4
+
+## Files
+
+- .babelrc : Babel configuration
+- .eslintrc.js : ESLint configuration for gulpfile.js
+- .gitignore
+- gulpfile.js : Build tasks
+- package.json : Customize this for your project
+- README.md : Customize this for your project
+- build : Build directory
+- src : Source directory
+  - index.html : Single HTML file
+  - images : Images are here
+  - scripts : Front-end js and jsx are here
+    - .eslintrc.js : ESLint configuration for front-end scripts
+    - main.js : JavaScript entry point
+
+## Usage
+
+At the beginning you have to install modules:
+
+```
+npm i
+```
+
+To start live reload:
+
+```
+npm start
+```
+
+Just to build:
+
+```
+npm run build
+```
+
+## Modules
+
+- browser-sync
+- browserify
+  - babelify
+    - babel-polyfill
+    - babel-preset-es2015
+    - babel-preset-react
+  - licensify
+  - watchify
+- eslint
+  - eslint-plugin-node
+  - eslint-plugin-react
+- del
+- gulp
+  - gulp-changed
+  - gulp-load-plugins
+  - gulp-notify
+  - gulp-plumber
+  - gulp-sass
+    - gulp-autoprefixer
+    - gulp-cssnano
+    - gulp-uglify
+  - gulp-sourcemaps
+  - vinyl-buffer
+  - vinyl-source-stream
+- react
+  - react-dom

gulpfile.js

@@ -0,0 +1,99 @@
+/* eslint-disable node/no-unpublished-require */
+"use strict";
+
+const gulp = require("gulp");
+const $ = require("gulp-load-plugins")();
+const del = require("del");
+const browserify = require("browserify");
+const babelify = require("babelify");
+const watchify = require("watchify");
+const licensify = require("licensify");
+const browserSync = require("browser-sync").create();
+const source = require("vinyl-source-stream");
+const buffer = require("vinyl-buffer");
+
+gulp.task("clean", () => {
+  return del(["build"]);
+});
+
+gulp.task("html", () => {
+  return gulp.src("src/index.html")
+    .pipe(gulp.dest("build"));
+});
+
+gulp.task("sass", () => {
+  return gulp
+    .src("src/sass/main.scss")
+    .pipe($.plumber({ errorHandler: $.notify.onError("Error: <%= error.message %>") }))
+    .pipe($.sourcemaps.init())
+    .pipe($.sass())
+    .pipe($.autoprefixer({
+      browsers: ["> 5% in JP", "ios_saf 8.4"],
+      cascade: false
+    }))
+    .pipe($.cssnano())
+    .pipe($.sourcemaps.write("."))
+    .pipe(gulp.dest("build"))
+    .pipe(browserSync.stream());
+});
+
+function buildJS(watch) {
+  const b = browserify({
+    entries: [
+      require.resolve("babel-polyfill"),
+      "src/scripts/main.js"
+    ],
+    cache: {},
+    packageCache: {},
+    transform: [babelify],
+    plugin: [licensify].concat(watch ? [watchify] : []),
+    debug: true
+  });
+
+  b.on("update", bundle);
+  bundle();
+
+  function bundle() {
+    b.bundle()
+      .pipe($.plumber({ errorHandler: $.notify.onError("Error: <%= error.message %>") }))
+      .pipe(source("main.js"))
+      .pipe(buffer())
+      .pipe($.sourcemaps.init({
+        loadMaps: true
+      }))
+      .pipe($.uglify({
+        preserveComments: "license"
+      }))
+      .pipe($.sourcemaps.write("."))
+      .pipe(gulp.dest("build"))
+      .pipe(browserSync.reload({ stream: true }));
+  }
+}
+
+gulp.task("js", () => buildJS(false));
+
+gulp.task("js:watch", () => buildJS(true));
+
+gulp.task("images", () => {
+  return gulp.src("src/images/**/*", { base: "src/images" })
+		.pipe($.changed("build/images"))
+    .pipe(gulp.dest("build/images"))
+    .pipe(browserSync.stream());
+});
+
+gulp.task("build", ["html", "sass", "js", "images"]);
+
+gulp.task("release", ["clean", "build"]);
+
+gulp.task("serve", ["html", "sass", "js:watch", "images"], () => {
+  browserSync.init({
+    server: {
+      baseDir: "build"
+    }
+  });
+  gulp.watch("src/index.html", ["html"]).on("change", browserSync.reload);
+  gulp.watch("src/sass/**/*", ["sass"]);
+  gulp.watch("src/images/**/*", ["images"]);
+});
+
+gulp.task("default", ["serve"]);