nj-starter-kit

New project starter kit powered by gulp, webpack and friends.

Project start

Clone project template and go inside

git clone https://github.com/Nejik/nj-starter-kit.git new-project && cd new-project

Install modules

npm i -g gulpjs/gulp#4.0 && npm i

Commands

Start in development mode with hot reloading

npm start

Production build

npm run build

Run on other port

PORT=9000 npm start

Open in browser on start

OPEN=true npm start

Remove build(development) and dist(production) folders

gulp clean

Mobile testing

Since we use browsersync, it allows us to test mobiles locally. After running you will see in console External url, that you can use on mobiles (they should be in same network).

[Browsersync] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.75.1:3000

Html

EJS used for building HTML

Mainly ejs using just for importing component files.

<!-- simple include -->
<%- include('/components/header/header.html') %>

<!-- pass variables in included file -->
<%- include('/components/header/header.html', {active: 'main'}) %>

P.S. All variables saved in locals object inside template, you can acces variables without locals.* , but it brings more errors in some situations, just use locals.variable inside templates.

Also you can use some other constructions like (more in documentation: EJS):

<%= locals.title || "New project" %>

<% if (locals.title) { %>
  <%= locals.title %>
<% } %>

<% if (locals.title) { %>
  <%= locals.title %>
<% } else { %>
  <%- "Default title" %>
<% } %>

<% if (locals.title) { %>
  <%= locals.title %>
<% } else if (locals.title2 === 'success') { %>
  <%- locals.title2 %>
<% } %>

CSS

PostCSS used for building CSS

JS

Webpack used for building JavaScript. We supports both: Babel and Typescript compilation. Mode can be changed in project.config.js via js.dialect option. By default Typescript is off.

Images

For usual images such as background you don't need to do something special.

Images sprites

1. vector icons (.svg) (preferred way)

   All your *.svg files from src/img/sprites/svg folder will be merged into one icons.svg sprite, so you can use it in your html like this

   <svg class='icon'>
     <use xlink:href='img/icons.svg#down'></use>
   </svg>

   Some notes about svg icons:

   1. how to SVG <use> article
   2. polyfill for IE already included in this template - svg4everybody
   3. in icons.svg all colors(fill, stroke) will be deleted, but you can style them via css! SVG <use> article (can be changed in configuration)
   4. you still have access to original(non-sprited) svg files in build(dist)/img/*.svg, they just copied with all other images

   Powered by gulp-svg-sprite

2. raster icons (.png)

• just put your raster icons in src/img/sprites/ and use them in usual way (images automatically will be processed to sprites by postcss plugin)

  .test:before {
      content:'';
      width:10px;
      height:15px;
      background-image:url('/img/sprites/icon.png');
  }

  P.S. paths should start from / for sprite creating.

  Powered by postcss-sprites

Images inline

If for some reason you want to inline images, we have 2 ways:

1. svg icons can be inlined and styled like this:

   .test {
       background: svg-load('img/arrow-up.svg', fill: #000, stroke: #fff);
   
       &:hover {
           background: svg-load('img/arrow-up.svg', fill: red, stroke: #fff);
       }
   }

   P.S. paths should NOT start from /

   Powered by postcss-inline-svg

2. raster icons can be inlined like this:

   .foobar {
     background: inline('img/foobar.png');
   }

   P.S. paths should NOT start from /

   Powered by postcss-assets

In production mode all images optimized by gulp-image

License

MIT ©