Less、Autoprefixes、Concatinatesファイルを一緒に実行してからすべてを最小化する次のGulpファイルがあります-すべてのless / dev機能は_devフォルダーにあり、コンパイルされたファイルは_webフォルダーにコピーされます。
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var minifyCSS = require('gulp-clean-css');
var less = require('gulp-less');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var liveReload = require('gulp-livereload');
var path = require('path');
var path = require('clean');
var moment = require('moment');
var plumber = require('gulp-plumber');
var jslint = require('gulp-jslint');
var imagemin = require('gulp-imagemin');
var rename = require("gulp-rename");
var concatCss = require('gulp-concat-css');
var concatJs = require('gulp-concat');
//LESS Task
gulp.task('less', function () {
return gulp.src('./_dev/less/main.less')
.pipe(plumber({
errorHandler (err) {
notify.onError('LESS Error: <%= error.message %>')(err)
this.emit('end')
}
}))
.pipe(less())
.pipe(rename("lessed.css"))
.pipe(gulp.dest('./_dev/css/'))
.pipe(notify('Finished: <%= file.relative %>'))
})
//Autoprefixer
gulp.task('autoprefixed', function () {
return gulp.src('./_dev/css/lessed.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(rename("styles.css"))
.pipe(notify('Autoprefixed (' + moment().format('MMM Do h:mm:ss A') + ')'))
.pipe(gulp.dest('./_dev/csscomp/'));
});
//Merge all CSS into one file
gulp.task('concatinate', function () {
return gulp.src(['./node_modules/bootstrap3/dist/css/bootstrap.min.css', './_dev/csscomp/styles.css'])
.pipe(plumber({
errorHandler (err) {
notify.onError('Concat Error: <%= error.message %>')(err)
this.emit('end')
}
}))
.pipe(notify('Concat'))
.pipe(concatCss("sitebundle.css"))
.pipe(gulp.dest('./_web/css/'))
.pipe(notify('finished concatinating'));
});
gulp.task('concatstuff', function () {
return gulp.src(['./node_modules/bootstrap3/dist/css/bootstrap.min.css', './_dev/csscomp/styles.css'])
.pipe(concatCss("sitebundle.css"))
.pipe(gulp.dest('./_web/css/'))
});
//Minify
gulp.task('minify-css', function() {
return gulp.src('./_web/css/sitebundle.css')
.pipe(cleanCSS({debug: true}, function(details) {
console.log(details.name + ': ' + details.stats.originalSize);
console.log(details.name + ': ' + details.stats.minifiedSize);
}))
.pipe(rename("styles.css"))
.pipe(gulp.dest('./_web/css/'))
.pipe(notify('Minified.. ALL DONE'));
});
//Lint JS
gulp.task('scripts', function() {
return gulp.src('./_dev/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
});
//COMPRESS IMAGES
gulp.task('minimg' , function () {
gulp.src('./_dev/images/*')
.pipe(imagemin())
.pipe(gulp.dest('./web/images'))
});
//GULP TASKS
//WATCH TASKS
gulp.task('watch', function() {
livereload.listen();
gulp.watch('./_dev/less/**/*.less', ['less']);
gulp.watch('./_dev/css/lessed.css', ['autoprefixed']);
});
//DEFAULT
gulp.task('default', function () {
gulp.watch('./_dev/less/**/*.less', ['less']);
gulp.watch('./_dev/css/lessed.css', ['autoprefixed']);
gulp.watch('./_dev/csscomp/styles.css', ['concatinate']);
gulp.watch('./_web/css/sitebundle.css', ['minify-css']);
gulp.start('less');
});
パスに問題があります-たとえば、lessファイルクラスでは、次のバックグラウンド宣言があります-
background:url('../images/link.png');
しかし、ファイルが削除された後、ファイルのパスは-
background: url("../../../../_dev/csscomp/images/link.png") no-repeat
gulpファイルからわかるように(ルートに沿ってさまざまなファイル出力を追加して、何が起こっているかを確認しました)、ファイルは、連結タスク(.pipe(gulp.dest( ' ./ web / css / '))
その完全なスクラッチャーと私はそれを修正する方法を理解できません-誰かが助けを提供して私の正気を救うことができますか?
デフォルトでgulp-concat-css
はurl()
、CSSファイルの参照をリベースしようとします。プロジェクトの説明を参照してください。
cssファイルを連結し、@ importステートメントをバブリングし(標準に従って)、オプションでURLをリベースし、ローカルの@importステートメントをインライン化します。
これは、連結されたファイルが別の場所にある場合に役立ちますが、参照されるファイルはそのままです。次に、参照を調整する必要があります。
あなたの場合、minimg
タスクは参照された画像を同じ場所にコピーするので、CSSファイルの相対パスは同じままです。
したがって、次のrebaseUrls
オプションを指定して、URLリベースを無効にできます。
.pipe(concatCss("sitebundle.css", {rebaseUrls:false}))
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加