我的gulp学习笔记及总结

本文略有过时,建议阅读:

https://github.com/Platform-CUF/use-gulp

https://github.com/lisposter/gulp-docs-zh-cn

入门图表

github_gulp-cheatsheet

中文版直接下载地址: pdf1 pdf2

一些gulp api

gulp.src(globs[, options])

根据globs提供的文件列表,得到一个stream,按照管道模式给其它插件处理

gulp.dest(path[, options])

将管道中的数据写入到文件夹。

gulp.task(name[, deps], fn)

1
2
3
4
5
6
7
8
9
10
gulp.task('taskname', ['task1', 'task2'], function() {
  // Do stuff
});


//命令工具输入 gulp是执行 default任务
// Default task
gulp.task('default', ['首先执行的任务(可选)'], function() {
    gulp.start(['taskname', 'taskname2']); //开始并行执行任务呀
});

定义任务. deps 是任务数组,在执行本任务时数组中的任务要执行并完成

gulp.watch(glob [, opts], tasks)
gulp.watch(glob [, opts, cb])

监控文件.当监控的文件有所改变时执行特定的任务.

1
2
3
4
5
6
7
8
9
10
11
// Watch
gulp.task('watch', function() {
    // Watch .scss files
    gulp.watch('css/**/*', ['css']);
    // Watch .js files
    gulp.watch('js/**/*.js', ['js']);
    // Create LiveReload server
    livereload.listen();
    // Watch any files in dist/, reload on change
    gulp.watch(['public/**']).on('change', livereload.changed);
});

一些插件

  • 官方英文文档
  • gulp-browserify

    browserify可以为浏览器编译node风格的遵循commonjs的模块。 它搜索文件中的require()调用， 递归的建立模块依赖图。

1
2
3
4
5
6
7
8
9
10
11
12
var gulp = require('gulp');
var browserify = require('gulp-browserify');
// Basic usage
gulp.task('scripts', function() {
    // Single entry point to browserify
    gulp.src('src/js/app.js')
        .pipe(browserify({
          insertGlobals : true,
          debug : !gulp.env.production
        }))
        .pipe(gulp.dest('./build/js'))
});
  • gulp-jshint

    gulp的jshint插件

1
2
3
4
5
6
7
var jshint = require('gulp-jshint');
var gulp   = require('gulp');
gulp.task('lint', function() {
  return gulp.src('./lib/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('YOUR_REPORTER_HERE'));
});
  • gulp-imagemin

    压缩图片的工具

1
2
3
4
5
6
7
8
9
10
11
12
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
gulp.task('default', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist'));
});
  • glup-sass
1
2
3
4
5
6
7
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});
  • browser-sync

    BrowserSync 是一个自动化测试辅助工具,可以帮你在网页文件变更时自动载入新的网页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var gulp = require('gulp');
var browserSync = require('browser-sync');
// Static server
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});
// or...
gulp.task('browser-sync', function() {
    browserSync({
        proxy: "yourlocal.dev"
    });
});

  • proxy-middleware

    作为http proxy,转发特定的请求

  • gulp-usemin

    用来将HTML 文件中（或者templates/views）中没有优化的script 和stylesheets 替换为优化过的版本

1
2
3
4
5
6
7
8
9
10
11
12
//html
<!-- build:<pipelineId>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

<!-- build:css css/user.css -->
<link rel="stylesheet" href="css/style.css">
<!-- endbuild -->

<!-- build:js js/user.js -->
<script src="js/ajax.js"></script>
<!-- endbuild -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// gulpfile.js
var rev = require('gulp-rev');
var usemin = require('gulp-usemin');
gulp.task('usemin', function() {
    return gulp.src('index.html')
        .pipe(
            usemin({
                //rev() 文件带hash  'concat' 文件没有hash
                css: [minifycss(), 'concat'],
                html: [minifyhtml({
                    empty: true
                })],
                js: [uglify(), rev()]
            })
        )
        .pipe(
            gulp.dest('public/')
        );
});
  • gulp-uglify

    javascript代码优化工具，可以解析，压缩和美化javascript

1
2
3
4
5
6
var uglify = require('gulp-uglify');
gulp.task('compress', function() {
  gulp.src('lib/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
});
  • gulp-inject

    可以注入css,javascript和web组件,不需手工更新ndex.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
  <title>My index</title>
  <!-- inject:css -->
  <!-- endinject -->
</head>
<body>
  <!-- inject:js -->
  <!-- endinject -->
</body>
</html>
1
2
3
4
5
6
7
8
9
10
// gulpfile.js
var gulp = require('gulp');
var inject = require("gulp-inject");
gulp.task('index', function () {
  var target = gulp.src('./src/index.html');
  // It's not necessary to read the files (will speed up things), we're only after their paths:
  var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});
  return target.pipe(inject(sources))
    .pipe(gulp.dest('./src'));
});
  • gulp-rename

    改变管道中的文件名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var rename = require("gulp-rename");
// rename via string
gulp.src("./src/main/text/hello.txt")
    .pipe(rename("main/text/ciao/goodbye.md"))
    .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md
// rename via function
gulp.src("./src/**/hello.txt")
    .pipe(rename(function (path) {
        path.dirname += "/ciao";
        path.basename += "-goodbye";
        path.extname = ".md"
    }))
    .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/hello-goodbye.md
// rename via hash
gulp.src("./src/main/text/hello.txt", { base: process.cwd() })
    .pipe(rename({
        dirname: "main/text/ciao",
        basename: "aloha",
        prefix: "bonjour-",
        suffix: "-hola",
        extname: ".md"
    }))
    .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/bonjour-aloha-hola.md
  • gulp-clean

    提供clean功能

1
2
3
4
5
6
var gulp = require('gulp');  
var clean = require('gulp-clean');
gulp.task('clean', function () {  
  return gulp.src('build', {read: false})
    .pipe(clean());
});
  • gulp-concat

    连接合并文件

1
2
3
4
5
6
var concat = require('gulp-concat');
gulp.task('scripts', function() {
  gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'))
});

一个完整的gulpfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/*!
 * gulp
 * $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
 */
 
// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');
 
// Styles
gulp.task('styles', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'expanded', }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});
 
// Scripts
gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});
 
// Images
gulp.task('images', function() {
  return gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});
 
// Clean
gulp.task('clean', function(cb) {
    del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});
 
// Default task
gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts', 'images');
});
 
// Watch
gulp.task('watch', function() {
 
  // Watch .scss files
  gulp.watch('src/styles/**/*.scss', ['styles']);
 
  // Watch .js files
  gulp.watch('src/scripts/**/*.js', ['scripts']);
 
  // Watch image files
  gulp.watch('src/images/**/*', ['images']);
 
  // Create LiveReload server
  livereload.listen();
 
  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);
 
});

参考文档

gulp-plugins-introduction/
grunt与gulp比较