step by step tutorial for using laravel elixir

Towards automation

Tools such as file watchers can run scripts or perform operations every time a file is modified. Additionally, IDEs such as PHPStorm will recognize file extensions and offer to watch the file for changes and allow the developer to perform certain operations. While this approach is acceptable, it is not very portable and each developer would have to create and share a configuration file with the various watchers within the IDE or text editor. This creates a dependency, relying on one single IDE for the entire team.

Also, other approaches such as Bash-shell scripts could be created that run at certain intervals. However, using these scripts requires UNIX-shell coding knowledge. As has been previously demonstrated, tools like artisan help automate many manual tasks. However, most of the default artisan commands were and are still designed to be executed manually.

Recommended :  Uploading an image using Redactor in laravel

Luckily, two tools that use the Node.js JavaScript platform have emerged: Grunt and gulp. Both Grunt and gulp have had a considerable amount of success, but gulp has recently become more popular. However, learning to quickly write tasks using gulp is not very easy, especially for a PHP developer who may not be familiar with JavaScript syntax.

Consider the following example code taken from the documentation of gulp:

gulp.task('scripts', ['clean'], function() {
  // Minify and copy all JavaScript (except vendor scripts)
  // with sourcemaps all the way down
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
});

From Gulp to Elixir

Luckily, the Laravel community is always forward thinking and focuses on reducing complexity. An official community tool named Elixir has emerged to facilitate the use of gulp. Gulp is built on top of Node.js, and Elixir is built on top of gulp, creating a wrapper:

Recommended :  Learn everything about testing in laravel 5.1

elixir

Note

Laravel Elixir is not to be confused with the dynamic, functional language with the same name. The other Elixir uses the Erlang virtual machine, while Laravel Elixir uses gulp and Node.js

 

Getting started

The first step is to install Node.js if it is not already installed on the development computer.

Note

Instructions can be found at the following URL you can understand nodejs easily by going through this article

https://nodejs.org

Installing Node.js

With a Debian-based operative system such as Ubuntu, installing Node.js could be as simple as using the apt package manager. From the command line, use the following command:

$ sudo apt-get install -y nodejs

Please refer to the installation instructions for the correct operating system from the Node.js website (https://nodejs.org).

Installing the Node.js package manager

The next step involves installing gulp, which Elixir will use to run its tasks. For this step, the Node.js package manager (npm) is required. If npm is not already installed, then the apt package installer is to be use. The following command will be used to install npm:

$ sudo apt-get install npm

The npm uses a json file to manage the project’s dependencies: package.json. This file is found in the root of the Laravel project directory and has the following format:

{
  "devDependencies": {
    "gulp": "^3.8.8",
    "laravel-elixir": "*"
  }
}

Gulp and Laravel Elixir are installed as dependencies.

Recommended :  Using Swiftmailer in symfony

Installing Gulp

The following command is used to install gulp:

$ sud onpm install --global gulp

Installing Elixir

[AdSense-B]

Once Node.js, npm, and gulp are installed, the next step is to install Laravel Elixir. By running npminstall without any arguments, npm will read its configuration file and Laravel Elixir will be installed:

$ npm install 
prevChapter 1 of 5

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares