前言：首先需要安裝nodejs。全域性安裝gulp：npm install -g gulp

1、初始化專案:建立專案資料夾，然後在專案下npm init
2、使用gulp構建一個普通web專案，基本需要這些庫（庫有很多，自行選擇），見程式碼1。
程式碼1：

npm install --save-dev gulp del jshint gulp-rename gulp-concat gulp-jshint gulp-uglify gulp-connect gulp-imagemin gulp-minify-css gulp-minify-html gulp-processhtml gulp-autoprefixer
 

3、在專案根目錄建立gulpfile.js檔案，基本套路如程式碼2
程式碼2：

var gulp = require('gulp'),
del = require('del'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
connect = require('gulp-connect'),
imagemin = require('gulp-imagemin'),
minifycss = require
 
('gulp-minify-css'),
minifyhtml = require('gulp-minify-html'),
processhtml = require('gulp-processhtml'),
autoprefixer = require('gulp-autoprefixer');

gulp.task('server', function(){
    connect.server({
        root:['./'],
        port: 7003,
        livereload: true
    });
});
gulp.task('copy', function
 
(){
    gulp.src('*.json')
    .pipe(gulp.dest('dev'))
    .pipe(connect.reload())
});

gulp.task('html', function(){
    gulp.src('*.html')
    .pipe(gulp.dest('dev'))
    .pipe(connect.reload());
});

gulp.task('images', function(){
    gulp.src('img/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dev/img'))
});

gulp.task('scripts', function () {
    gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(gulp.dest('dev/js'))
    .pipe(connect.reload())
});

gulp.task('watch', function () {
    // body...
    gulp.watch(['*.html'], ['html']);
    gulp.watch(['js/*.js'], ['scripts']);
});

gulp.task('dist', function(){
    gulp.src('dev/*.html')
    .pipe(processhtml())
    .pipe(minifyhtml())
    .pipe(gulp.dest('dist'));

    gulp.src('dev/js/*.js')
    .pipe(concat('app.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));

    gulp.src('dev/img/*')
    .pipe(gulp.dest('dist/img'));
});
gulp.task('default', ['server', 'html','images', 'scripts', 'copy', 'watch']);

gulp.src中的路徑要根據實際情況。
4、在命令列執行gulp即可開始開發專案了。