🐔 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
:
;
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
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 jsgulp build:js-prod
compile js 、 jsx output minify and Uglify jsgulp watch:js
vendor js
gulp build:js-vendor
compile common js library into vendor.js
css
gulp build:scss-dev
compile SCSS into CSSgulp build:scss-prod
compile SCSS into minify CSSgulp 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 servergulp 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 buildvendorOptions: distName: "vendor.js" vendors: //'react', 'react-dom', 'axios' destPath: dev: PATHDESTDEVJS_VENDOR prod: PATHDESTPRODJS_VENDOR uglifyOptions: uglifyOptions distName: "vendor2.js" vendors: destPath: dev: PATHDESTDEVJS_VENDOR prod: PATHDESTPRODJS_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
- from npm node_modules
- from
./src/manual3rdCss
for mode one
- you can edit vendors of
./config/options.js
.
ex:
vendorCssOptions:distName: vendorCssName //your create vendor namevendors: //your node_modules 3rd css name.manualVendors: `/**/*.css` `/**/*.min.css` //your manaul 3rd css path.destPath: PATHDESTCSScleanCssOptions: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/layoutmeta: [`your meta file name.`], //meta.ejs file need create in src/views/sharedheader: [`your header file name.`], //header.ejs file need create in src/views/sharedfooter: [`your footer file name.`], //footer.ejs file need create in src/views/sharedpage: [`your page main container file name.`], //page.ejs file need create in src/viewstitle: [`your page title name`]}}
how add page
- add page to layout.js
moduleexports =guideline:layout: 'layoutBase'meta: 'metaBase'header: 'headerBase'footer: 'footerBase'page: 'guideline'title: "風格指南"vendor: "verdor"home:layout: 'layoutBase'meta: 'metaBase'header: 'headerBase'footer: 'footerBase'page: 'home'title: "首頁"vendor: "verdor" "verdor2"test:layout: 'layoutBase'meta: 'metaBase'header: 'headerBase'footer: 'footerBase'page: 'test'title: "test"vendor:
- create test.ejs file in src/views folder.
hello word! im test
-src-- viewstest.ejs
- create test.js file in src/entry
console;
- create test.css file in src/scss
;.helloWord
- 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