2014-09-21 2 views
0

나는 꿀꺽 삼키는 것을 시험하고있다. 코드 킷에서 나는 쓰는 데 익숙하다.gulp에서 // codekit-prepend ""에 해당하는 것은 무엇입니까?

// @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); 
}; 

답변

1

너는 gulp-imports을보아야한다. 나는 네가 원하는대로 생각한다.

사용

//include("bar.js"); 

플러스 : gulp-js-inheritance : 당신은 수정 된 파일과 부모 파일 (수입)를 처리 할 경우, 내 포크를 참조하십시오.

플러스 2 : 코드 키트를 기반으로 다른 기능을 원한다면 codekit-gulp을 참조하십시오.

+0

힌트를 보내 주셔서 감사합니다. – Urs

0

좋아, 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 스타일의 방법은 아마 사용합니다 꿀꺽 꿀꺽 거리는 소리 포함 : https://www.npmjs.org/package/gulp-include

관련 문제