The efficiency of setting up gulp

gulp_1539648943.jpeg gulp_1539648943.jpeg

What are the Benefits?

Gulp is a tool that helps you out with several tasks when it comes to web development. Most of the time I find it helpful by setting it up to do front end tasks like getting a web server running, using preprocessors like Sass and Less to watch for changes within all or certain files. Also a great way to utilize gulp to speed up your website is to have automated tasks that will optimize your assets like css, javascript and images. 

 

When should I use Gulp?

I personally find it beneficial to use gulp as much as possible in the development stack. For example, most of my projects I will use bootstrap 4 with sass and have gulp compile my assets and minify the css for production use. I also have it watching for any changes within my directory so the css gets compiled as soon as I hit save within the sass files. If you're willing to go this far you might as well integrate Browsersync with gulp. This way you can for one, have a watcher on your html so it will automatically refresh on save like the sass files.

Here's an example of what that code might look like integreated with Browsersync:

gulp.task('dev', function browserDev(done) {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  });
  gulp.watch('assets/scss/*.scss', gulp.series('css:minify', function cssBrowserReload (done) {
    browserSync.reload();
    done(); //Async callback for completion.
  }));
  gulp.watch('assets/js/app.js', gulp.series('js:minify', function jsBrowserReload (done) {
    browserSync.reload();
    done();
  }));
  gulp.watch(['*.html']).on('change', browserSync.reload);
  done();
});

Tip of the Day

The real meat and potatoes of integrating Browsersync is the ability to render an ip for you to show clients and view on your phone. This will work on your local machine, that's pretty awesome! If you don't have the money to get a server or the client does not have hosting yet then this solution might appeal to you. Saving you time and money.

Posted: 16-10-2018

By: Admin

The efficiency of setting up gulp

gulp_1539648943.jpeg

What are the Benefits?

Gulp is a tool that helps you out with several tasks when it comes to web development. Most of the time I find it helpful by setting it up to do front end tasks like getting a web server running, using preprocessors like Sass and Less to watch for changes within all or certain files. Also a great way to utilize gulp to speed up your website is to have automated tasks that will optimize your assets like css, javascript and images. 

 

When should I use Gulp?

I personally find it beneficial to use gulp as much as possible in the development stack. For example, most of my projects I will use bootstrap 4 with sass and have gulp compile my assets and minify the css for production use. I also have it watching for any changes within my directory so the css gets compiled as soon as I hit save within the sass files. If you're willing to go this far you might as well integrate Browsersync with gulp. This way you can for one, have a watcher on your html so it will automatically refresh on save like the sass files.

Here's an example of what that code might look like integreated with Browsersync:

gulp.task('dev', function browserDev(done) {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  });
  gulp.watch('assets/scss/*.scss', gulp.series('css:minify', function cssBrowserReload (done) {
    browserSync.reload();
    done(); //Async callback for completion.
  }));
  gulp.watch('assets/js/app.js', gulp.series('js:minify', function jsBrowserReload (done) {
    browserSync.reload();
    done();
  }));
  gulp.watch(['*.html']).on('change', browserSync.reload);
  done();
});

Tip of the Day

The real meat and potatoes of integrating Browsersync is the ability to render an ip for you to show clients and view on your phone. This will work on your local machine, that's pretty awesome! If you don't have the money to get a server or the client does not have hosting yet then this solution might appeal to you. Saving you time and money.