Category: gulp

Gulp – Optimizing CSS and JavaScript ”; Previous Next In this chapter, you will learn how to optimize CSS and JavaScript. Optimizing is required to remove unnecessary data (for e.g. spaces and unused characters) from the source files. It reduces the size of the files and allows them to load faster Install Plugins to Optimize CSS and JavaScript Go to “work” directory from your command line and install “gulp-uglify”, “gulp-minify-css” and “gulp-concat” plugins by using the following command − npm install gulp-uglify gulp-minify-css gulp-concat Declare Dependencies and Create Tasks In your configuration file gulpfile.js, first declare the dependencies as shown in the following code. var gulp = require(”gulp”); var concat = require(”gulp-concat”); var uglify = require(”gulp-uglify”); var minify = require(”gulp-minify-css”); Next, you need to create tasks for optimizing CSS and JavaScript as shown in the following code. gulp.task(”js”, function(){ gulp.src(”src/scripts/*.js”) .pipe(concat(”script.js”)) .pipe(uglify()) .pipe(gulp.dest(”build/scripts/”)); }); gulp.task(”css”, function(){ gulp.src(”src/styles/*.css”) .pipe(concat(”styles.css”)) .pipe(minify()) .pipe(gulp.dest(”build/styles/”)); }); gulp.task(”default”,[”js”,”css”],function(){ }); The js task will accepts .js files from src/scripts/ folder. It concatenates and uglifies the js files, then produces build/scripts/script.js file. The CSS task will accept .css files from src/styles/ folder. It concatenates and minifies CSS files, then produces build/styles/styles.css file. Run the Tasks The configuration file is set up and ready to execute. Use the following command to run the task. gulp On running the task using the above command, you will receive the following result in the command prompt. C:work>gulp [13:16:34] Using gulpfile C:workgulpfile.js [13:16:34] Starting ”js”… [13:16:34] Finished ”js” after 24 ms [13:16:34] Starting ”css”… [13:16:34] Finished ”css” after 6.05 ms [13:16:34] Starting ”default”… [13:16:34] Finished ”default” after 5.04 μs Print Page Previous Next Advertisements ”;

Gulp – Optimizing Images ”; Previous Next In this chapter, you will learn how to optimize images. Optimizing will reduce the size of the images and assist in faster loading. Install Plugins to Optimize Images Go to “work” directory from your command line and install “gulp-changed” and “gulp-imagemin” plugins by using the following commands. npm install gulp-changed –save-dev npm install gulp-imagemin –save-dev Declare Dependencies and Create Tasks In your configuration file gulpfile.js, first declare the dependencies as shown in the following command. var gulp = require(”gulp”); var changed = require(”gulp-changed”); var imagemin = require(”gulp-imagemin”); Next, you need to create tasks for optimizing images as shown in the following code. gulp.task(”imagemin”, function() { var imgSrc = ”src/images/*.+(png|jpg|gif)”, imgDst = ”build/images”; gulp.src(imgSrc) .pipe(changed(imgDst)) .pipe(imagemin()) .pipe(gulp.dest(imgDst)); }); gulp.task(”default”,[”imagemin”],function(){ }); The imagemin task will accept png, jpg and gif images from src/images/ folder and minify them before writing it into the destination. The changed() ensures that only the new files are passed in each time for minifying. The gulp-changed plugin will only process the new files and hence utilized precious time. Run the Tasks The configuration file is set up and ready to execute. Use the following command to run the task. gulp On running the task using the above command, you will receive the following result in the command prompt. C:work>gulp [15:55:49] Using gulpfile C:workgulpfile.js [15:55:49] Starting ”imagemin”… [15:55:49] Finished ”imagemin” after 23 ms [15:55:49] Starting ”default”… [15:55:49] Finished ”default” after 23 μs [15:55:54] gulp-imagemin: Minified 1 images (saved 558.3 kB – 8.3%) Print Page Previous Next Advertisements ”;

Gulp Tutorial PDF Version Quick Guide Resources Job Search Discussion Gulp is a task runner that uses Node.js as a platform. It purely uses the JavaScript code and helps to run front-end tasks and large-scale web applications. Gulp builds system automated tasks like CSS and HTML minification, concatenating library files, and compiling the SASS files. These tasks can be run using Shell or Bash scripts on the command line. This tutorial teaches you how to use Gulp to run front-end tasks and large-scale web applications in simple and easy steps. After completing this tutorial, you will find yourself at a moderate level of expertise in using Gulp from where you may take yourself to the next levels. Audience This tutorial has been prepared for beginners to help them understand the basic functionalities of Gulp. Prerequisites For this tutorial, it is assumed that you have prior knowledge of basic software development using Java or any other programming language. It should be of help if you have had some exposure to the software build and deployment process. Print Page Previous Next Advertisements ”;

Gulp – Basics ”; Previous Next In this chapter, you will get acquainted with some basics related to Gulp. What is a Build System? A Build System is referred to as collection of tasks (collectively called as task runners), which automate the repetitive work. Following is a list of some of the tasks that can be handled using the build system − Compilation of preprocess CSS and JavaScript. Minification of files to reduce its size. Concatenation of files into one. Triggering the server for automatic reloading. Creation of deployment builds to store the resulting files in one location. In modern front-end workflow, the build system works with 3 components − Package managers Preprocessors Task runners and build tools Package Managers It is used to automate the installation upgrade, removal of required dependencies, clean libraries, and packages used in the development environment. Example for package managers are bower and npm. Preprocessors Preprocessors are very useful for an efficient modern workflow by adding an optimized syntax and additional features that compiles into its native language. Some of the popular preprocessors are − CSS − SASS, LESS and Stylus. JS − CoffeeScript, LiveScript, TypeScript, etc. HTML − Markdown, HAML, Slim, Jade, etc. Task Runners Task runners automate tasks like SASS to CSS conversion, minify the files, optimize images, and many other tasks used in the development workflow. Gulp is one of the task runner in the modern front-end work environment and it runs on Node. Setting Up Your Project To set your project in your computer, create a folder called “work” for example. The work folder contains following sub-folders and files − Src − Location of pre-processed HTML source files and folders. Images − Contains images which are uncompressed. Scripts − Contains multiple pre-processed script files. Styles − Contains multiple pre-processed CSS files. Build − This folder will be created automatically which contains the production files. Images − Contains compressed images. Scripts − Single script file that contains minified codes. Styles − Single CSS file that contains minified codes. gulpfile.js − It is the configuration file, which is used to define our tasks. Print Page Previous Next Advertisements ”;