markdown GULP

Posted 2021-05-06

# Gulp guide for designers

Gulp is a Task / Build runner. It's easy to use, has a simple api, and is efficient. Gulp.js makes use of pipes for streaming data that needs to be processed.

But as designer you don't actually need to know any of that. What you do need to know is that Gulp will make your life much easier.

This tutorial will setup Gulp to do 3 things:

- Compress js
- Compile less
- Browser livereload

## Installing gulp and gup plugins

#### 1. Install gulp globally:

```sh
npm install --global gulp
```

You'll probably need to `sudo` this one.

#### 2. Install gulp in your project devDependencies:

```sh
npm install --save-dev gulp
```

#### 3. Install gulp less plugin
```sh
npm install --save-dev gulp-less
```
#### 4. Install gulp uglify plugin for js
```sh
npm install --save-dev gulp-uglify
```

#### 5. Install gulp plumber to output errors
```sh
npm install --save-dev gulp-plumber
```

#### 5. Install gulp browsersync for live reload
```sh
npm install browser-sync gulp --save-dev
```

## Create gulpfile.js

On the root of your project create a .js file name `gulpfile.js`, and paste this snippet

```js
var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    less = require('gulp-less'),
    plumber = require('gulp-plumber'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload;

// Uglyfies js on to /minjs
gulp.task('scripts', function(){  
  gulp.src('js/*.js')
    .pipe(plumber())
    .pipe(uglify())
    .pipe(gulp.dest("minjs"));
}); 

// Compiles less on to /css
gulp.task('less', function () {
  gulp.src('less/**/*.less')
   .pipe(plumber())
   .pipe(less())
   .pipe(gulp.dest('css'))
   .pipe(reload({stream:true}));
});

// reload server
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

// Reload all Browsers
gulp.task('bs-reload', function () {
    browserSync.reload();
});

// watch for changes on files
gulp.task('watch', function(){ 
  gulp.watch('js/*.js', ['scripts']);
  gulp.watch('less/*.less', ['less']);
  gulp.watch("*.html", ['bs-reload']);
}); 

// deploys
gulp.task('default',  ['scripts', 'less','browser-sync','watch']); 
```

## Run gulp!

Open terminal and run `gulp`!
```sh
gulp
```

And now the magic starts. This will do:

- Compress .js files on /js folder and store them on /minjs
- Compile .less files on /less folder and create a .css file on /css
- Open a browser with your index.html
- Watch for changes on your js file and compress it every time you save it
- Watch for changes on your less file and compile it every time you save it
- Auto reload the browser every time the less file is updated.

## Enjoy!

There are also Gulp plugins for Sass or Stylus and with little changes on this code you can implement them.

There is nothing much to add, just rember to do changes on less and never edit the css file and you'll be fine.