create-lightweight-webapp

🐔 createWebApp

createWebApp generator that scaffolds out a front-end web app using gulp for the build process

🐔 Environment

node 8.10 npm 5.6.0

🐔 Installation

npm i create-lightweight-webapp --save-dev

🐔 Usage

Then, add it to your gulpfile.js:

require('create-lightweight-webapp')();

If you don't have a gulpfile.js and your os is mac

echo "require('create-lightweight-webapp')();" > gulpfile.js

then, in your terminal enter

gulp create:f2eApp

you can, in your package.json write

{
  "scripts": {
    "build:prod": "gulp clean:all && gulp build:prod",
    "build:dev": "gulp clean:all && gulp build:dev",
    "start": "gulp clean:all && gulp build:dev && gulp start:dev"
  }
}

now, you can in terminal enter

• Run npm run start start http server and enable hot Reload service.
• Run npm run build:dev
• Run npm run build:prod

🐔 All Script

clear

• gulp clean:css
• gulp clean:js
• gulp clean:js-vendor
• gulp clean:img
• gulp clean:html
• gulp clean:all

js

• gulp build:js-dev compile js 、 jsx output js
• gulp build:js-prod compile js 、 jsx output minify and Uglify js
• gulp watch:js

vendor js

• gulp build:js-vendor compile common js library into vendor.js

css

• gulp build:scss-dev compile SCSS into CSS
• gulp build:scss-prod compile SCSS into minify CSS
• gulp watch:scss

vendor css

• build:css-vendor' compile common css

html

• gulp build:html
• watch:html

image jpg、png、gif

• build-img:dev
• build-img:prod

hot reload

• gulp connect start http server
• gulp watch watch html、js、scss、react

other

• gulp start:dev
• gulp build:dev
• gulp build:prod
• gulp stop

🐔 createWebApp Architecture

  - config
    -- layout.js
    -- options.js
    -- PATH.json
  - dest
    - prod
      .
      .
      .
    - dev
      .
      .
      .
    - scripts                    //gulp task
      -- cleanTask.js
      -- commandTask.js
      -- commonJoinPoint.js
      -- createAppTask.js
      -- cssTask.js
      -- hotReloadTask.js
      -- htmTask.js
      -- imageTask.js
      -- jsTask.js
      -- vendorJsTask.js
  - src                         // base architecture
    -- entry
      guideline.js              // example, web page main js file.
      home.js                   // example, web page main js file.
    -- font
    -- img
      react.png                 // example.
    -- js
      util.js                   // common js example.
    -- manual3rdCss             // manual 3rd css , css library can placed here.
      helloWord.css             // script test file.
    -- scss                     // web page main css file.
      --- common                //
        guideline.css           // example, common scss.
      guideline.scss            // example, web page main scss.
      home.scss                 // example, web page main scss.
    -- views
      --- layout
        layoutBase.ejs          // page template.
      --- react                 
        --- components          // react component.
          Button.jsx            // example, react component.
        GuidelineContainer.jsx  // example, react container
      --- shared                // partial view
      guideline.ejs             // example, web page main content.
      home.ejs                  // example, web page main content.
  .babelrc                      // babel compile options
  .gitignore
  index.js
  LICENSE
  package-lock.json
  package.json
  README.md

🐔 use vendor js

edit /config/options.js

//multiple vendor build
vendorOptions: [
    {
      distName: "vendor.js",
      vendors: [], //'react', 'react-dom', 'axios'
      destPath: {
        dev: PATH.DEST.DEV.JS_VENDOR,
        prod: PATH.DEST.PROD.JS_VENDOR,
      },
      uglifyOptions: uglifyOptions
    },
    {
      distName: "vendor2.js",
      vendors: [],
      destPath: {
        dev: PATH.DEST.DEV.JS_VENDOR,
        prod: PATH.DEST.PROD.JS_VENDOR,
      },
      uglifyOptions: uglifyOptions
    }
  ],

note: Remember install your vendor library

ex:

npm i react --save

npm i react-dom --save

npm i axios --save

🐔 use vendor css

two source

1. from npm node_modules
2. from ./src/manual3rdCss

for mode one

• you can edit vendors of ./config/options.js.

ex:

vendorCssOptions: {
    distName: vendorCssName, //your create vendor name
    vendors:[], //your node_modules 3rd css name. 
    manualVendors: [`${PATH.SRC.MANUAL_CSS}/**/*.css`, `${PATH.SRC.MANUAL_CSS}/**/*.min.css`], //your manaul 3rd css path.
    destPath: PATH.DEST.CSS,
    cleanCssOptions: {
      compatibility: 'ie7',
      //keepBreaks: true,
      keepSpecialComments: '*'
    },
    autoprefixerOption: {
      browsers: ["last 4 versions", "ie >= 7"],
      cascade: false
    }
  },

for mode two

• your can add 3rd css file to ./src/manual3rdCss

finally you can run gulp build:css-vendor build vendor.css

gulp build:css-vendor

🐔 use layout

layout config in config/layout.js.

layout.js example

module.exports = {
  guideline: {
    layout: 'layoutBase',
    meta: 'metaBase',
    header: 'headerBase',
    footer: 'footerBase',
    page: 'guideline',
    title: "風格指南",
    vendor: []          //your page vendor js name
  },
  home: {
    layout: 'layoutBase',
    meta: 'metaBase',
    header: 'headerBase',
    footer: 'footerBase',
    page: 'home',
    title: "首頁",
    vendor: []         //your page vendor js name
  },
  //format
  [your page name.] : {
    layout: [`your layout file name.`],   //layout.ejs file need create in src/views/layout
    meta: [`your meta file name.`],       //meta.ejs file need create in src/views/shared
    header: [`your header file name.`],   //header.ejs file need create in src/views/shared
    footer: [`your footer file name.`],   //footer.ejs file need create in src/views/shared
    page: [`your page main container file name.`],  //page.ejs file need create in src/views
    title: [`your page title name`]
  }
}

how add page

1. add page to layout.js

module.exports = {
  guideline: {
    layout: 'layoutBase',
    meta: 'metaBase',
    header: 'headerBase',
    footer: 'footerBase',
    page: 'guideline',
    title: "風格指南",
    vendor: []
  },
  home: {
    layout: 'layoutBase',
    meta: 'metaBase',
    header: 'headerBase',
    footer: 'footerBase',
    page: 'home',
    title: "首頁",
    vendor: []
  },
  test: {
    layout: 'layoutBase',
    meta: 'metaBase',
    header: 'headerBase',
    footer: 'footerBase',
    page: 'test',
    title: "test",
    vendor: []
  } 
}

1. create test.ejs file in src/views folder.

<p class="helloWord">hello word! im test</p>

-src
  -- views
    test.ejs

1. create test.js file in src/entry

console.log("hello word! im test page.");

1. create test.css file in src/scss

@import "./common/guideline";
.helloWord{
  color: red;
  font-size: 26px;
}

1. run build script

npm run build:dev or gulp build:dev

note: you can run npm run start test your page.

open your browser at url enter http://0.0.0.0:9527/html/test.html

🐔 use proxy

open config/option.js

add

  "/api/**": {
    target: "http://0.0.0.0:9528",
    changeOrigin: true,
    pathRewrite: {
      '^/api/': ''
    }
  },
  "/*.html": {
    target: "http://0.0.0.0:9527/html",
    changeOrigin: true
  },