gulpset
Gulp based project skeleton with modular tasks.
tech stack
- Node.js (v8 or later is supported)
- gulp v4 (task-runner)
- Webpack + babel + eslint (JS)
- Scss + PostCSS + sasslint (CSS)
- ejs (HTML)
- prettier (beatutifier)
- browser-sync (dev server)
- rsync (deploy)
starting development
- download this repo from releases
yarn
yarn start
want to generate production build(minified)
yarn build:prod
each tasks
js settings
- see
/webpack.config.js
,/webpack.config.prod.js
&/gulpset/tasks/scripts/index.js
When you use ES5
-
/.eslintrc
: modify@fourdigit/eslint-config-fourdigit/esnext
=>@fourdigit/eslint-config-fourdigit/base
- modify
copy
task (addjs
ext) - remove
scripts
task fromgulpfile.js
development & production
Gulpset has 2 webpack settings & corresponding 2 gulp tasks.
-
webpack-watch
- ./webpacck.config.js
mode: development
process.env.NODE_ENV === 'development'
-
webpack
- webpack.config.prod.js
-
mode: production
=> webpack 4 automatically optimize your code for production. -
process.env.NODE_ENV === 'production'
=> you can use this environmental variable for environmental settings e.g. API key, endpoints.
scss settings
- see
/gulpset/tasks/scss/index.js
- some utility scss libs are loaded on
/src/assets/css/app.scss
ejs settings
- see
/gulpset/tasks/ejs/index.js
- some utility functions are included here
/src/_utils.ejs
deployrsync settings
- Open
/gulpset/tasks/deployrsync/index.js
- Set target user:hostname to
gulpset.confs.deployrsync.options.hostname
- Add private key of target server. e.g.
ssh-add ~/.ssh/xxxxxxxx_rsa
- Run
gulp deployrsync
Deploy via bitbucket-pipelines
- Create private key for target server.
- Encode it into base 64. e.g
$ base64 gulpset_rsa| pbcopy
- On bitbucket web screen, enter repository settings
- Go Pipelines settings > Enable Pipelines
- Environment variables > make and set
PRIVATE_KEY
(make sure the to enable checkbox of "encrypt") andTARGET_HOST
- Built files by newly pushed
develop
branch will be deployed toTARGET_HOST
- if you want to use other branches, rewrite
branches
section onbitbucket-pipelines.yml