دوره آموزش gulpjs قسمت ششم: مباحث تکمیلی

در این قسمت به مباحث تکمیلی فایل config و دستور watch می‌پردازیم.

دستور watch در GulpJS

می توان task ویژه‌ای با استفاده از watch ایجاد کرد که دیگر نیازی نباشد با هر بار ویرایش کد، وظیفه مورد نظر را با دستور gulp فراخوانی کنیم.

مثلا فرض کنید هر وقت کد css را ویرایش کردیم، دستور autoprefixer به صورت خودکار دوباره اجرا شود.

سورس زیر را ببینید:

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('autoprefixer', function(){
	gulp
		.src('dev_css/**/*.css')
		.pipe(autoprefixer({
          browsers: ['last 2 versions']
		}))
		.pipe(gulp.dest('dest/'));
});

gulp.task('watch', function(){
	gulp.watch(['dev_css/**/*.css'], ['autoprefixer']);
});

همانطور که می‌بینید در بالا ابتدا یک وظیفه با نام autoprefixer ایجاد کردیم.

بعد از این وظیفه یک وظیفه با نام watch ایجاد نمودیم که درون آن دستور ویژه‌ای با متد watch قرار دارد.

ورودی اول این دستور بیان می‌کند در صورت ویرایش شدن هر یک از فایل‌های css درون پوشه dev_css وظیفه autoprefixer فراخوانی خواهد شد.

حال در خط فرمان دستور gulp watch را فراخوانی کرده و در فایل استایل موجود در پوشه dev_css یک ویرایش ایجاد کنید. مشاهده خواهید کرد بعد از چند ثانیه این تغییر در فایل ایجاد شده در پوشه dest اعمال خواهد شد.

ایجاد فایل config برای gulp

مثلا فرض کنید می‌خواهید فایل‌های خروجی را در پوشه به خصوصی ذخیره کنید و آدرس این پوشه مخصوص را از فایل config پروژه بخوانید تا در صورت نیاز داشتن به آن به سادگی و بدون نیاز به ذکر آدرس از آن استفاده نمایید.

یکی از مزایای این کار این است که مسیر پوشه خروجی را فقط در یک جا ویرایش می‌کنید و نیاز به ویرایش آن در تمام task‌های مرتبط نیست.

فرض کنید فایل gulpfile.js این مثال به شرح زیر باشد:

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('css', function(){
	gulp
		.src(['dev_css/**/*.scss'])
		.pipe(sass().on('error', sass.logError))
		.pipe(autoprefixer({
			browsers: ['last 2 versions']
		}))
		.pipe(gulp.dest('dest/'));
});

یک فایل با نام gulp.config.js در پوشه جاری پروژه ایجاد کرده و دستورات زیر را در آن قرار دهید:

module.exports = function(){
	var config = {
		scss:[
			'dev_css/**/*.scss'
		],
		dest: 'dest/',
	}
	return config;
}

مقادیری که درون تابع و در متغیر config قرار دادیم قرار است در نهایت با دستور return به فایل gulpfile.js ارسال شوند.

در بدنه تابع دو مقدار scss و dest را داریم که اولی آرایه و دومی یک رشته ساده است.

فایل gulpfile.js را به شرح زیر ویرایش می‌کنیم:

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var config = require('./gulp.config')();

gulp.task('css', function(){
	gulp
		.src(config.scss)
		.pipe(sass().on('error', sass.logError))
		.pipe(autoprefixer({
			browsers: ['last 2 versions']
		}))
		.pipe(gulp.dest(config.dest));
});

در سطر چهار یک متغیر به نام config ایجاد کردیم که با require آدرس فایل کانفیگ را به آن دادیم. چون این فایل درون پوشه node_modules قرار ندارد به شکلی که می‌بینید آن را مقدار دهی کردیم.

در سطر هشت برای src مقدار config.scss را قرار دادیم تا مقدار از فایل gulp.config.js استخراج شود.

در سطر 13 نیز مقدار config.dest از فایل gulp.config.js استخراج می‌شود.