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
yarnyarn 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
copytask (addjsext) - remove
scriptstask fromgulpfile.js
Gulpset has 2 webpack settings & corresponding 2 gulp tasks.
-
webpack-watch
- ./webpacck.config.js
mode: developmentprocess.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
developbranch will be deployed toTARGET_HOST - if you want to use other branches, rewrite
branchessection onbitbucket-pipelines.yml