Gulp 快速入门

image.png

package.json

{
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-browserify": "^0.5.1",
    "gulp-jade": "^1.1.0"
  }
}

gulpfile.js

var gulp = require('gulp'),
    jade = require('gulp-jade'),
    browserify = require('gulp-browserify')

gulp.task('jade', function () {
    return gulp.src('src/template/**/*.jade')
        .pipe(jade())
        .pipe(gulp.dest('builds/development'))
})


gulp.task('js', function () {
    return gulp.src('src/js/main.js')
        .pipe(browserify({debug: true}))
        .pipe(gulp.dest('builds/development/js'))
})

image.png

logger.js

module.exports = {
    log: function (s) {
        if (console) {
            console.log(s)
        }
    }
}

main.js

var logger = require('./logger')
logger.log("Hello, Browserify!")

index.jade

doctype html
html
head
    title Hello,World

body
    h1 Hello,World
    p This is a jade demo
    script(src='js/main.js')

$ gulp jade
[21:35:30] Using gulpfile ~/17lai/frontend-workflow/gulpfile.js
[21:35:30] Starting 'jade'...
[21:35:30] Finished 'jade' after 89 ms

$ gulp js
[21:35:56] Using gulpfile ~/17lai/frontend-workflow/gulpfile.js
[21:35:56] Starting 'js'...
[21:35:56] Finished 'js' after 84 ms

gulp API 文档

http://www.gulpjs.com.cn/docs/api/

https://github.com/gulpjs/gulp/blob/master/docs/API.md

https://gulpjs.org/