├── src ├── js │ └── app.js ├── scss │ └── style.scss └── index.html ├── .gitignore ├── .eslintrc.json ├── README.md ├── package.json └── gulpfile.js /src/js/app.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /src/scss/style.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "extends": "eslint:recommended", 7 | "parserOptions": { 8 | "ecmaFeatures": { 9 | "experimentalObjectRestSpread": true 10 | }, 11 | "sourceType": "module", 12 | "ecmaVersion": 6 13 | }, 14 | "rules": { 15 | "indent": ["error", "tab"], 16 | "linebreak-style": ["error", "unix"], 17 | "quotes": ["error", "single", { "allowTemplateLiterals": true }], 18 | "semi": ["error", "always"], 19 | "max-params": ["error", 3], 20 | "comma-spacing": ["error", { "before": false, "after": true }] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gulpBoiler17 2 | A simple front end boilerplate using Babel (es2015 and es2017), Gulp, Scss, ESLint, and Browsersync. 3 | 4 | ## Get started 5 | 6 | `git clone --depth=1 https://github.com/mildrenben/gulpBoiler17.git` 7 | 8 | `npm i` 9 | 10 | `npm start` 11 | 12 | Done. 13 | 14 | --- 15 | 16 | ## Components 17 | 18 | - *HTML* - HTML sits in the top level `src` folder. 19 | - *SCSS* - Only one `.css` file is written (`style.css`). You need to import all other `.scss` files into the existing `style.scss` file. 20 | - *JS* - Babel compiles the JS with the es2015 and es2017 presets. It is not concatenated, I suggest using `gulp-concat` if you need multiple files. 21 | - *Images* - Images are minified from the `src/img` directory. 22 | 23 | ## Tools 24 | 25 | - *Linting* - ESLint (extended from eslint recommended) lints the JS with some custom rules as well. Use `npm lint` to manually run it. If you want to lint on every git commit see [here](https://gist.github.com/wesbos/8aec9d2ff7f7cf9dd65ca2c20d5dfc23) 26 | - *Hot reloading* - SCSS changes are injected. HTML and JS changes reload the page. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-boiler-17", 3 | "version": "1.0.0", 4 | "description": "A simple front end boilerplate using Gulp, SCSS, ESLint and Browsersync", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "gulp", 8 | "lint": "./node_modules/.bin/eslint ./src/js --ext js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/mildrenben/gulpBoiler17.git" 13 | }, 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/mildrenben/gulpBoiler17/issues" 18 | }, 19 | "homepage": "https://github.com/mildrenben/gulpBoiler17#readme", 20 | "devDependencies": { 21 | "babel-preset-es2015": "6.24.1", 22 | "babel-preset-es2017": "6.24.1", 23 | "browser-sync": "2.18.12", 24 | "eslint": "4.3.0", 25 | "eslint-config-airbnb-base": "^11.3.1", 26 | "eslint-plugin-import": "^2.7.0", 27 | "gulp": "3.9.1", 28 | "gulp-autoprefixer": "4.0.0", 29 | "gulp-babel": "6.1.2", 30 | "gulp-htmlmin": "3.0.0", 31 | "gulp-imagemin": "3.3.0", 32 | "gulp-minify-css": "1.2.4", 33 | "gulp-plumber": "1.1.0", 34 | "gulp-sass": "3.1.0", 35 | "gulp-uglify": "3.0.0", 36 | "pump": "1.0.2" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const sass = require('gulp-sass'); 3 | const minifyCss = require('gulp-minify-css'); 4 | const autoprefixer = require('gulp-autoprefixer'); 5 | const htmlmin = require('gulp-htmlmin'); 6 | const uglify = require('gulp-uglify'); 7 | const babel = require('gulp-babel'); 8 | const browserSync = require('browser-sync').create(); 9 | const imagemin = require('gulp-imagemin'); 10 | const plumber = require('gulp-plumber'); 11 | const pump = require('pump'); 12 | 13 | const srcPath = 'src'; 14 | const src = { 15 | scss: `${srcPath}/scss/style.scss`, 16 | html: `${srcPath}/**/*.html`, 17 | js: `${srcPath}/js/**/*.js`, 18 | img: `${srcPath}/img/*`, 19 | } 20 | 21 | // Dest set to docs for github pages, feel free to change 22 | const destPath = 'docs'; 23 | const dest = { 24 | css: `${destPath}/css`, 25 | html: destPath, 26 | js: `${destPath}/js`, 27 | img: `${destPath}/img`, 28 | } 29 | 30 | gulp.task('sass', () => { 31 | pump([ 32 | gulp.src(src.scss), 33 | plumber(err => console.error(err)), 34 | sass({ style: 'compressed' }).on('error', sass.logError), 35 | autoprefixer({ browsers: ['last 2 versions'] }), 36 | minifyCss(), 37 | gulp.dest(dest.css), 38 | browserSync.stream({match: '**/*.css'}) 39 | ]); 40 | }); 41 | 42 | gulp.task('html', () => { 43 | pump([ 44 | gulp.src(src.html), 45 | plumber(err => console.error(err)), 46 | htmlmin({ collapseWhitespace: true, removeComments: true }), 47 | gulp.dest(dest.html) 48 | ]); 49 | }); 50 | 51 | gulp.task('js', () => { 52 | pump([ 53 | gulp.src(src.js), 54 | plumber(err => console.error(err)), 55 | babel({ presets: ['es2015', 'es2017'] }), 56 | uglify(), 57 | gulp.dest(dest.js), 58 | browserSync.stream() 59 | ]); 60 | }); 61 | 62 | gulp.task('image', () => { 63 | pump([ 64 | gulp.src(src.img), 65 | plumber(err => console.error(err)), 66 | imagemin({ verbose: true }), 67 | gulp.dest(dest.img) 68 | ]); 69 | }); 70 | 71 | gulp.task('browserSync', ['sass', 'js', 'html'], () => { 72 | browserSync.init({ 73 | injectChanges: true, 74 | server: `./${destPath}`, 75 | }); 76 | 77 | gulp.watch(src.scss, ['sass']); 78 | gulp.watch(src.js, ['js']); 79 | gulp.watch(src.html, ['html']); 80 | gulp.watch(src.html).on('change', browserSync.reload); 81 | gulp.watch(src.js).on('change', browserSync.reload); 82 | }); 83 | 84 | gulp.task('default', ['browserSync']); 85 | --------------------------------------------------------------------------------