| { | |
| "presets": [ | |
| "latest" | |
| ] | |
| } |
| .tmp/ | |
| public/ | |
| node_modules/ | |
| bower_components/ |
| { | |
| // Extend existing configuration | |
| // from ESlint and eslint-plugin-react defaults. | |
| "extends": [ | |
| // "eslint:recommended", "plugin:react/recommended" | |
| ], | |
| // Enable ES6 support. If you want to use custom Babel | |
| // features, you will need to enable a custom parser | |
| // as described in a section below. | |
| "parserOptions": { | |
| "ecmaVersion": 6, | |
| "sourceType": "module" | |
| }, | |
| "env": { | |
| "browser": true, | |
| "node": true | |
| }, | |
| // Enable custom plugin known as eslint-plugin-react | |
| "plugins": [ | |
| // "react" | |
| ], | |
| "rules": { | |
| // Disable `no-console` rule | |
| "no-console": 0, | |
| // Give a warning if identifiers contain underscores | |
| // "no-underscore-dangle": 1, | |
| // Default to single quotes and raise an error if something | |
| // else is used | |
| "quotes": [2, "single"] | |
| } | |
| } |
#task runner stack for build static web-page
npm installnpm run buildnpm run demonpm run serve##Directory tree
├── .babelrc
├── .eslintignore
├── .eslintrc
├── README.md
├── gulpfile.js
├── package.json
├── site
│ ├── about.html
│ ├── assets
│ │ ├── fonts
│ │ └── images
│ ├── index.html
│ ├── scripts
│ │ ├── main.js
│ │ ├── utilities
│ │ └── views
│ └── styles
│ ├── main.scss
│ └── scss
└── webpack.config.js| const del = require('del'); | |
| const gulp = require('gulp'); | |
| const wiredep = require('wiredep').stream; | |
| const runSequence = require('run-sequence'); | |
| const browserSync = require('browser-sync'); | |
| const gulpLoadPlugins = require('gulp-load-plugins'); | |
| const webpackConfig = require('./webpack.config.js'); | |
| const $ = gulpLoadPlugins(); | |
| const reload = browserSync.reload; | |
| gulp.task('styles', () => { | |
| return gulp.src('site/styles/*.scss') | |
| .pipe($.plumber()) | |
| .pipe($.sourcemaps.init()) | |
| .pipe($.sass.sync({ | |
| outputStyle: 'expanded', | |
| precision: 10, | |
| includePaths: ['.'] | |
| }).on('error', $.sass.logError)) | |
| .pipe($.postcss([ | |
| require('postcss-will-change'), | |
| require('postcss-cssnext')({ | |
| browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'] | |
| }), | |
| require("css-mqpacker")({ | |
| sort: true | |
| }) | |
| ])) | |
| .pipe($.sourcemaps.write('.')) | |
| .pipe(gulp.dest('.tmp/styles')) | |
| .pipe(reload({stream: true})); | |
| }); | |
| gulp.task('scripts', function() { | |
| return gulp.src('src/scripts/main.js') | |
| .pipe(require('webpack-stream')(webpackConfig)) | |
| .pipe(gulp.dest('.tmp/scripts')) | |
| .pipe(reload({ stream: true })); | |
| }); | |
| function lint(files, options) { | |
| return gulp.src(files) | |
| .pipe(reload({stream: true, once: true})) | |
| .pipe($.eslint(options)) | |
| .pipe($.eslint.format()) | |
| .pipe($.if(!browserSync.active, $.eslint.failAfterError())); | |
| } | |
| gulp.task('lint', () => { | |
| return lint('site/scripts/**/*.js', { | |
| fix: true, | |
| useEslintrc: true | |
| }) | |
| .pipe(gulp.dest('site/scripts')); | |
| }); | |
| gulp.task('lint:test', () => { | |
| return lint('test/spec/**/*.js', { | |
| fix: true, | |
| env: { | |
| mocha: true | |
| } | |
| }) | |
| .pipe(gulp.dest('test/spec')); | |
| }); | |
| gulp.task('html', ['styles', 'scripts'], () => { | |
| return gulp.src('site/*.html') | |
| .pipe($.useref({searchPath: ['.tmp', 'site', '.']})) | |
| .pipe($.if('*.js', $.uglify())) | |
| .pipe($.if('*.css', $.cssnano({safe: true, autoprefixer: false}))) | |
| .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true}))) | |
| .pipe(gulp.dest('public')); | |
| }); | |
| gulp.task('images', () => { | |
| return gulp.src('site/assets/images/**/*') | |
| .pipe($.cache($.imagemin())) | |
| .pipe(gulp.dest('public/assets/images')); | |
| }); | |
| gulp.task('fonts', () => { | |
| return gulp.src(require('main-bower-files')('**/*.{eot,ttf,woff,woff2}', function (err) {}) | |
| .concat('site/assets/fonts/**/*')) | |
| .pipe(gulp.dest('.tmp/assets/fonts')) | |
| .pipe(gulp.dest('public/assets/fonts')); | |
| }); | |
| gulp.task('extras', () => { | |
| return gulp.src([ | |
| 'site/*', | |
| '!site/*.html', | |
| ], { | |
| dot: true | |
| }).pipe(gulp.dest('public')); | |
| }); | |
| gulp.task('clean', del.bind(null, ['.tmp', 'public'])); | |
| const watch = () => { | |
| gulp.watch([ | |
| 'site/**/*.html', | |
| 'site/assets/**/*' | |
| ]).on('change', reload); | |
| gulp.watch('site/styles/**/*.scss', ['styles']); | |
| gulp.watch('site/scripts/**/*.js', ['scripts']); | |
| gulp.watch('site/assets/fonts/**/*', ['fonts']); | |
| gulp.watch('bower.json', ['wiredep', 'fonts']); | |
| } | |
| gulp.task('watch', () => { | |
| runSequence(['clean', 'wiredep'], ['styles', 'scripts', 'fonts'], () => { | |
| watch(); | |
| }); | |
| }); | |
| gulp.task('serve', () => { | |
| runSequence(['clean', 'wiredep'], ['styles', 'scripts', 'fonts'], () => { | |
| browserSync({ | |
| notify: false, | |
| port: 3000, | |
| server: { | |
| baseDir: ['.tmp', 'site'], | |
| routes: { | |
| '/bower_components': 'bower_components' | |
| } | |
| } | |
| }); | |
| watch() | |
| }); | |
| }); | |
| gulp.task('serve:public', () => { | |
| browserSync({ | |
| notify: false, | |
| port: 3000, | |
| server: { | |
| baseDir: ['public'] | |
| } | |
| }); | |
| }); | |
| gulp.task('serve:test', ['scripts'], () => { | |
| browserSync({ | |
| notify: false, | |
| port: 3000, | |
| ui: false, | |
| server: { | |
| baseDir: 'test', | |
| routes: { | |
| '/scripts': '.tmp/scripts', | |
| '/bower_components': 'bower_components' | |
| } | |
| } | |
| }); | |
| gulp.watch('site/scripts/**/*.js', ['scripts']); | |
| gulp.watch(['test/spec/**/*.js', 'test/index.html']).on('change', reload); | |
| gulp.watch('test/spec/**/*.js', ['lint:test']); | |
| }); | |
| // inject bower components | |
| gulp.task('wiredep', () => { | |
| gulp.src('site/styles/*.scss') | |
| .pipe(wiredep({ | |
| ignorePath: /^(\.\.\/)+/ | |
| })) | |
| .pipe(gulp.dest('site/styles')); | |
| gulp.src('site/*.html') | |
| .pipe(wiredep({ | |
| ignorePath: /^(\.\.\/)*\.\./ | |
| })) | |
| .pipe(gulp.dest('site')); | |
| }); | |
| gulp.task('build', ['lint', 'html', 'images', 'fonts', 'extras'], () => { | |
| return gulp.src('public/**/*').pipe($.size({title: 'build', gzip: true})); | |
| }); | |
| gulp.task('default', () => { | |
| runSequence(['clean', 'wiredep'], 'build'); | |
| }); |
| <!doctype html> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>index - Static Version</title> | |
| <!-- <link rel="apple-touch-icon" href="apple-touch-icon.png"> --> | |
| <!-- Place favicon.ico in the root directory --> | |
| <!-- build:css styles/vendor.css --> | |
| <!-- bower:css --> | |
| <!-- endbower --> | |
| <!-- endbuild --> | |
| <!-- build:css styles/main.css --> | |
| <link rel="stylesheet" href="styles/main.css"> | |
| <!-- endbuild --> | |
| </head> | |
| <body> | |
| <!--[if lt IE 9]> | |
| <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> | |
| <![endif]--> | |
| <h1>Hi. Static web-page is so FAST!</h1> | |
| <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> | |
| <script> | |
| (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= | |
| function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; | |
| e=o.createElement(i);r=o.getElementsByTagName(i)[0]; | |
| e.src='https://www.google-analytics.com/analytics.js'; | |
| r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); | |
| ga('create','UA-XXXXX-X');ga('send','pageview'); | |
| </script> | |
| <!-- build:js scripts/vendor.js --> | |
| <!-- bower:js --> | |
| <!-- endbower --> | |
| <!-- endbuild --> | |
| <!-- build:js(.tmp/assets) ../scripts/main.js --> | |
| <script src="../scripts/main.js"></script> | |
| <!-- endbuild --> | |
| </body> | |
| </html> |
| { | |
| "name": "front-end static boilerplate", | |
| "version": "0.0.1", | |
| "description": "task runner stack for build static web-page ", | |
| "main": "site/index.html", | |
| "author": "Seyed Naser Hasani <snhasani@gmail.com>", | |
| "repository": { | |
| "type": "git", | |
| "url": "" | |
| }, | |
| "scripts": { | |
| "watch": "gulp watch", | |
| "serve": "gulp serve", | |
| "demo": "gulp serve:public", | |
| "build": "gulp", | |
| "lint": "eslint . --ext .js --ignore-path .gitignore --ignore-pattern public .tmp --cache || true" | |
| }, | |
| "devDependencies": { | |
| "babel-core": "^6.21.0", | |
| "babel-loader": "^6.2.10", | |
| "babel-preset-latest": "^6.16.0", | |
| "babel-register": "^6.18.0", | |
| "bower-webpack-plugin": "^0.1.9", | |
| "browser-sync": "^2.18.6", | |
| "css-mqpacker": "^5.0.1", | |
| "del": "^2.2.0", | |
| "desandro-classie": "^1.0.1", | |
| "eslint": "^3.13.1", | |
| "eslint-loader": "^1.6.1", | |
| "gulp": "^3.9.1", | |
| "gulp-babel": "^6.1.1", | |
| "gulp-cache": "^0.4.2", | |
| "gulp-cssnano": "^2.0.0", | |
| "gulp-eslint": "^3.0.0", | |
| "gulp-htmlmin": "^3.0.0", | |
| "gulp-if": "^2.0.2", | |
| "gulp-imagemin": "^3.1.1", | |
| "gulp-load-plugins": "^1.4.0", | |
| "gulp-plumber": "^1.0.1", | |
| "gulp-postcss": "^6.3.0", | |
| "gulp-rename": "^1.2.2", | |
| "gulp-rtlcss": "^1.0.0", | |
| "gulp-sass": "^3.1.0", | |
| "gulp-size": "^2.1.0", | |
| "gulp-sourcemaps": "^2.4.0", | |
| "gulp-uglify": "^2.0.0", | |
| "gulp-useref": "^3.0.0", | |
| "jpegtran-bin": "^3.2.0", | |
| "main-bower-files": "^2.5.0", | |
| "postcss-cssnext": "^2.9.0", | |
| "postcss-will-change": "^1.1.0", | |
| "run-sequence": "^1.2.2", | |
| "webpack": "^1.14.0", | |
| "webpack-stream": "^3.2.0", | |
| "wiredep": "^4.0.0" | |
| }, | |
| "eslintConfig": { | |
| "env": { | |
| "es6": true, | |
| "node": true, | |
| "browser": true | |
| }, | |
| "rules": { | |
| "quotes": [ | |
| 2, | |
| "single" | |
| ] | |
| } | |
| }, | |
| "private": true, | |
| "engines": { | |
| "node": "=6.9.0" | |
| } | |
| } |
| var webpack = require('webpack'); | |
| module.exports = { | |
| entry: './site/scripts/main.js', | |
| output: { | |
| filename: '[name].js', | |
| path: __dirname + '/.tmp' | |
| }, | |
| devtool: 'source-map', | |
| module: { | |
| loaders: [{ | |
| test: /\.js$/, | |
| exclude: /(node_modules|bower_components)/, | |
| loader: 'babel-loader' | |
| }] | |
| }, | |
| plugins: [], | |
| eslint: { | |
| configFile: __dirname + '/.eslintrc' | |
| } | |
| }; |