zoukankan      html  css  js  c++  java

  • gulp plugins 插件介绍

    目录 [−]

    1. gulp API
      1. gulp.src(globs[, options])
      2. gulp.dest(path[, options])
      3. gulp.task(name[, deps], fn)
      4. gulp.watch(glob [, opts], tasks), gulp.watch(glob [, opts, cb])
    2. Recipes
    3. gulp-browserify
    4. gulp-jshint
    5. gulp-jslint
    6. imagemin
    7. glup-sass
    8. browser-sync
    9. gulp-handlebars
    10. gulp-usemin
    11. gulp-uglify
    12. gulp-sourcemaps
    13. 其它一些关注度高的gulp插件
      1. gulp-inject
      2. gulp-header
      3. gulp-filter
      4. gulp-changed
      5. gulp-bower
      6. gulp-if
      7. gulp-replace
      8. gulp-shell
      9. gulp-exec
      10. gulp-install
      11. gulp-rename
      12. gulp-ignore
      13. gulp-util
      14. gulp-clean
      15. gulp-concat
      16. gulp-wrap
      17. gulp-declare
    14. 更多的文章

    Gulp是一个构建工具， 功能类似grunt, 以及Java生态圈的ant, maven， gradle等。 其它的javascript生态圈的构建工具可以参考: List of JavaScript Build Tools
    它采用了一种流式处理的方式， 编写起来简单直观。 相对于其它javascript构建工具， 母亲啊它的star数是仅次于grunt，流行度还是比较高的。
    通过"代码优于配置" (code over configuration), 通过javascript编写构建任务， 充分利用javascript生态圈的组件， 可以实现简单灵活的任务管理。 通过node stream的方式，直接在内存中管道式处理流，不必缓存到硬盘上， 节省构建时间。

    Gulp介绍请参考我转载的另一篇文章： Building With Gulp
    另外有一篇很好的入门文章： Getting started with gulp, 繁体版, 简体中文硬翻版

    从我的实践上来看， gulp要比grunt更好的管理构建过程。 编写简单，条理清晰，功能强大，学习无曲线。

    Gulp是基于Node.js构建的，因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript（或者CoffeeScript）里。 Gulp本身虽然不能完成很多任务，但它有大量插件可用，开发者可以访问插件页面或者在npm搜索gulpplugin或者gulpfriendly就能看到。例如，有些插件可以用来执行JSHint、编译CoffeeScript，执行Mocha测试，甚至更新版本号。现在有大约980个左右的插件可以使用。你可以到http://gulpjs.com/plugins/或者http://npmsearch.com/?q=keywords:gulpplugin查找所需的软件。
    面对如此众多的插件， 想要全部了解并灵活运用它们几乎是不可能的事情。 实际开发中多参考别的项目的实现， 根据自己的需求寻找合适的插件， 总结并开发自己的插件， 逐步积累对gulp的认识。

    本文列出常用的几个插件， 并在将来的开发中更新此文作为记录文档。 多个插件和grunt的插件功能类似。

    首先介绍以下gulp本身的API， 相当的简洁，只有几个函数。

    gulp API

    流(Stream)能够通过一系列的小函数来传递数据，这些函数会对数据进行修改，然后把修改后的数据传递给下一个函数。
    看一个简单例子：

    1
    2
    3
    4
    5
    6
    7
    8
    var gulp = require('gulp'),
    uglify = require('gulp-uglify');
     
    gulp.task('minify', function () {
    gulp.src('js/app.js')
    .pipe(uglify())
    .pipe(gulp.dest('build'))
    });

    gulp.src()函数用字符串匹配一个文件或者文件的编号（被称为“glob”）,然后创建一个对象流来代表这些文件，接着传递给uglify()函数，它接受文件对象之后返回有新压缩源文件的文件对象，最后那些输出的文件被输入gulp.dest()函数，并保存下来。

    想了解更多的关于node stream方面的知识，可以访问stream-handbook。 stream-handbook中文翻译

    gulp.src(globs[, options])

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

    1
    2
    3
    4
    gulp.src('client/templates/*.jade')
    .pipe(jade())
    .pipe(minify())
    .pipe(gulp.dest('build/minified_templates'));

    gulp.dest(path[, options])

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

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

    使用orchestrator定义任务。

    1
    2
    3
    gulp.task('somename', function() {
    // Do stuff
    });

    deps 是任务数组，在执行本任务时数组中的任务要执行并完成。

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

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

    Recipes

    下面的文章总结的几个常见问题的解决方案，非常有参考价值。
    https://github.com/gulpjs/gulp/tree/master/docs/recipes#recipes

    gulp-browserify

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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插件。
    jshint是一个侦测javascript代码中错误和潜在问题的工具。

    用法:

    1
    2
    3
    4
    5
    6
    7
    8
    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-jslint

    jslint是一个javascript代码质量检测工具。
    gulp-jslint是它的gulp插件。

    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
    var gulp = require('gulp');
    var jslint = require('gulp-jslint');
     
    // build the main source into the min file
    gulp.task('default', function () {
    return gulp.src(['source.js'])
     
    // pass your directives
    // as an object
    .pipe(jslint({
    // these directives can
    // be found in the official
    // JSLint documentation.
    node: true,
    evil: true,
    nomen: true,
     
    // you can also set global
    // declarations for all source
    // files like so:
    global: [],
    predef: [],
    // both ways will achieve the
    // same result; predef will be
    // given priority because it is
    // promoted by JSLint
     
    // pass in your prefered
    // reporter like so:
    reporter: 'default',
    // ^ there's no need to tell gulp-jslint
    // to use the default reporter. If there is
    // no reporter specified, gulp-jslint will use
    // its own.
     
    // specify whether or not
    // to show 'PASS' messages
    // for built-in reporter
    errorsOnly: false
    }))
     
    // error handling:
    // to handle on error, simply
    // bind yourself to the error event
    // of the stream, and use the only
    // argument as the error object
    // (error instanceof Error)
    .on('error', function (error) {
    console.error(String(error));
    });
    });

    imagemin

    imagemin是压缩图片的工具。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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

    sass是编写css的一套语法。 使用它的预处理器可以将sass语法的css处理成css格式。
    glup-sass语法：

    1
    2
    3
    4
    5
    6
    7
    8
    var gulp = require('gulp');
    var sass = require('gulp-sass');
     
    gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./css'));
    });

    gulp-ruby-sass是另外一款sass的gulp插件， 比glup-sass慢，但是更稳定，功能更多。 它使用compass预处理sass文件，所以你需要安装ruby和compass。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var gulp = require('gulp');
    var sass = require('gulp-ruby-sass');
     
    gulp.task('default', function () {
    return gulp.src('src/scss/app.scss')
    .pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
    .on('error', function (err) { console.log(err.message); })
    .pipe(gulp.dest('dist/css'));
    });

    browser-sync

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    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-handlebars

    handlebars是一个模版引擎库， ember.js用它作为前端的模版引擎。
    gulp-handlebars编译handlebars文件。

    用法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var handlebars = require('gulp-handlebars');
    var wrap = require('gulp-wrap');
    var declare = require('gulp-declare');
    var concat = require('gulp-concat');
     
    gulp.task('templates', function(){
    gulp.src('source/templates/*.hbs')
    .pipe(handlebars())
    .pipe(wrap('Handlebars.template(<%= contents %>)'))
    .pipe(declare({
    namespace: 'MyApp.templates',
    noRedeclare: true, // Avoid duplicate declarations
    }))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('build/js/'));
    });

    gulp-usemin

    用来将HTML 文件中（或者templates/views）中没有优化的script 和stylesheets 替换为优化过的版本。
    usemin 暴露两个内置的任务，分别为：

    • useminPrepare 为将指定文件中的 usemin block 转换为单独的一行（优化版本）准备配置。这通过为每个优化步骤生成名为 generated 的子任务来完成。
    • usemin 使用优化版本替换 usemin 块，如果在磁盘上可以找到 revisioned 版本，则替换为 revisioned 版本。

    usemin块如下定义：

    1
    2
    3
    <!-- build:<pipelineId>(alternate search path) <path> -->
    ... HTML Markup, list of script / link tags.
    <!-- endbuild -->

    如

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!-- build:css style.css -->
    <link rel="stylesheet" href="css/clear.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <!-- endbuild -->
     
    <!-- build:js js/lib.js -->
    <script src="../lib/angular-min.js"></script>
    <script src="../lib/angular-animate-min.js"></script>
    <!-- endbuild -->
     
    <!-- build:js1 js/app.js -->
    <script src="js/app.js"></script>
    <script src="js/controllers/thing-controller.js"></script>
    <script src="js/models/thing-model.js"></script>
    <script src="js/views/thing-view.js"></script>
    <!-- endbuild -->
     
    <!-- build:remove -->
    <script src="js/localhostDependencies.js"></script>
    <!-- endbuild -->

    gulp-usemin用法如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var usemin = require('gulp-usemin');
    var uglify = require('gulp-uglify');
    var minifyHtml = require('gulp-minify-html');
    var minifyCss = require('gulp-minify-css');
    var rev = require('gulp-rev');
     
    gulp.task('usemin', function() {
    gulp.src('./*.html')
    .pipe(usemin({
    css: [minifyCss(), 'concat'],
    html: [minifyHtml({empty: true})],
    js: [uglify(), rev()]
    }))
    .pipe(gulp.dest('build/'));
    });

    gulp-uglify

    uglify是一款javascript代码优化工具，可以解析，压缩和美化javascript。
    用法：

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

    gulp-sourcemaps

    在现代javascript开发中， JavaScript脚本正变得越来越复杂。大部分源码（尤其是各种函数库和框架）都要经过转换，才能投入生产环境。
    常见的转换情况：

    • 压缩，减小体积。
    • 多个文件合并，减少HTTP请求数。
    • 其他语言编译成JavaScript。最常见的例子就是CoffeeScript。
      这三种情况，都使得实际运行的代码不同于开发代码，除错（debug）变得困难重重。
      Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var gulp = require('gulp');
    var plugin1 = require('gulp-plugin1');
    var plugin2 = require('gulp-plugin2');
    var sourcemaps = require('gulp-sourcemaps');
     
    gulp.task('javascript', function() {
    gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(plugin1())
    .pipe(plugin2())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
    });

    其它一些关注度高的gulp插件

    gulp-inject

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!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
    11
    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-header

    为管道中的文件增加header。

    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
    var header = require('gulp-header');
     
    gulp.src('./foo/*.js')
    .pipe(header('Hello'))
    .pipe(gulp.dest('./dist/')
     
    gulp.src('./foo/*.js')
    .pipe(header('Hello <%= name %> ', { name : 'World'} ))
    .pipe(gulp.dest('./dist/')
     
    gulp.src('./foo/*.js')
    .pipe(header('Hello ${name} ', { name : 'World'} ))
    .pipe(gulp.dest('./dist/')
     
     
    //
     
     
    var pkg = require('./package.json');
    var banner = ['/**',
    ' * <%= pkg.name %> - <%= pkg.description %>',
    ' * @version v<%= pkg.version %>',
    ' * @link <%= pkg.homepage %>',
    ' * @license <%= pkg.license %>',
    ' */',
    ''].join(' ');
     
    gulp.src('./foo/*.js')
    .pipe(header(banner, { pkg : pkg } ))
    .pipe(gulp.dest('./dist/')

    相应的还有一个gulp-footer插件。

    gulp-filter

    筛选vinyl stream中的文件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var gulp = require('gulp');
    var jscs = require('gulp-jscs');
    var gulpFilter = require('gulp-filter');
     
    gulp.task('default', function () {
    // create filter instance inside task function
    var filter = gulpFilter(['*', '!src/vendor']);
     
    return gulp.src('src/*.js')
    // filter a subset of the files
    .pipe(filter)
    // run them through a plugin
    .pipe(jscs())
    // bring back the previously filtered out files (optional)
    .pipe(filter.restore())
    .pipe(gulp.dest('dist'));
    });

    gulp-changed

    只允许改变的文件通过管道。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var gulp = require('gulp');
    var changed = require('gulp-changed');
    var ngmin = require('gulp-ngmin'); // just as an example
     
    var SRC = 'src/*.js';
    var DEST = 'dist';
     
    gulp.task('default', function () {
    return gulp.src(SRC)
    .pipe(changed(DEST))
    // ngmin will only get the files that
    // changed since the last time it was run
    .pipe(ngmin())
    .pipe(gulp.dest(DEST));
    });

    gulp-bower

    执行bower安装。

    1
    2
    3
    4
    5
    6
    7
    var gulp = require('gulp');
    var bower = require('gulp-bower');
     
    gulp.task('bower', function() {
    return bower()
    .pipe(gulp.dest('lib/'))
    });

    gulp-if

    有条件的执行任务

    gulp-replace

    字符串替换插件。

    1
    2
    3
    4
    5
    6
    7
    var replace = require('gulp-replace');
     
    gulp.task('templates', function(){
    gulp.src(['file.txt'])
    .pipe(replace(/foo(.{3})/g, '$1foo'))
    .pipe(gulp.dest('build/file.txt'));
    });

    gulp-shell

    可以执行shell命令

    gulp-exec

    exec插件

    gulp-install

    安装npm和bower包， 如果它们的配置文件存在的话。

    1
    2
    3
    4
    5
    var install = require("gulp-install");
     
    gulp.src(__dirname + '/templates/**')
    .pipe(gulp.dest('./'))
    .pipe(install());

    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
    24
    25
    26
    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-ignore

    忽略管道中的部分文件。

    gulp-util

    提供一些辅助方法。

    gulp-clean

    提供clean功能。

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

    gulp-wrap

    将一个lodash模版包装成流内容。

    gulp-declare

    安全的声明命名空间，设置属性。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var declare = require('gulp-declare');
    var concat = require('gulp-concat');
     
    gulp.task('models', function() {
    // Define each model as a property of a namespace according to its filename
    gulp.src(['client/models/*.js'])
    .pipe(declare({
    namespace: 'MyApp.models',
    noRedeclare: true // Avoid duplicate declarations
    }))
    .pipe(concat('models.js')) // Combine into a single file
    .pipe(gulp.dest('build/js/'));
    });

    更多的文章

    1. gulp-cheatsheet
    2. 9个优秀的gulp插件
    3. gulp插件开发指导
  • 相关阅读:
    Solr4：加入中文分词IKAnalyzer2012 FF
    Solr4：Hello World级别示范
    Solr4：Tomcat7下面配置Solr
    Java：XML篇，使用DOM读取并解析XML
    Solr4：加入中文分词mmseg4j
    Java：XML篇，使用SAX读取并解析XML数据
    SSIS包如何动态指定文件路径
    如何定时执行SSIS包
    用户控件使用事件
    用户控件使用事件与调用页面交互
  • 原文地址：https://www.cnblogs.com/chris-oil/p/5127110.html
Copyright © 2011-2022 走看看