“个人网站”开发实战 第四课

Gulp

讲师：翟路佳

本节课程大纲

1. 批处理工具？
2. Gulp 简介
3. 编写 gulpfile.js

批处理工具

何为批处理工具

将一系列命令，按一定顺序执行，即为批处理。

例子：

1. *.bat
2. Ant
3. 脚本

为何要使用批处理工具

1. 越来越多的中间代码
2. 越来越多的设备适配
3. 其它语言早有成熟经验

Gulp

官网

安装

npm install gulp-cli -g
npm install gulp --save-dev

帮助

gulp --help

为何选用 Gulp

1. 使用方便，插件丰富
2. 配置文件是纯 JS
3. 运行效率高

gulpfile.js

var gulp = require('gulp');
var pug = require('gulp-pug');
var less = require('gulp-less');
var minifyCSS = require('gulp-csso');

gulp.task('html', function(){
  return gulp.src('client/templates/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('build/html'))
});

gulp.task('css', function(){
  return gulp.src('client/templates/*.less')
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'))
});

gulp.task('default', [ 'html', 'css' ]);

执行

gulp [task]

编写 gulpfile.js

作业

1. 参考教程，编写 gulpfile.js
2. 并调试通过
3. 阅读 Gulp 文档

扩展阅读

1. Grunt