From d9ddc114fbe22b5692c6b915cff7fb59d42e993d Mon Sep 17 00:00:00 2001 From: rot1024 Date: Fri, 26 Feb 2016 03:08:11 +0900 Subject: [PATCH] Initial commit --- .babelrc | 3 + .eslintrc.js | 197 +++++++++++++++++++++++++++++++++++++++ .gitignore | 5 + README.md | 70 ++++++++++++++ gulpfile.js | 99 ++++++++++++++++++++ package.json | 44 +++++++++ src/images/.gitkeep | 0 src/index.html | 13 +++ src/sass/main.scss | 0 src/scripts/.eslintrc.js | 46 +++++++++ src/scripts/main.js | 0 11 files changed, 477 insertions(+) create mode 100644 .babelrc create mode 100644 .eslintrc.js create mode 100644 .gitignore create mode 100644 README.md create mode 100644 gulpfile.js create mode 100644 package.json create mode 100644 src/images/.gitkeep create mode 100644 src/index.html create mode 100644 src/sass/main.scss create mode 100644 src/scripts/.eslintrc.js create mode 100644 src/scripts/main.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..86c445f --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015", "react"] +} diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..32feb64 --- /dev/null +++ b/.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 + } +}; diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f8f20be --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +Thumbs.db +.DS_Store +node_modules +npm-debug.log +/build diff --git a/README.md b/README.md new file mode 100644 index 0000000..2dce8ac --- /dev/null +++ b/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 diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..0ff5c72 --- /dev/null +++ b/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"]); diff --git a/package.json b/package.json new file mode 100644 index 0000000..1a6f848 --- /dev/null +++ b/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-sass-boilerplate", + "version": "0.0.1", + "author": "rot1024", + "description": "gulp + Browserify + Babelify + React + Sass", + "private": true, + "scripts": { + "start": "gulp serve", + "clean": "gulp clean", + "build": "gulp build", + "release": "gulp release", + "serve": "gulp serve" + }, + "devDependencies": { + "babel-polyfill": "^6.3.14", + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.5.0", + "babelify": "^7.2.0", + "browser-sync": "^2.11.0", + "browserify": "^13.0.0", + "del": "^2.2.0", + "eslint": "^2.2.0", + "eslint-plugin-node": "^1.0.0", + "eslint-plugin-react": "^4.1.0", + "gulp": "^3.9.0", + "gulp-autoprefixer": "^3.1.0", + "gulp-changed": "^1.3.0", + "gulp-cssnano": "^2.1.0", + "gulp-load-plugins": "^1.2.0", + "gulp-notify": "^2.2.0", + "gulp-plumber": "^1.0.1", + "gulp-sass": "^2.2.0", + "gulp-sourcemaps": "^1.6.0", + "gulp-uglify": "^1.5.1", + "licensify": "^2.0.1", + "vinyl-buffer": "^1.0.0", + "vinyl-source-stream": "^1.1.0", + "watchify": "^3.7.0" + }, + "dependencies": { + "react": "^0.14.7", + "react-dom": "^0.14.7" + } +} diff --git a/src/images/.gitkeep b/src/images/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..a8ae8e5 --- /dev/null +++ b/src/index.html @@ -0,0 +1,13 @@ + + + + + + + + + +
+ + + diff --git a/src/sass/main.scss b/src/sass/main.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/scripts/.eslintrc.js b/src/scripts/.eslintrc.js new file mode 100644 index 0000000..d6e2c88 --- /dev/null +++ b/src/scripts/.eslintrc.js @@ -0,0 +1,46 @@ +module.exports = { + "env": { + "browser": true, + "node": false + }, + "extends": "plugin:react/recommended", + "parserOptions": { + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + } + }, + "plugins": ["react"], + "rules": { + "node/no-unsupported-features": 0, + "node/shebang": 0, + "react/forbid-prop-types": 0, + "react/no-multi-comp": 1, + "react/no-set-state": 2, + "react/no-string-refs": 1, + "react/prefer-es6-class": [1, "always"], + "react/require-extension": 1, + "react/self-closing-comp": 1, + "react/sort-comp": 0, + "react/sort-prop-types": 0, + "react/wrap-multilines": [1, { assignment: true, declaration: true, return: true }], + "react/jsx-boolean-value": [1, "never"], + "react/jsx-closing-bracket-location": [1, "line-aligned"], + "react/jsx-curly-spacing": [1, "never"], + "react/jsx-equals-spacing": [1, "never"], + "react/jsx-handler-names": 0, + "react/jsx-indent-props": [1, 2], + "react/jsx-indent": [1, 2], + "react/jsx-key": 2, + "react/jsx-max-props-per-line": [1, { "maximum": 5 }], + "react/jsx-no-bind": [1, { + "allowArrowFunctions": false, + "allowBind": false, + "ignoreRefs": false + }], + "react/jsx-no-literals": 0, + "react/jsx-pascal-case": 1, + "react/jsx-sort-props": 0, + "react/jsx-space-before-closing": [1, "always"] + } +}; diff --git a/src/scripts/main.js b/src/scripts/main.js new file mode 100644 index 0000000..e69de29