Gulp를 사용하여 다음을 수행하려고합니다.
- 3 개의 특정 자바 스크립트 파일을 가져 와서 연결 한 다음 결과를 파일 (concat.js)에 저장합니다.
- 이 연결된 파일을 가져 와서 uglify / minify 한 다음 결과를 다른 파일 (uglify.js)에 저장합니다.
지금까지 다음 코드가 있습니다.
var gulp = require('gulp'),
gp_concat = require('gulp-concat'),
gp_uglify = require('gulp-uglify');
gulp.task('js-fef', function(){
return gulp.src(['file1.js', 'file2.js', 'file3.js'])
.pipe(gp_concat('concat.js'))
.pipe(gp_uglify())
.pipe(gulp.dest('js'));
});
gulp.task('default', ['js-fef'], function(){});
그러나 uglify 작업이 작동하지 않거나 어떤 이유로 파일이 생성되지 않습니다.
이렇게하려면 어떻게해야합니까?
답변
gulp-rename
‘uglification’전에 먼저 연결된 파일 을 사용 하고 출력 해야한다는 것이 밝혀졌습니다 . 코드는 다음과 같습니다.
var gulp = require('gulp'),
gp_concat = require('gulp-concat'),
gp_rename = require('gulp-rename'),
gp_uglify = require('gulp-uglify');
gulp.task('js-fef', function(){
return gulp.src(['file1.js', 'file2.js', 'file3.js'])
.pipe(gp_concat('concat.js'))
.pipe(gulp.dest('dist'))
.pipe(gp_rename('uglify.js'))
.pipe(gp_uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['js-fef'], function(){});
에서 오는 grunt
그것은 약간 처음에는 혼란하지만 지금은 의미가 있었다. 나는 그것이 gulp
멍청한 사람들에게 도움이되기를 바랍니다 .
소스 맵이 필요한 경우 업데이트 된 코드는 다음과 같습니다.
var gulp = require('gulp'),
gp_concat = require('gulp-concat'),
gp_rename = require('gulp-rename'),
gp_uglify = require('gulp-uglify'),
gp_sourcemaps = require('gulp-sourcemaps');
gulp.task('js-fef', function(){
return gulp.src(['file1.js', 'file2.js', 'file3.js'])
.pipe(gp_sourcemaps.init())
.pipe(gp_concat('concat.js'))
.pipe(gulp.dest('dist'))
.pipe(gp_rename('uglify.js'))
.pipe(gp_uglify())
.pipe(gp_sourcemaps.write('./'))
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['js-fef'], function(){});
옵션 및 구성에 대한 자세한 내용은 gulp-sourcemaps 를 참조하십시오 .
답변
내 gulp 파일은 최종 컴파일 된 번들 min.js를 생성하므로 누군가에게 도움이되기를 바랍니다.
//Gulpfile.js
var gulp = require("gulp");
var watch = require("gulp-watch");
var concat = require("gulp-concat");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");
var del = require("del");
var minifyCSS = require("gulp-minify-css");
var copy = require("gulp-copy");
var bower = require("gulp-bower");
var sourcemaps = require("gulp-sourcemaps");
var path = {
src: "bower_components/",
lib: "lib/"
}
var config = {
jquerysrc: [
path.src + "jquery/dist/jquery.js",
path.src + "jquery-validation/dist/jquery.validate.js",
path.src + "jquery-validation/dist/jquery.validate.unobtrusive.js"
],
jquerybundle: path.lib + "jquery-bundle.js",
ngsrc: [
path.src + "angular/angular.js",
path.src + "angular-route/angular-route.js",
path.src + "angular-resource/angular-resource.js"
],
ngbundle: path.lib + "ng-bundle.js",
//JavaScript files that will be combined into a Bootstrap bundle
bootstrapsrc: [
path.src + "bootstrap/dist/js/bootstrap.js"
],
bootstrapbundle: path.lib + "bootstrap-bundle.js"
}
// Synchronously delete the output script file(s)
gulp.task("clean-scripts", function (cb) {
del(["lib","dist"], cb);
});
//Create a jquery bundled file
gulp.task("jquery-bundle", ["clean-scripts", "bower-restore"], function () {
return gulp.src(config.jquerysrc)
.pipe(concat("jquery-bundle.js"))
.pipe(gulp.dest("lib"));
});
//Create a angular bundled file
gulp.task("ng-bundle", ["clean-scripts", "bower-restore"], function () {
return gulp.src(config.ngsrc)
.pipe(concat("ng-bundle.js"))
.pipe(gulp.dest("lib"));
});
//Create a bootstrap bundled file
gulp.task("bootstrap-bundle", ["clean-scripts", "bower-restore"], function () {
return gulp.src(config.bootstrapsrc)
.pipe(concat("bootstrap-bundle.js"))
.pipe(gulp.dest("lib"));
});
// Combine and the vendor files from bower into bundles (output to the Scripts folder)
gulp.task("bundle-scripts", ["jquery-bundle", "ng-bundle", "bootstrap-bundle"], function () {
});
//Restore all bower packages
gulp.task("bower-restore", function () {
return bower();
});
//build lib scripts
gulp.task("compile-lib", ["bundle-scripts"], function () {
return gulp.src("lib/*.js")
.pipe(sourcemaps.init())
.pipe(concat("compiled-bundle.js"))
.pipe(gulp.dest("dist"))
.pipe(rename("compiled-bundle.min.js"))
.pipe(uglify())
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest("dist"));
});
답변
솔루션 사용 gulp-uglify
, gulp-concat
하고 gulp-sourcemaps
. 이것은 내가 작업중인 프로젝트에서 가져온 것입니다.
gulp.task('scripts', function () {
return gulp.src(scripts, {base: '.'})
.pipe(plumber(plumberOptions))
.pipe(sourcemaps.init({
loadMaps: false,
debug: debug,
}))
.pipe(gulpif(debug, wrapper({
header: fileHeader,
})))
.pipe(concat('all_the_things.js', {
newLine:'\n;' // the newline is needed in case the file ends with a line comment, the semi-colon is needed if the last statement wasn't terminated
}))
.pipe(uglify({
output: { // http://lisperator.net/uglifyjs/codegen
beautify: debug,
comments: debug ? true : /^!|\b(copyright|license)\b|@(preserve|license|cc_on)\b/i,
},
compress: { // http://lisperator.net/uglifyjs/compress, http://davidwalsh.name/compress-uglify
sequences: !debug,
booleans: !debug,
conditionals: !debug,
hoist_funs: false,
hoist_vars: debug,
warnings: debug,
},
mangle: !debug,
outSourceMap: true,
basePath: 'www',
sourceRoot: '/'
}))
.pipe(sourcemaps.write('.', {
includeContent: true,
sourceRoot: '/',
}))
.pipe(plumber.stop())
.pipe(gulp.dest('www/js'))
});
이 결합하고 찜질 모든 scripts
라는 파일로, 풋를 all_the_things.js
. 파일은 특수한 줄로 끝납니다.
//# sourceMappingURL=all_the_things.js.map
브라우저가 해당 맵 파일을 찾도록 지시하며이 파일도 기록합니다.
답변
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('create-vendor', function () {
var files = [
'bower_components/q/q.js',
'bower_components/moment/min/moment-with-locales.min.js',
'node_modules/jstorage/jstorage.min.js'
];
return gulp.src(files)
.pipe(concat('vendor.js'))
.pipe(gulp.dest('scripts'))
.pipe(uglify())
.pipe(gulp.dest('scripts'));
});
연결 프로세스 후 파일을 저장 한 다음 uglify하고 다시 저장해야하므로 솔루션이 작동하지 않습니다. concat과 uglify 사이에서 파일 이름을 바꿀 필요가 없습니다.
답변
2015 년 6 월 10 일 : 작성자의 메모 gulp-uglifyjs
:
DEPRECATED : 이 플러그인은 Gulp-concat을 사용하는 대신 Uglify를 사용하여 파일을 연결하기 때문에 블랙리스트에 올랐습니다. 이는 “한 가지를해야합니다”패러다임을 깨뜨립니다. 이 플러그인을 만들었을 때 소스 맵을 gulp와 함께 사용할 수있는 방법이 없었지만 이제는 동일한 목표를 달성하는 gulp-sourcemaps 플러그인이 있습니다. gulp-uglifyjs는 여전히 훌륭하게 작동하며 Uglify 실행을 매우 세밀하게 제어 할 수 있습니다. 다른 옵션이 현재 존재한다는 사실을 알려드립니다.
2015년 2월 18일 : gulp-uglify
와 gulp-concat
멋지게 작품 모두 gulp-sourcemaps
지금. 에 대한 newLine
옵션을 올바르게 설정했는지 확인하십시오 gulp-concat
. 나는 추천한다 \n;
.
원래 답변 (2014 년 12 월) : 대신 gulp-uglifyjs 를 사용하십시오 . gulp-concat
반드시 안전하지는 않습니다. 후행 세미콜론을 올바르게 처리해야합니다. gulp-uglify
또한 소스 맵을 지원하지 않습니다. 다음은 내가 작업중인 프로젝트의 일부입니다.
gulp.task('scripts', function () {
gulp.src(scripts)
.pipe(plumber())
.pipe(uglify('all_the_things.js',{
output: {
beautify: false
},
outSourceMap: true,
basePath: 'www',
sourceRoot: '/'
}))
.pipe(plumber.stop())
.pipe(gulp.dest('www/js'))
});
답변
비슷한 작업을 수행하기 위해 아래 구성을 사용하고 있습니다.
var gulp = require('gulp'),
async = require("async"),
less = require('gulp-less'),
minifyCSS = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
gulpDS = require("./gulpDS"),
del = require('del');
// CSS & Less
var jsarr = [gulpDS.jsbundle.mobile, gulpDS.jsbundle.desktop, gulpDS.jsbundle.common];
var cssarr = [gulpDS.cssbundle];
var generateJS = function() {
jsarr.forEach(function(gulpDSObject) {
async.map(Object.keys(gulpDSObject), function(key) {
var val = gulpDSObject[key]
execGulp(val, key);
});
})
}
var generateCSS = function() {
cssarr.forEach(function(gulpDSObject) {
async.map(Object.keys(gulpDSObject), function(key) {
var val = gulpDSObject[key];
execCSSGulp(val, key);
})
})
}
var execGulp = function(arrayOfItems, dest) {
var destSplit = dest.split("/");
var file = destSplit.pop();
del.sync([dest])
gulp.src(arrayOfItems)
.pipe(concat(file))
.pipe(uglify())
.pipe(gulp.dest(destSplit.join("/")));
}
var execCSSGulp = function(arrayOfItems, dest) {
var destSplit = dest.split("/");
var file = destSplit.pop();
del.sync([dest])
gulp.src(arrayOfItems)
.pipe(less())
.pipe(concat(file))
.pipe(minifyCSS())
.pipe(gulp.dest(destSplit.join("/")));
}
gulp.task('css', generateCSS);
gulp.task('js', generateJS);
gulp.task('default', ['css', 'js']);
샘플 GulpDS 파일은 다음과 같습니다.
{
jsbundle: {
"mobile": {
"public/javascripts/sample.min.js": ["public/javascripts/a.js", "public/javascripts/mobile/b.js"]
},
"desktop": {
'public/javascripts/sample1.js': ["public/javascripts/c.js", "public/javascripts/d.js"]},
"common": {
'public/javascripts/responsive/sample2.js': ['public/javascripts/n.js']
}
},
cssbundle: {
"public/stylesheets/a.css": "public/stylesheets/less/a.less",
}
}