站内搜索：
首页 >> 前端 >> 内容
gulp插件

时间：2017/7/1 9:27:00

gulp插件。

gulp API

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

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, 可以按照管道模式给其它插件处理。

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定义任务。

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()调用， 递归的建立模块依赖图。

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代码中错误和潜在问题的工具。

用法:

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插件。

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是压缩图片的工具。

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语法：

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。

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 是一个自动化测试辅助工具，可以帮你在网页文件变更时自动载入新的网页。
用法：

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文件。

用法：

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 暴露两个内置的任务，分别为：

  • 上一篇：es6语法-3
  • 下一篇：String对象方法
    • 用户评论
    相关文章
    返回顶部

    易笔记手机版