
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
create-lightweight-webapp
Advanced tools
createWebApp generator that scaffolds out a front-end web app using gulp for the build process
node 8.10 npm 5.6.0
npm i create-lightweight-webapp --save-dev
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
npm run start
start http server and enable hot Reload service.npm run build:dev
npm run build:prod
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.jscss
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 csshtml
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、reactother
gulp start:dev
gulp build:dev
gulp build:prod
gulp stop
- 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
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
two source
./src/manual3rdCss
for mode one
./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
./src/manual3rdCss
finally you can run gulp build:css-vendor
build vendor.css
gulp build:css-vendor
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
module.exports = {
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: []
}
}
<p class="helloWord">hello word! im test</p>
-src
-- views
test.ejs
console.log("hello word! im test page.");
@import "./common/guideline";
.helloWord{
color: red;
font-size: 26px;
}
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
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
},
FAQs
create web app
We found that create-lightweight-webapp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.