elixir-helper

Alixir | elixir-helper | laravel-elixir-helper

elixir-helper is npm package built on top of elixir and gulp, its an easy cleaning solution to CSS / JS mess. Giving you a nice clean structure for organizing all your sites assets whether it is images, javascript files, or stylesheets and keeps the power of SASS, Browserify, versioning at your fingertips in simple commands you might already be familiar with. The advantage of this package is breaking down all your project assets files as templates by filtering gulp and dealing with json files without editing gulp

You can use this:

gulp watch --template customer-service --js

or

gulp watch --template customer-service --css

or

gulp watch --css

Project

│
├───/public/
│   │ 
│   ├───/build/
│   ├───/css/
│   │   ├───app.css
│   │   ├───app-home.css
│   │   └───app-customer-service.css
│   ├───/js/
│   │   ├───app.js
│   │   ├───app-home.js
│   │   └───app-customer-service.js
│   ├───/fonts/
│   │   ├───/font-awesome/
│   │   ├───/bootstrap/
│   │   └───/custom/
│   └───/images/
│       ├───/package1/
│       ├───/package2/
│       └───/package3/
│
├───/resources/
│   ├───/assets/
│   │   │
│   │   ├────/js/
│   │   │    ├────/common/
│   │   │    ├────/pages/ 
│   │   │    ├────app.js
│   │   │    ├────app-global.js
│   │   │    └────app-admin.js
│   │   │ 
│   │   ├────/sass/
│   │   │    ├────/common/ 
│   │   │    ├────/layouts/
│   │   │    ├────/pages/
│   │   │    └────app.scss 
│   │   │ 
│   │   ├────styles.json (styles tasks --css)
│   │   │ 
│   │   ├────scripts.json (scripts tasks --js)
│   │   │ 
│   │   └────assets.json (assets tasks)
│   │   
│   └───/views/
│      
├───package.json
├───alixir.json (override package config)
├───gulpfile.js
│

Installation

npm

npm install gulp --save-dev

npm install gulp-util --save-dev

npm install laravel-elixir --save-dev

npm install elixir-helper --save-dev

Note production usage you can install all required packages with --save for production

Note if you have this error: gulp-notify: [Laravel Elixir] Browserify Failed!: Couldn't find preset "es2015" relative to directory you can fix it by installing the following packages:

npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev

Note if you are using newer version of laravel-elixir v6 you might need to install the following package:

npm install laravel-elixir-browserify-official --save-dev

Note if you have any problems with files permissions you can run sudo on mac

On Deploy run the following commands:

gulp assets
gulp --production

Usage

gulpfile.js

require('elixir-helper');

Create alixir.json in the project root dir to override elixir-helper config (files, filters and path) see documentaion

{
  "files": {
    "styles": "styles.json",
    "scripts": "scripts.json",
    "assets": "assets.json"
  },
  "filters": {
    "%bower%": "vendor/bower_dl",
    "%res_bower%": "../../../vendor/bower_dl"
  },
  "path": {
    "version": {
      "build": "public/build/",
      "manifest": "public/build/rev-manifest.json"
    },
    "dist": {
      "images": "public/images/",
      "styles": "public/css/",
      "scripts": "public/js/",
      "fonts": "public/fonts/"
    },
    "assets": {
      "images": "resources/assets/images/",
      "styles": "resources/assets/sass/",
      "scripts": "resources/assets/js/",
      "fonts": "resources/assets/public/fonts/"
    }
  }
}

Create styles.json see documentaion

[
  {
    "template": "app",
    "required": true,
    "files": [
      {
        "type": "sass",
        "filesIn": "app.scss",
        "version": "css/app.css"
      }
    ]
  },
  {
    "template": "home",
    "files": [
      {
        "type": "sass",
        "filesIn": "pages/app-home.scss",
        "version": "css/app-home.css"
      }
    ]
  }
]

Create scripts.json see documentaion

[
  {
    "template": "app",
    "files": [
      {
        "type": "scripts",
        "filesIn": [
          "common/variables.js",
          "%res_bower%/jquery/dist/jquery.js",
          "%res_bower%/jquery-ui/index.js",
          "%res_bower%/bootstrap-sass/assets/javascripts/bootstrap.js",
          "%res_bower%/vue/dist/vue.js",
          "app.js"
        ],
        "fileOut": "public/js/app.js",
        "version": "js/app.js"
      }
    ]
  },
  {
    "template": "home",
    "files": [
      {
        "type": "browserify",
        "filesIn": [
          "components/somelib.js",
          "%res_bower%/package1/dist/js/script.js",
          "%res_bower%/package2/source/main.js",
          "pages/app-home.js"
        ],
        "fileOut": "public/js/app-home.js",
        "version": "js/app-home.js"
      }
    ]
  }
]

Create assets.json see documentaion

[
  {
    "package": "Bootstrap",
    "files": [
      {
        "copy": {
          "from": "%bower%/bootstrap-sass/assets/fonts/bootstrap/**",
          "to": "public/fonts/bootstrap"
        }
      }
    ]
  },
  {
    "package": "Font Awesome",
    "files": [
      {
        "copy": {
          "from": "%bower%/font-awesome/fonts/**",
          "to": "public/fonts/font-awesome"
        }
      }
    ]
  },
  {
    "package": "Toster",
    "files": [
      {
        "copy": {
          "from": "%bower%/toastr/toastr.css",
          "rename": {
            "extname": ".scss"
          },
          "to": "vendor/bower_dl/toastr/sass/"
        }
      }
    ]
  },
  {
    "package": "Slider Pro",
    "files": [
      {
        "copy": {
          "from": "%bower%/slider-pro/dist/css/slider-pro.css",
          "replace": {
            "find": "images/",
            "with": "/images/slider-pro/"
          },
          "rename": {
            "extname": ".scss"
          },
          "to": "vendor/bower_dl/slider-pro/dist/sass/"
        }
      },
      {
        "copy": {
          "from": "%bower%/slider-pro/dist/css/images/**",
          "to": "public/images/slider-pro/"
        }
      }
    ]
  }
]

Break down laravel assets

see documentaion Main project css file witch is app.css

<link href="{!!  \App\Helpers\AssetsHelper::elixir('css/app.css')  !!}" rel="stylesheet" />

To get first or second route css file your-website.com/%first-route%/*

{!! \App\Helpers\AssetsHelper::pageStyle() !!}

To create page css class in each page

<body class="{{ \App\Helpers\AssetsHelper::segmentsAsClass() }}">

Main project js file which is app.js

<script src="{!!  \App\Helpers\AssetsHelper::elixir('js/app.js')  !!}"></script>

To get first or second route js file your-website.com/%first-route%/*

{!! \App\Helpers\AssetsHelper::pageScript() !!}

gulp commands and flags

see documentaion

start with:

gulp help

to view elixir-helper config:

gulp config

list all your templates files:

gulp list --templates

list all your version files:

gulp list --version

to run assets task which into assets.json file:

gulp assets

Authors

• Alan Elias - Initial work - GitHub | LinkedIn

License

This project is licensed under the MIT License - see the LICENSE file for details