javascript - gulp 中的//@codekit-prepend ""相当于什么？

Question

我正在尝试 gulp。从codekit我习惯了编写

 // @codekit-prepend "foo.js"
 // @codekit-prepend "bar.js"

连接js文件。

如何用 gulp 做到这一点？

这是我正在构建的 gulpfile:

//*********** IMPORTS *****************
var gulp = require('gulp');
var less = require('gulp-less');
var gutil = require('gulp-util');
var rename = require("gulp-rename");
var map = require("map-stream");
var livereload = require("gulp-livereload");
var concat = require("gulp-concat");
var uglify = require('gulp-uglify');
var watch = require("gulp-watch");
var minifyHTML = require('gulp-minify-html');
global.errorMessage = '';

//Configuration - Change me
var lessFiles = [
    {
        watch: 'source/less/*.less',
        less: 'source/less/master.less',
        output: 'build/css/',
        name: 'all.css',
    }
];
var jsFiles = [
    {
        watch: 'spurce/js/*.js',
        output: 'build/js/',
        name: 'all.js',
        nameMin: 'all.min.js',
    }
];
var htmlFiles = [
    {
        watch: 'source/*.html',
        output: 'build/',
    }
];
//END configuration


gulp.task('watch', function () {
    for (var i in lessFiles) {
        lessWatch(lessFiles[i]);
    }


    for (var j in jsFiles) {
        scriptWatch(jsFiles[j]);
    }

    for (var k in htmlFiles) {
        htmlWatch(htmlFiles[k]);
    }

});

function htmlWatch (htmlData) {
    var opts = {comments:false,spare:true};

    gulp.src(htmlData.watch)
    .pipe(watch(htmlData.watch, function() {
        gulp.src(htmlData.watch)
        .pipe(minifyHTML(opts))
        .pipe(gulp.dest(htmlData.output))
        .pipe(livereload());
    }));
}


function lessWatch(lessData) {
    gulp.src(lessData.watch)
    .pipe(watch(lessData.watch, function() {
        gulp.src(lessData.less)
        .pipe(less(lessOptions))
        .on('error', function(err) {
                gutil.log(err.message);
                gutil.beep();
                global.errorMessage = err.message + " ";
        })
        .pipe(checkErrors())
        .pipe(rename(lessData.name))
        .pipe(gulp.dest(lessData.output))
        .pipe(livereload());
    }));
}

function scriptWatch(jsData) {
    gulp.src(jsData.watch)
    .pipe(watch(jsData.watch, function() {
        gulp.src(jsData.watch)
        .pipe(concat(jsData.name))
        .pipe(gulp.dest(jsData.output))
        .pipe(uglify({outSourceMap: false}))
        .pipe(rename(jsData.nameMin))
        .pipe(gulp.dest(jsData.output));
    }));

}

gulp.task('default', ['watch']);

/// Defaults yo
var lessOptions = {
    'style': 'compressed'
};

// Does pretty printing of less errors
var checkErrors = function (obj) {
    function checkErrors(file, callback, errorMessage) {
        if (file.path.indexOf('.less') != -1) {
                file.contents  = new Buffer("\
                    body * { white-space:pre; }\
                    body * { display: none!important; }\
                    body:before {\
                        white-space:pre;\
                        content: '"+ global.errorMessage.replace(/(\\)/gm,"/").replace(/(\r\n|\n|\r)/gm,"\\A") +"';\
                    }\
                    html{background:#ccf!important; }\
                ");
        }
        callback(null, file);
    }
    return map(checkErrors);
};

Answer 1

您应该看到gulp-imports 。我想这就是你想要的。

用法

//include("bar.js");

加:如果您想处理修改后的文件和父文件(导入者)，请参阅我的fork:gulp-js-inheritance .

加2:如果你想要gulp中基于codekit的其他功能，请参阅:codekit-gulp .