// @ codekit-prepend“”在gulp中相当于什么？

Question

我正在试饮一口。从我用来编写代码包

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

连接js文件。

我该如何做到这一点吞咽？

这里是我建立的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"); 

加：，如果你要处理的修改的文件和父文件（由进口），看到我的叉：gulp-js-inheritance。

加2：如果你想要其他功能的话，基于codekit，请参阅：codekit-gulp。

Answer 2

好，我知道，在gulpfile变体：

var jsFiles = [ 
    { 
     watch: './source/js/*.js', 
     src: ['./source/js/vendor/waypoints.js', 
      './source/js/vendor/jquery.smooth-scroll.js', 
      './source/js/vendor/hyphenator.min.js', 
      './source/js/vendor/picturefill.min.js', 
      './source/js/vendor/various.js', 
      './source/js/domready.js'], 
     dest: 'build/js/', 
     name: 'all.js', 
     nameMin: 'all.min.js', 
    } 
]; 

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

} 

gulp.task('watch', function() { 

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

}); 

另外，codekit/prepros风格的方式可能会使用gulp-include：https://www.npmjs.org/package/gulp-include