gulp - Gulp Cleaning Unwanted Files - gulp sass - gulp tutorial - learn gulp
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
How Gulp is used to clean unwanted files?
- Here, we will learn on how to optimize CSS and JavaScript.
- The reason why optimizing is required is to remove the unwanted data (for e.g. spaces and unused characters) from the source files.
- This reduces the size of the files and lets them load faster
How Gulp is used to clean unwanted files?
- Install with npm.
Examples:
npm install --save-dev gulp-clean
var gulp = require('gulp');
var clean = require('gulp-clean');
gulp.task('default', function () {
return gulp.src('app/tmp', {read: false})
.pipe(clean());
});
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- Option read:false prevents gulp from reading the contents of the file and makes this task a lot faster.
- If you need the file and its contents after cleaning in the same stream, do not set the read option to false.
var gulp = require('gulp');
var clean = require('gulp-clean');
gulp.task('default', function () {
return gulp.src('app/tmp/index.js')
.pipe(clean({force: true}))
.pipe(gulp.dest('dist'));
});
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- For safety files and folders outside the current working directory can be removed only with option force set to true.
Clean as a dependency:
var gulp = require('gulp');
var clean = require('gulp-clean');
gulp.task('clean-scripts', function () {
return gulp.src('app/tmp/*.js', {read: false})
.pipe(clean());
});
gulp.task('scripts', ['clean-scripts'], function () {
gulp.src('app/scripts/*.js')
.pipe(gulp.dest('app/tmp'));
});
gulp.task('default', ['scripts']);
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- Make sure to return the stream so that gulp knows the clean task is asynchronous and waits for it to terminate before starting the dependent one.
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
Declare Dependencies and Create Tasks:
- In your configuration file gulpfile.js, declare the dependencies as shown in the following command.
var del = require('del');
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- Next, create a task as shown in the following code.
gulp.task('clean:build', function() {
return del.sync('build');
});
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- The above task will clean entire build. The clean task clears any image catches and removes any old files present in build.
- It is possible to clean only specific file or folder and leave some of them untouched as illustrated in the following code.
gulp.task('clean:build', function() {
//return del.sync('build');
return del([
'build/temp/',
// instructs to clean temp folder
'!build/package.json'
// negate to instruct not to clean package.json file ]);
});
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- In the above task, only the temp folder will be cleaned leaving package.json untouched