Javascript 如何使用Jadeify和Gulp

首先，我的最终目标是能够将

jade

模板与

backbone

结合使用，但这是我能想到的最佳解决方案

browserify.gulp

//appoligies for including it all.
gulp.task('browserify', function () {
    var bundler = browserify({
        // Required watchify args
        cache: {}, packageCache: {}, fullPaths: true,
        // Specify the entry point of your app
        entries: ['./src/site/js/app.js'],
        // Add file extentions to make optional in your requires
        extensions: ['.js'],
        // Enable source maps!
        debug: true
    });

    var bundle = function () {
        // Log when bundling starts
        bundleLogger.start();

        return bundler
            .transform(require('jadeify'))
            .bundle()
            // Report compile errors
            .on('error', handleErrors)
            // Use vinyl-source-stream to make the
            // stream gulp compatible. Specifiy the
            // desired output filename here.
            .pipe(source('main.js'))
            // Specify the output destination
            .pipe(gulp.dest('./public/js'))
            // Log when bundling completes!
            .on('end', bundleLogger.end);
    };

    if (global.isWatching) {
        bundler = watchify(bundler);
        // Rebundle with watchify on changes.
        bundler.on('update', bundle);
    }

    return bundle();
});

gulp.task('jade', function () {
    return gulp.src('./src/site/views/*.jade')
        .on('error', handleErrors)
        .pipe(jade())
        .pipe(gulp.dest('public/views/templates'));
});

翡翠。大口大口喝

//appoligies for including it all.
gulp.task('browserify', function () {
    var bundler = browserify({
        // Required watchify args
        cache: {}, packageCache: {}, fullPaths: true,
        // Specify the entry point of your app
        entries: ['./src/site/js/app.js'],
        // Add file extentions to make optional in your requires
        extensions: ['.js'],
        // Enable source maps!
        debug: true
    });

    var bundle = function () {
        // Log when bundling starts
        bundleLogger.start();

        return bundler
            .transform(require('jadeify'))
            .bundle()
            // Report compile errors
            .on('error', handleErrors)
            // Use vinyl-source-stream to make the
            // stream gulp compatible. Specifiy the
            // desired output filename here.
            .pipe(source('main.js'))
            // Specify the output destination
            .pipe(gulp.dest('./public/js'))
            // Log when bundling completes!
            .on('end', bundleLogger.end);
    };

    if (global.isWatching) {
        bundler = watchify(bundler);
        // Rebundle with watchify on changes.
        bundler.on('update', bundle);
    }

    return bundle();
});

gulp.task('jade', function () {
    return gulp.src('./src/site/views/*.jade')
        .on('error', handleErrors)
        .pipe(jade())
        .pipe(gulp.dest('public/views/templates'));
});

app.js

//the main angular file
var jamie = require("../views/resultsMini.jade");
console.info(jamie);

//outputs: 
function template(locals) {
    var buf = [];
    var jade_mixins = {};
    var jade_interp;

    buf.push("<div>Results List</div>");;return buf.join("");
}

var jamie=require（../views/resultsMini.jade”）；

jamie

现在是一个函数，它接受局部变量作为参数，并在调用时返回html

比较

---

console.info（jamie）

到

console.info（jamie（{property:'value'}））

我正在使用Jadeify，在主干中像这样吞咽

以下是我的浏览任务：

请注意，在这个任务中根本没有提到Jadeify。我只是向你展示这个任务来清楚地展示它

var gulp          = require('gulp');
var browserify    = require('browserify');
var source          = require('vinyl-source-stream');
var browserify    = require('browserify');
var gulpif          = require('gulp-if');
var connect         = require('gulp-connect');
var streamify     = require('gulp-streamify');
var uglify          = require('gulp-uglify');

var watchify      = require('watchify');
var bundleLogger  = require('../util/bundleLogger');
var handleErrors  = require('../util/handleErrors');
var strip         = require('gulp-strip-debug');
var print         = require("gulp-print");
var datapaths     = require("./datapaths");

gulp.task('js', ['environmentCheck'], function() {

  console.log('GULP: Starting js task');

  var bundler = browserify({
    // Required watchify args
    cache: {}, packageCache: {}, fullPaths: true,
    // Browserify Options
    entries:    ['./core/js/core.js'],
    extensions: ['.coffee', '.hbs'],
    debug:      global.ENV === 'development'
  });

  var bundle = function() 
  {
    bundleLogger.start();

    return bundler
      .bundle()
      .on('error', handleErrors)
      .pipe(source('bundle.js'))
      // remove console.logs and such
      .pipe(gulpif( global.ENV === 'production', streamify( strip() )))
      // uglify JS and obfuscate in produciton mode only
      .pipe(gulpif( global.ENV === 'production', streamify(uglify({ mangle: global.ENV === 'production' }))))
      .pipe(print())
      .pipe(gulp.dest(global.outputDir + datapaths.dataPath + '/js'))
      // .pipe(connect.reload())
      .on('end', bundleLogger.end);
  };

  // if(global.isWatching) {
  //   bundler = watchify(bundler);
  //   bundler.on('update', bundle);
  // }

  return bundle();
});

gulp.task('js_prod', ['setProduction'], function() 
{
  gulp.start('js');
});

在my package.json中，我应用了Jadeify转换

"browserify": {
  "transform": [
    "jadeify"
  ]
},

我的主干视图直接从jade文件导入模板，没有附加任何字符串（package.json中的转换负责其余部分）

然后单击JADE模板，查看主干视图的“templateHelpers”函数传入的变量：

include ../mixins

div.focus-area-element.list-element.single-list-item
    div.inner-content
        div.list-item-actions.absolute-position
            +ui-icon-button('ok', 'fontello', 'save', 'success')
            +ui-icon-button('cancel', 'fontello', 'delete', 'error')

        +ui-icon-list-item('tag', 'ui8')

        +ui-input('text', i18n_tag, title, 'title', true)

---

尽管奇怪的是，这仍然没有解决我的问题：）你这个可爱的男人<代码>“browserify”：{“transform”：[“jadeify”]}，这使它对我起了作用。可以通过package.json文件或JavaScript应用转换。像您那样通过JavaScript进行操作是最好的方法。它允许更轻松地添加选项，并避免弄乱package.json文件。我也改变了我的吞咽任务。