Tools installation instruction
Before you start deployment these tools have to be installed on your system globally:
1. NodeJS
- On Debian / Ubuntu:
curl -sL https://deb.nodesource.com/setup_4.x | bash - apt-get install -y nodejs
- On Windows & Mac OS X
- On other platforms, see the instructions
2. Bower (required only for developing the package)
$ npm install -g bower
3. Gulp (required only for developing the package)
$ npm install --global gulp-cli
4. Webpack (required only for developing the package)
$ npm install webpack -g
Deploying the packet as an NPM dependency
Execute the following commands in your terminal:
$ cd YOUR_PROJECT_DIR
$ npm init
$ npm install teplotech-markup --save
This will initialize your project (e.g. a Wordpress theme) as an NPM packet and install the teplotech-markup
packet as a dependency in node_modules
subfolder of YOUR_PROJECT_DIR
.
NOTE. When a new version of the package is available you can update your copy by typing:
$ npm update
Deploying for work on this packet
ATTENTION Make sure all the tools mentioned above have been installed before executing the following commands!
$ git clone git@gitlab.com:coderlex/teplotech-markup.git
$ cd ./teplotech-markup
$ npm install
$ bower install
$ gulp
Development guide
Some useful gulp tasks:
- To assemble the sprites into texture atlases type in console:
$ gulp sprite
- To assemble images into data-uri partials (sass/base64/*.scss) type:
$ gulp base64
- Then SASS may be successfuly compiled into CSS styles:
$ gulp sass
- To speed-up development process I strictly recommend you to use sass watcher,
which will automatically compile *.scss files on change:
The same thing exists for Webpack task either (see below):$ gulp sass:watch
$ gulp webpack:watch
- To pack JS modules into bundles type:
$ gulp webpack
Folder structure
├─dist // built files to deploy on sever
│ ├─bower_components // built external libraries like html5shiv
│ ├─css // compiled scss
│ ├─fonts // built web fonts
│ ├─img // images + built texture atlases
│ ├─js // javascript bundles
│ └─*.html // html templates
├─src // source files
│ ├─fonts // the same as /dist/fonts in this case
│ ├─images // various images (see gulpfile.js)
│ │ ├─base64 // images to base64-encode into SASS mixins
│ │ └─sprites // tiles to build texture atlases
│ │ └─ui // default ui texture atlas (-> /dist/img/ui.png)
│ ├─scripts // client javascript sources
│ ├─styles // *.scss
│ │ ├─base64 // base64 encoded data generated by the gulp task
│ │ ├─blocks // BEM blocks
│ │ ├─boilerplate // reusable helpers
│ │ ├─components // thematic assemblies (like _forms.scss)
│ │ └─sprites // sprite mixins and data generated by the gulp task
│ └─*.html // the same as /dist/*.html in this case
└─node_modules // js development tools and sources
Tips & Notes
How to upgrade my NodeJS version?
- On Linux:
# npm cache clean -f # npm install -g n # n stable
- On Windows
How do I install npm?
You shouldn't, npm comes with NodeJS nowadays.
What another tools would you recommend?
- MSYS2 - more convenient terminal for Windows, very useful when working with Git under this platform.