Giter Club home page Giter Club logo

es6-sass-sk's Introduction

ES6 and SASS Starter Kit to build javascript ES6/SASS project runnable on any browser

Description

The purpose of this package is to set up a development environment that supports es6 (es2015) and the sass preprocessor. Installing this package in your project adds a basic configuration and allows you to focus on development. The structure of the generated project is as follows:

 your_project/
 |_ node_modules/    # node modules folder
 |_ src/
 |     |_ js /    # Put here your es6 js files, you can create subfolders
 |     |     |_ main.js
 |     |_ scss /  # Put here your scss files, you can create subfolders
 |_ dist/
 |     |_ js /    # generated es5 file
 |     |     |_ main.js
 |     |     |_ main.min.js
 |     |_ css /  # generated css file
 |            |_ main.css
 |            |_ main.css.map
 |_ .es6-sass-sk    # configuration file
 |_ .eslintrc       # eslint configuration file
 |_ index.html      #
 |_ package.json    # you should create it before installing this package.
                    # usage : npm init

1 - Install

mkdir your_project
cd your_project
npm init            # to create a npm config file
npm install --save-dev es6-sass-sk

2 - package.json scripts

Add this lines to scripts field in package.json

"scripts": {
    "build": "es6-sass build",
    "sass": "es6-sass sass",
    "eslint": "es6-sass eslint",
    "minify": "es6-sass minify",
    "watch": "es6-sass watch"
  }

3 - Usage

npm run build       # transpile and bundle es6 to es5 single file
npm run sass        # transpile .scss files to css file and generate sourceMap file
npm run minify      # uglify and generates .min.js file and compress .css file
npm run eslint      # parse js files and show errors according to .eslintrc config file
npm run watch       # enable watch mode on all js an scss files

4 - Customize es6 and scss entries

npm installs a default .es6-sass-sk config file. you can change defaults.

module.exports  = {
    /**
     * the name bundled output files main.js and main.css
     * Olso the js namespace in the global scope window.main
     */
    library: 'main',
    /**
     * ES6 source folder. All subfolders are scanned
     */
    jsBasePath: './src/js',
    /**
     * SASS source folder. All subfolders are scanned
     */
    scssBasePath: './src/scss',
    /**
     * ES5 destination folder.
     */
    jsDest: './dist/js',
    /**
     * SASS destination folder.
     */
    cssDest: './dist/css'
};

es6-sass-sk's People

Contributors

daaif avatar daaif-a avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.