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:

  $ gulp sass:watch
  

  The same thing exists for Webpack task either (see below):

  $ 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?

1. MSYS2 - more convenient terminal for Windows, very useful when working with Git under this platform.