|
Gulp.js
gulp is an open-source JavaScript toolkit, used as a streaming build system (similar to a more package-focused Make) in front-end web development. It is a task runner built on Node.js and npm, used for automation of time-consuming and repetitive tasks involved in web development like minification, concatenation, cache busting, unit testing, linting, optimization, etc.[6] gulp uses a code-over-configuration approach to define its tasks and relies on its small, single-purpose plugins to carry them out. The gulp ecosystem includes more than 3500 such plugins.[7] Overviewgulp[8] is a build tool in JavaScript built on node streams. These streams facilitate the connection of file operations through pipelines.[9] gulp reads the file system and pipes the data at hand from one single-purposed plugin to another through the Need for a task runnerTask-runners like gulp and Grunt are built on Node.js rather than npm because the basic npm scripts are inefficient when executing multiple tasks. Even though some developers prefer npm scripts because they can be simple and easy to implement, there are numerous ways where gulp and Grunt seem to have an advantage over each other, and the default provided scripts.[11] Grunt runs tasks by transforming files and saves them as new ones in temporary folders, and the output of one task is taken as input for another and so on until the output reaches the destination folder. This involves a lot of I/O calls and the creation of many temporary files. Whereas gulp streams through the file system do not require any of these temporary locations, decreasing the number of I/O calls thus, improving performance.[12] Grunt uses configuration files to perform tasks, whereas gulp requires its build file to be coded. In Grunt, each plugin needs to be configured to match its input location to the previous plugin's output. In gulp, the plugins are automatically pipe-lined.[9] OperationThe gulp tasks are run from a command-line interface (CLI)[11] shell and require two files, Anatomy of gulpfilegulpfile is the place where all the operations are defined in gulp. The basic anatomy of the gulpfile consists of required plugins included at the top, definition of the tasks and a default task at the end.[16] PluginsAny installed plugin that is required to perform a task is to be added at the top of the gulpfile as a dependency in the following format.[14][15] //Adding dependencies
var gulp = require ('gulp');
TasksThe tasks can then be created. A gulp task is defined by gulp.task and takes the name of the task as the first parameter and a function as the second parameter. The following example shows the creation of a gulp tasks. The first parameter taskName is mandatory and specifies the name by which the task in the shell can be executed.[17] gulp.task('taskName', function () {
//do something
});
Alternatively, a task that performs several predefined functions can be created. Those functions are passed as the second parameter in the form of an array. function fn1 () {
// do something
}
function fn2 () {
// do something
}
// Task with array of function names
gulp.task('taskName', gulp.parallel(fn1, fn2));
Default task
The default task is to be defined at the end of the gulpfile. It can be run by the // Gulp default task
gulp.task('default', fn);
The default task is used in gulp to run any number of dependent sub tasks defined above in a sequential order automatically. gulp can also monitor source files and run an appropriate task when changes are made to the files. The sub tasks are to be mentioned as the elements of the array in the second parameter. The process can be triggered by simply running the default task by Example tasksImage Task
The module definition can be at the beginning of var imagemin = require('gulp-imagemin');
The subsequent image task optimizes images.
// Images task
gulp.task('images', function () {
return gulp.src('images/*.{png,gif,jpg}')
.pipe(imagemin())
.pipe(gulp.dest('dist/images/'));
});
Scripts Task
In the following example, all JavaScript files from the directory scripts/ are optimized with // Script task
gulp.task('scripts', function () {
return gulp.src('scripts/*.js')
.pipe(uglify())
.pipe(gulp.dest('scripts/'));
});
Watch TaskThe Watch-task serves to react to changes in files. In the following example, the tasks with the names scripts and images are called when any of JavaScript files or images change in the specified directories.[21] // Rerun the task When a file changes
gulp.task('watch', function (cb) {
gulp.watch('scripts/js/**', scripts);
gulp.watch('images/**', images);
cb();
});
Furthermore, it is possible to accomplish an update of the browser content using the Watch-tasks.[22] For this, there are numerous options and plugins. See alsoReferences
Literature
External links |
||||||||||||||||||||||||||||||
Portal di Ensiklopedia Dunia
