Build your code with Gulp

Gulp is the streaming build system. Gulp’s use of streams and code-over-configuration makes for a simpler and more intuitive build.

I didn’t use Gulp or Grunt before. Today, I hear about it and decide to use it on my project. What I write here is not a tutorial, it just what I do with Gulp.

1. Install

- NodeJS: To install Gulp we must have node installed. Nodejs can be installed from here http://nodejs.org/

- Gulp: We should install gulp globally

$ npm install -g gulp

 2. Using Gulp in project

First, jump to your project folder.

$ cd /path/to/your/project

Install gulp and gulp-util in your project as devDepencies. Before it you should have package.json file in your project or init it by npm init

$ npm install --save-dev gulp gulp-util

–save-dev will let npm add gulp and gulp-util into devDepencies of file package.json

Create file gulpfile.js  at your project root with bellow simple content:

var gulp = require('gulp');
var gutil = require('gulp-util');

gulp.task('default', function(){
  // place code for your default task here
});

Run gulp

$ gulp

 3. Do more with gulp

Above is just some step to get started with gulp. You can find here  https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

I want do more with gulp in my project, such as minify JS code, build LESS code to CSS… Let install some gulp plugins and write some simple code.

Gulp plugins can be found here: http://gratimax.github.io/search-gulp-plugins/

As my requirement I will install gulp-less, gulp-uglify and gulp-jshint.

$ npm install --save-dev gulp-less gulp-uglify gulp-jshint

Now, we create (make) some tasks for gulp by writing code.

var gulp = require('gulp');
var gutil = require('gulp-util');
var jshint = require('gulp-jshint');
var less = require('gulp-less');
var uglify = require('gulp-uglify');

// jshint task
gulp.task('jshint', function(){
  gulp.src('./js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

// Minify JS code
gulp.task('minify', function(){
  gulp.src('./js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'));
});

// Convert less to css
gulp.task('less', function(){
  gulp.src('./less/*.less')
    .pipe(less())
    .pipe(gulp.dest('./dist/css'));
});

gulp.task('default', function(){
  // Run default tasks
  gulp.run('jshint', 'minify', 'less');

  // Watch for JS files changing
  gulp.watch('./js/*.js', function(){
    gulp.run('jshint', 'minify');
  });

  // Watch for Less files changing
  gulp.watch('./less/*.less', function(){
    gulp.run('less');
  });
});

There are 4 gulp tasks and they can be called by commands:

$ gulp jshint

$ gulp minify

$ gulp less

$ gulp

 Task jshint

This task will check all JS file in folder /js and report error.

Task minify

This task will get all JS files in folder /js , minifies them and save to folder /dist/js

Task less

This task will convert all LESS files in folder /less to CSS and save to folder /dist/css

Task default

This task will run 3 above tasks and add watching for JS, LESS files. If JS files in folder /js change, it will run task jshint and minify. The same with LESS file in folder /less.

 Wrapping UP

After all, we can:

- Install NodeJS

- Install Gulp and its plugins

- Create Gulp tasks for our project

This is the first time I using gulp, if you have any info or ideal about gulp feel free to comment and let me know. Very thank you for your comments.

 

  • Build your code with Gulp
  • Quản lý các gói thư viện phía client site bằng Bower

    Thời gian trước, có người nói với tôi rằng nên sử dụng Bower để cài đặt những gói thư viện js, css phía client site của một plugin tôi đang phát triển. Tôi cũng chỉ ậm ừ qua, và nghĩ rằng không cần thiết lắm bởi vì hiện tại những thư viện đó vẫn đang chạy tốt.

    Vậy tại sao hôm nay tôi lại giới thiệu về bower cho các bạn, đơn giản vì anh bạn đó của tôi đã sử dụng bower cho dự án của mình. Khi anh ta gởi source code cho tôi nó không hề có các thư viện nào như jquery, angulajs, boostrap… và anh ta bảo tôi cài vào đi.

    Lúc đó tôi mới mày mò lên các trang web để tải về các thư viện từ jquery, angularjs, boostrap …. rồi copy nó vào thư mục code.

    - Không! Không cần phải làm như vậy.

    Anh ta nói. “Chỉ cần sử dụng bower install “. Và quả nhiên, bower đã tự động cài hết các gói thư viện cho tôi. Thật tuyệt vời!

    bower-logo

     

    Continue Reading…

  • Quản lý các gói thư viện phía client site bằng Bower
  • Viết chức năng upload bằng ajax với jquery và javascript chay

    Trong bài viết này, tôi sẽ chỉ ra hai cách để tạo ajax upload. Cách thứ nhất sử dụng Jquery cùng với plugin Form Plugin của nó và cách thứ hai dành cho bạn nào muốn mày mò vọc code để tự mình viết riêng phần upload chỉ dùng javacript. Ở bài viết này, tôi sử dụng PHP để viết phần server.

    File xử lý server

    Để cho đơn giản, nhiệm vụ của file phía server ở đây chỉ bắt file được upload lên, lưu vào thư mục upload  và trả về thông tin của file. Continue Reading…

  • Viết chức năng upload bằng ajax với jquery và javascript chay
  • Bắt sự kiện kích chuột bên ngoài một phần tử và kiểm tra phần tử ẩn/hiện bằng JQuery

    Ngày hôm nay, trong khi đang làm, tôi bắt gặp 2 trường hợp cần giải quyết với jquery. Trường hợp thứ nhất là bắt sự kiện khi người dùng kích chuột bên ngoài một phần tử và trường hợp thứ hai là kiểm tra một phần tử có đang hiển thị hay không.

    Cách giải quyết hai trường hợp này cũng khá đơn giản, nhưng tôi nghĩ nõ cũng sẽ làm ta mất một số thời gian nếu như chưa biết. Vì vậy tôi sẽ chia sẽ hai thủ thuật này ở đây.

    Bắt sự kiện kích chuột bên ngoài một phần tử

    Giả sử tôi có một phần tử có id là click-me  và tôi cần bắt sự kiện kích chuột lên nó hoặc kích chuột bên ngoài nó để có những xử lý khác nhau. Đoạn code ngắn dưới đây sẽ giải quyết vấn đề đó: Continue Reading…

  • Bắt sự kiện kích chuột bên ngoài một phần tử và kiểm tra phần tử ẩn/hiện bằng JQuery
  • Kiểm tra một phần tử tồn tại bằng JQuery

    Trong khi sử dụng JQuery, có nhiều trường hợp tôi tự hỏi làm sao để kiểm tra một phần tử có tồn tại hay không. Chẳng hạn như div có id là “exist” đã có hay chưa.

    Ngay khi nảy ra câu hỏi tôi nghĩ ngay đến một cách kiểm tra đơn giản:

    if ($('#exist')) {
      console.log('exist');
    }

    Nhưng thực tế thì cách trên hoàn toàn sai bởi vì khi sử dụng $()  nó luôn trả về một đối tượng cho dù không tồn tại phần tử ta muốn xác định thì nó cũng sẽ trả về một đối tượng rỗng.  Vì vậy điều kiện trong câu lệnh if  sẽ luôn luôn đúng. Continue Reading…

  • Kiểm tra một phần tử tồn tại bằng JQuery
  • Xóa 1 phần tử trong mảng bằng Javascript

    Khi lập trình với javascript và một vài ngôn ngữ khác, có một thao tác tưởng chừng rất đơn giản nhưng lại luôn khiến tôi bối rối về cách thực hiện nó. Đó chính là Xóa một phần tử trong mảng.

    Javascript: Splice

    Trong javascript, để xóa một phần tử trong mảng ta có thể dùng hàm splice()

    var a = ['say', 'sua', 'com'];
    a.splice(0,1); // Xóa 1 phần tử tại vị trí 0
    console.log(a); // => a = ['sua', 'com']

    Chúng ta có thể kết hợp splice()  cùng với indexOf()  để xóa phần tử dựa vào giá trị của nó:

    var a = ['say', 'sua', 'com'];
    var deleteElement = 'sua';
    
    var i = a.indexOf(deleteElement);
    if (i != -1) {
        a.splice(i,1);
    }
    
    console.log(a); // => ['say', 'com']

    Nếu các bạn muốn thực hiện thêm nhiều thao tác với mảng các bạn có thể tham khảo thư viện underscore như ở bài viết Xử lý mảng với underscore

    Tóm lại: để xóa một phần tử trong mảng ta có thể dùng array.splice(vị trí cần xóa, 1)

  • Xóa 1 phần tử trong mảng bằng Javascript
  • Đổi đối tượng JQuery sang DOM

    Trong đối tượng JQuery nó đã có chứa thành phần DOM. Để lấy được thành phần DOM từ đối tượng JQuery ta có thể sử dụng phương thức get() .

    Ví dụ ta có một danh sách như sau :

    <ul>
      <li>say</li>
      <li>sua</li>
    </ul>

    Nếu như đối tượng JQuery chỉ có một thành phần DOM ta có thể dùng 2 cách lấy:

    $(‘ul’).get(0)  hoặc $(‘ul’)[0]

    Nếu đối tượng JQuery có nhiều thành phần DOM, để lấy hết tất cả ta sử dụng:

    $(‘li’).get()

    Ví dụ:

  • Đổi đối tượng JQuery sang DOM
  • [Fun script] Bắt google đọc tiếng Anh liên tục cho mình nghe

    Đã từ lâu lắm rồi tôi hay sử dụng Google translate, và có thói quen những từ mới tôi thường hay nhấn vào nút phát âm để nghe nó đọc như thế nào. Khi nghe tôi thường hay nhấn đi nhấn lại nhiều lần để nghe cho rõ.

    Và hôm nay cũng vậy, tuy nhiên tôi chợt nghĩ làm sao để có thể nghe liên tục tiếng phát âm mà không phải nhấn liên tục nhiều lần nhỉ. Vậy là tôi quyết định viết một đoạn JS vui vui để thực hiện công việc đó và bây giờ tôi muốn chia sẻ nó cho các bạn đọc để giải trí.

    Ở đây tôi sẽ lấy từ “hello” để làm ví dụ, đoạn code chạy được trên trình duyệt Chrome.

    Việc đầu tiên, tôi cần phải biết nguồn của file âm thanh đó là gì, khi mở chương tình debug của Chrome lên tôi bắt được đoạn link như sau.

    http://translate.google.com/translate_tts?ie=UTF-8&q=hello&tl=en&total=1&idx=0&textlen=5&prev=input

    Ở đoạn link trên có 2 tham số quan trọng:

    • q=hello : Ta sẽ thay chữ hello này bằng những chữ khác ta muốn nghe phát âm
    • textlen=5: Tham số này là độ dài của chữ ta muốn nghe (độ dài của hello = 5)

    Như vậy tôi đã có được đường dẫn của file âm thanh, tiếp theo tôi sẽ dùng JS để tạo ra một đối tượng Audio và yêu cầu nó phát âm thanh từ đoạn link trên. Continue Reading…

  • [Fun script] Bắt google đọc tiếng Anh liên tục cho mình nghe
  • Trích xuất dữ liệu web bằng PHP với PQLite

    Đã bao giờ bạn muốn trích xuất thông tin từ một trang web bằng PHP, chẳng hạn như giá cổ phiếu, giá vàng, nội dung bài báo… công việc đầu tiên là bạn sẽ đọc nội dung của trang web đó rồi tìm đến phần tử chứa nội dung cần lấy. Hẳn các bạn đã từng thử nhiều cách bằng hàm tìm chuỗi hoặc dùng biểu thức chính quy và bạn thấy nó thật phức tạp, hoặc nếu trên trang web đó có thay đổi lại cấu trúc thì chúng ta cũng phải rất vất vã để sửa lại hàm lấy thông tin của mình.

    Và rồi bạn tự hỏi rằng, ước gì mình có thể thao tác với nội dung trang web đó đơn giản như bạn đã làm với JQuery, bạn có thể lấy các thẻ bằng ID hoặc là class của nó.

    Và đây, tôi xin giới thiệu đến cho các bạn một thư viện PHP có thể giúp bạn làm việc với các phần tử HTML đơn giản như các bạn đang làm với Jquery. Các bạn có thể đi qua từng phần tử, lấy nội dung của nó, thậm chí có thể thay đổi nội dung bên trong của 1 phần tử, thay đổi class,…

    PQlite sẽ giúp chúng ta làm phần khó.

    Thay vì trình bày chi tiết về nó, tôi sẽ cùng với các bạn làm một chức năng nho nhỏ như sau:

    Đây là trang web chúng ta sẽ cùng nhau lấy dữ liệu:

    http://hcm.24h.com.vn/ttcb/giavang/giavang.php

    Nội dung tôi muốn lấy ở đây là bảng giá vàng. Các bạn dùng Chrome mở trang web lên, rồi kích chuột phải vào bảng giá vàng, chọn “Inspect Element” để coi nội dung.

    Ta có thể thấy bảng giá vàng ở đây là một table  với class là tb-giaVang . Thường thì để lấy chính xác nội dung của một phần tử ta nên dựa vào ID của nó bởi vì ID được đặt là định danh duy nhất, nhưng ở đây bảng giá vàng lại không có ID, tuy nhiên khi kiểm tra class tb-giaVang  cũng là duy nhất nên chúng ta có thể dựa vào nó để lấy giá trị của bảng giá vàng được. Continue Reading…

  • Trích xuất dữ liệu web bằng PHP với PQLite
  • Javascript Hoisting là gì?

    Khi thao tác với các biến trong javascript, nếu không để ý bạn sẽ rất dễ gặp phải một sự nhầm lần khó hiểu như ví dụ dưới đây. Mình không rõ nó là lỗi hay là đặc thù của ngôn ngữ javascript, nhưng dù sao cũng rất khó chấp nhận nó một cách thoải mái.

    Chúng ta hãy cùng nhau chạy đoạn code sau:

    var myName = "saysua";
    alert(myName);

    Dĩ nhiên kết quả nhận được sẽ là một hộp thoại thông báo với dòng chữ “saysua” (Run).

    Tiếp tục thêm một function cho đoạn code trên:

    var myName = "saysua";
    
    function say() {
        alert(myName);
    }
    
    say();

    Tất nhiên kết cũng giống như đoạn code trên (Run). Vẫn chưa có điều gì đặc biệt ở đây cả. Giá trị của biến myName  vẫn được xuất hiện khi gọialert .

    Bây giờ nếu ta thêm một khai báo biến myName vào hàm say()  ngay sau câu lệnh alert  thì kết quả sẽ thế nào. Hẳn bạn sẽ nghĩ rằng, không có gì thay đổi cả. Dòng thông báo cũ vẫn xuất hiện?

    var myName = "saysua";
    
    function say() {
        alert(myName);
        var myName = "saysua.com";
    }
    
    say();

    Ah, không phải vậy. Bảng thông báo vẫn xuất hiện, nhưng nó báo rằng biến myName  undefined (Run). Điều gì đã xảy ra vậy? Rõ ràng chúng ta đã khai báo biến myName  ngay từ đầu?

    Đó chính là vì Hoisting. Continue Reading…

  • Javascript Hoisting là gì?