NPM và GULP

Trong project của bạn, khi muốn cài đặt jQuery hoặc Bootstrap thì bạn sẽ làm thế nào ? Lên trang chủ tải về ? Hay là gắn link CDN vào ? Những cách đấy thường có nhiều nhược điểm như khó quản lý file hoặc khi mạng chậm thì ...

Tôi có dùng một cách khác đó làm sử dụng NPM và GULP.

NPM là viết tắt của Node Package Manager, muốn dùng được NPM thì bạn phải cài Nodejs cái đã, tìm ở đây nhé. Cài xong thì phải kiểm tra xem phiên bản nodejs bạn vừa cài là gì. Gõ node -v để biết, lớn hơn v0.10.32 là ok.

Giờ là cài npm, chạy câu lệnh npm install npm@latest -g, sau khi cài xong ta kiểm tra phiên bản bằng npm -v, version có thể lớn hơn 2.1.8.

Rồi, sau đó ta sẽ áp dụng vào project của mình, tại thư mục gốc của project, bạn tạo file package.json hoặc là dùng câu lệnh npm init ở terminal, bạn sẽ phải điền các thông tin cần thiết để npm sẽ tự tạo một file package.json cho bạn.

OK, giờ cài những thư viện cần thiết, gõ npm install <package_name>, câu lệnh này sẽ tạo ra thư mục node_modules ở thư mục gốc của bạn và lưu trữ các thư viện, nhớ thêm thư mục này vào file .gitignore nhé, chẳng ai push thư viện lên git nữa đâu khi mà nó đã có trên mạng rồi. Khi cài, nếu bạn thêm tùy chọn --save thì thông tin các thư viện sẽ lưu vào file package.json, mục dependencies. Còn nếu thêm --save-dev thì sẽ lưu vào devDependencies. Đây là điều rất tiện lợi vì bạn chỉ cần cài đặt project, sau đó push lên git, người khác tải về chỉ cần chạy npm install là ok, không phải mất công cài lại từ đầu. Muốn gỡ thư viện nào thì chỉ cần chạy npm uninstall <package_name> với các tùy chọn --save hoặc --save-dev như lúc cài là được.

Cài xong rồi thì làm gì đây, phải sử dụng chứ ? Đến đây thì tôi dùng gulp, nhưng vẫn phải cài thêm các thư viện từ npm thì mới sử dụng được gulp. Các bạn có thể tham khảo file package.json của mình. Nhưng phải cài npm install -g gulp gulp-cli cái đã.

{
  "name": "typer_script",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "gulp": "^3.9.1",
    "gulp-browserify": "^0.5.1",
    "gulp-compass": "^2.1.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssmin": "^0.1.7",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-tslint": "^7.0.1",
    "gulp-typescript": "^3.1.3",
    "gulp-uglify": "^2.0.0",
    "gulp-watch": "^4.3.11",
    "jquery": "^3.1.1",
    "systemjs": "^0.19.41",
    "typescript": "^2.0.10"
  }
}

Thực ra gulp là một task runner giúp ta tự động hóa một số thao tác như server auto reload, minify các file javascript để đưa lên môi trường production. Ở đây tôi sử dụng gulp để biên dịch các file scss thành css và gộp các file js vào với nhau cho dễ sử dụng. Nó làm việc thông qua file gulpfile.js. Cùng xem qua file gulpfile của tôi nhé.

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var ts = require('gulp-typescript');
var watch       = require('gulp-watch');

var import_style = {
    bootstrap_css: "node_modules/bootstrap/dist/css/bootstrap.min.css",
    my_css: "resources/assets/sass/*.scss",
    jquery: "node_modules/jquery/dist/jquery.min.js",
    bootstrap_js: "node_modules/bootstrap/dist/js/bootstrap.min.js",
    my_js: "resources/assets/js/*.js",
    font: "node_modules/bootstrap/dist/fonts/*",
};

var export_style = {
    css: "public/css",
    js: "public/js",
    font: "public/css/font",
};

gulp.task('css', function() {
    return gulp.src([import_style.bootstrap_css, import_style.my_css])
        .pipe(sass())
        .pipe(concat('all.css'))
        .pipe(gulp.dest(export_style.css));
});

gulp.task('js', function() {
    return gulp.src([import_style.jquery, import_style.bootstrap_js, import_style.system_js, import_style.my_js])
        .pipe(concat('all.js'))
        .pipe(gulp.dest(export_style.js));
});

gulp.task('font', function() {
    return gulp.src([import_style.font])
        .pipe(gulp.dest(export_style.font));
});

gulp.task('watch', function(){
    gulp.watch(import_style.my_css, ['css']);
    gulp.watch(import_style.my_js, ['js']);
    gulp.watch(import_style.my_ts, ['ts']);
});

gulp.task('default', ['css', 'js', 'font', 'ts']);

Về cơ bản thì gulp chia ra làm các task để làm việc, để chạy mỗi task thì ta chỉ cần gõ gulp tên-task. Ví dụ như muốn chạy task js của tôi thì chỉ cần gulp js là được. Các bạn sẽ thấy tôi có task watch chứa các task còn lại, thật ra đây là một task sẽ theo dõi sự thay đổi của các task khác và tự động cập nhật, bạn sẽ không phải chạy lại từng task khi có cập nhật. Rất tiện phải không nào .

Các bạn có thể tham khảo thêm tại npm và gulp