Quản lý Tasks frontend với Gulp.js

Published:

Gulp.js là gì



Khi làm việc với với frontend mình thường phải các việc như compile sass hay less thành css rồi gôm các file css riêng lẻ thành 1 file, gôm các thư viện js và các file js trong project lại thành 1 file hay là minify các file css , js hoặc image các việc này trước đây mình toàn phải tự làm và mình rất ghét điều này :( hiện tại thì việc này đã có nhiều tool để hỗ trợ mình làm như gulpgrunt mình không thích Grunt vì thấy nó config dài dòng phúc tạp quá nếu có nhiều stask thì sẽ rất dài và khó nhìn nên mình chọn Gulp

Cài đặt Gulp.js

cài đặt gulp ở chế độ global để sử dụng cho tất các project

1
$ npm install gulp -g

nếu muốn chỉ cài gulp cho project hiện tại thôi thì:

1
$ npm install gulp --save-dev

cách này sẽ thêm vào phần devDependencies trong file package.json trong folder root của project.

Cài đặt các plugin cần thiết

1
2
3
4
5
6
7
8
$ npm install --save-dev gulp-autoprefixer
$ npm install --save-dev gulp-minify-css
$ npm install --save-dev gulp-jshint
$ npm install --save-dev gulp-concat
$ npm install --save-dev gulp-uglify
$ npm install --save-dev gulp-livereload
$ npm install --save-dev gulp-clean
$ npm install --save-dev gulp-compass

Tạo các tasks

Để tạo các task trước tiên cần tạo file gulpfile.js và mình gọi các plugin cần thiết và tạo các task trong file này. cách làm có thể xem trên gulp API docs

file gulpfile.js trong project của mình

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
//gọi các plugin cần thiết
var gulp = require('gulp'),
		gutil = require('gulp-util'),
		uglify = require('gulp-uglify'),
		concat = require('gulp-concat'),
		autoprefix = require('gulp-autoprefixer'),
		minifyCSS = require('gulp-minify-css'),
		notify = require('gulp-notify'),
		compass = require('gulp-compass');

// khai báo các đường dẫn và file sẽ dùng		
var paths = {
	css: ['public/admin/components/bootstrap/dist/css/bootstrap.min.css',
		'public/admin/components/font-awesome/css/font-awesome.min.css',
		'public/admin/components/ionicons/css/ionicons.min.css',
		'public/admin/css/daterangepicker/daterangepicker-bs3.css',
		'public/admin/components/bootstrap3-wysihtml5/dist/bootstrap-wysihtml5-0.0.2.css',
		'public/admin/components/angular-loading-bar/build/loading-bar.min.css',
		'public/admin/css/AdminLTE.css',
		'public/admin/css/sass/style.css'
	],
	sass: ['public/admin/sass/*.scss']
};

//tạo task cho js
gulp.task('js', function() {
	gulp.src(paths.js)
			.pipe(uglify())
			.pipe(concat('admin.min.js'))
			.pipe(gulp.dest('public/admin/build/js'));
});

//tạo task cho css
gulp.task('css', function() {
	gulp.src(paths.css)
			.pipe(concat('admin.min.css'))
			.pipe(minifyCSS())
			.pipe(gulp.dest('public/admin/build_css'));
});

//tạo task cho compass
gulp.task('compass', function() {
	gulp.src(paths.sass)
			.pipe(compass({
				css: 'public/admin/css/sass',
				sass: 'public/admin/sass',
				image: 'public/admin/img'
			}))
			.on('error', function(err) {
				// Would like to catch the error here
			})
			.pipe(minifyCSS())
			.pipe(gulp.dest('public/admin/css/sass'));
});

//tạo task watch để theo dõi các file nếu file thay đổi thì thực hiện các task liên quan 
gulp.task('watch', function() {
	gulp.watch(paths.sass, ['compass']);
	gulp.watch(paths.css, ['css']);
});

//tạo task default : là các việc sẽ làm tuần tự khi ta chỉ dùng lệnh gulp ko kèm option task nào
gulp.task('default', [
	'compass',
	'css',
	'watch'
]);