Gulp based project skeleton with modular tasks.
- Node.js (v8 or later is supported)
- gulp v4 (task-runner)
- webpack + babel + eslint (JS)
- Scss + PostCSS + stylelint (CSS)
- ejs (HTML)
- prettier (beatutifier)
- browser-sync (dev server)
- rsync (deploy)
- download this repo from releases
yarn
yarn start
yarn build:prod
- see
/webpack.config.js
,/webpack.config.prod.js
&/gulpset/tasks/scripts/index.js
/.eslintrc
: modify@fourdigit/eslint-config-fourdigit/esnext
=>@fourdigit/eslint-config-fourdigit/base
- modify
copy
task (addjs
ext) - remove
scripts
task fromgulpfile.js
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.
- see
/gulpset/tasks/scss/index.js
- some utility scss libs are loaded on
/src/assets/css/app.scss
- see
/gulpset/tasks/ejs/index.js
- some utility functions are included here
/src/_utils.ejs
- 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
- 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