相対パスではなくルートパスを生成するgulpファイル

踊り子

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 / '))

その完全なスクラッチャーと私はそれを修正する方法を理解できません-誰かが助けを提供して私の正気を救うことができますか?

Sven Schoenung

デフォルトでgulp-concat-cssurl()、CSSファイル参照をリベースしようとします。プロジェクトの説明を参照してください。

cssファイルを連結し、@ importステートメントをバブリングし(標準に従って)、オプションでURLをリベースし、ローカルの@importステートメントをインライン化します。

これは、連結されたファイルが別の場所にある場合に役立ちますが、参照されるファイルはそのままです。次に、参照を調整する必要があります。

あなたの場合、minimgタスクは参照された画像を同じ場所にコピーするので、CSSファイルの相対パスは同じままです。

したがって、次のrebaseUrlsオプションを指定して、URLリベースを無効にできます。

.pipe(concatCss("sitebundle.css", {rebaseUrls:false}))

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

C ++で相対パスでファイルを開く方法は?

分類Dev

asp.netMVCがデータベースに相対パスをフルパスではなく保存する

分類Dev

Pythonコマンドパスではなく、実行されたファイルへの相対パスを使用して他のファイルをインポートするにはどうすればよいですか?

分類Dev

Java 7では、「相対パス」でファイルをリストします

分類Dev

私は、実行時に相対パスからファイルを参照するにはどうすればよいではなく、コンパイル時

分類Dev

サーバールートではなく、サイトルートからの相対パスを返す

分類Dev

Web APIで静的ファイルの相対パスを処理する方法は?

分類Dev

相対パスでファイルを開く

分類Dev

相対パスでファイルを検索してコピーする

分類Dev

coutステートメントで相対ファイルパスを表示する方法

分類Dev

gnuplotスクリプト:実行ディレクトリではなくファイルに相対的なパスを使用しますか?

分類Dev

パスを知らなくても、他の相対フォルダからインポートするにはどうすればよいですか?

分類Dev

File.OpenRead()が実行可能ファイルに相対パスを追加するのはなぜですか?

分類Dev

Windowsで完全な相対パスを使用してファイルをコピーする

分類Dev

春の相対パスファイルインポートの開始パスは何ですか

分類Dev

LINUXコマンドラインを使用して絶対パスと相対パスでクラスリストファイルを一覧表示する方法は?

分類Dev

Gulp:srcパスの相対的なサブフォルダーに出力ファイルを書き込む

分類Dev

Selenium IDE、アップロードされるファイルのパスは相対パスになります。

分類Dev

インポートを絶対パスではなく相対パスに修正

分類Dev

インクルードファイルの相対パスを作成する

分類Dev

ローカルファイルの相対パスが絶対パスに変換されるのはなぜですか?

分類Dev

ReactNativeには相対パスファイルが必要です

分類Dev

絶対ファイルパスを相対パスに変換する

分類Dev

Python glob、os、相対パス、ファイル名をリストにする

分類Dev

相対パスでファイルをロード

分類Dev

ルビーのファイルへの相対パスを取得する

分類Dev

M3Uプレイリストのファイルへの相対パスを指定する適切な方法は何ですか?

分類Dev

ファイルの相対パスを取得するC#

分類Dev

.vbsファイルに相対パスを作成する

Related 関連記事

  1. 1

    C ++で相対パスでファイルを開く方法は?

  2. 2

    asp.netMVCがデータベースに相対パスをフルパスではなく保存する

  3. 3

    Pythonコマンドパスではなく、実行されたファイルへの相対パスを使用して他のファイルをインポートするにはどうすればよいですか?

  4. 4

    Java 7では、「相対パス」でファイルをリストします

  5. 5

    私は、実行時に相対パスからファイルを参照するにはどうすればよいではなく、コンパイル時

  6. 6

    サーバールートではなく、サイトルートからの相対パスを返す

  7. 7

    Web APIで静的ファイルの相対パスを処理する方法は?

  8. 8

    相対パスでファイルを開く

  9. 9

    相対パスでファイルを検索してコピーする

  10. 10

    coutステートメントで相対ファイルパスを表示する方法

  11. 11

    gnuplotスクリプト:実行ディレクトリではなくファイルに相対的なパスを使用しますか?

  12. 12

    パスを知らなくても、他の相対フォルダからインポートするにはどうすればよいですか?

  13. 13

    File.OpenRead()が実行可能ファイルに相対パスを追加するのはなぜですか?

  14. 14

    Windowsで完全な相対パスを使用してファイルをコピーする

  15. 15

    春の相対パスファイルインポートの開始パスは何ですか

  16. 16

    LINUXコマンドラインを使用して絶対パスと相対パスでクラスリストファイルを一覧表示する方法は?

  17. 17

    Gulp:srcパスの相対的なサブフォルダーに出力ファイルを書き込む

  18. 18

    Selenium IDE、アップロードされるファイルのパスは相対パスになります。

  19. 19

    インポートを絶対パスではなく相対パスに修正

  20. 20

    インクルードファイルの相対パスを作成する

  21. 21

    ローカルファイルの相対パスが絶対パスに変換されるのはなぜですか?

  22. 22

    ReactNativeには相対パスファイルが必要です

  23. 23

    絶対ファイルパスを相対パスに変換する

  24. 24

    Python glob、os、相対パス、ファイル名をリストにする

  25. 25

    相対パスでファイルをロード

  26. 26

    ルビーのファイルへの相対パスを取得する

  27. 27

    M3Uプレイリストのファイルへの相対パスを指定する適切な方法は何ですか?

  28. 28

    ファイルの相対パスを取得するC#

  29. 29

    .vbsファイルに相対パスを作成する

ホットタグ

アーカイブ