的使用

Question

我正在尝试吞咽。从codekit我习惯写

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

连接js文件。

我如何用gulp做到这一点？

这是我正在建立的gulp文件：

//*********** 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。我想是你想要的。

的使用

[x,y]

加号：如果您要处理修改后的文件和父文件（导入方式），请参阅我的前缀：gulp-js-inheritance。

加2：如果你想在gulp中使用其他功能，请参阅：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

gulp中// @ codekit-prepend“”的等价物是什么？

2 个答案:

的使用