BinaryDevelop
  1. ホーム
  2. ガルプ

gulpfile.jsの落とし穴 - インジェクション (gulp-inject,gulp-wiredep)

2022-02-25 03:38:26

今日、私はピットに遭遇し、長い間私を突き刺し、もともと帝国の呼吸は難しいですが、またそのような場所に、本当に耐えられない、敗者プログラムの猿は突然死を誘発しやすい、リスクの高い職業を言ったことは不思議ではない、私は私の人生は糸でぶら下がって作る要因を言う次。

<スパン まず、私は初心者、ルーキー、負け犬、唾を吐くことを歓迎します。

落とし穴1：ファイルインジェクション   ガルプインジェクト  プラグインの説明: css と WebComponent のインジェクションプラグイン、つまり index.html ファイルへのインジェクション（公式説明）
個人的な理解：このプラグインを使用すると、すべてのCSSとjsをindex.htmlページに追加でき、手動で追加する必要はありません。

<スパン

<ブロッククオート <script src=". /bower_components/jquery/dist/jquery.js"></script>
<link src="css/index.css"/> <ブロッククオート

gulpの世界では、こんな風に手で書かなくてもいいんです、コピペすればいい、早いって言う人もいます、100個くらいコピーして順番に名前をつけて、後でメンテナンスしなきゃいけない、ずっと変えなきゃいけない、考えてみてください、10代です。私の構造ディレクトリはこんな感じです。

<スパン

<ブロッククオート ガルパデモ
| bower_components
| ディスト
|スタイル
|script
| 画像
-- index.html
| node_modules
| src
| アプリ
| アセット
| コモン
| 少ない
-- index.html
-- bower.json
-- gulpfile.js
-- package.json <ブロッククオート プロジェクトでは、このように書きました。

<スパン 

var inject = require('gulp-inject');
// inject injects
gulp.task('index', function() {
gulp.src('. /dist/index.html') // get the data for that file 
.pipe(inject(gulp.src(['. /dist/scripts/app.js'], { // let the fetched stream be injected once: inject the specified file into the stream file (i.e. write the externally linked code from app.js to index.html)
read: false // don't worry about the meaning for now
}), relative: true // don't worry about it for now
})
.pipe(gulp.dest('. /dist')); // stream the manipulated file to the dist folder 
})

アクションを直接gulpタスクにすれば動作します。 --> dist -->index.html を開くと、もちろん中に余分なものが入っています。 大前提として、「このような場合に備えて、このような場合にも対応できるような 

<! -- inject:js -->
<! -- endinject --></span>

<スパン <スパン <スパン これは、ページがインジェクト・データ・ストリームをどこに置けばいいのか分からないときに起こる現象です。 

<!DOCTYPE html>
<html lang="en" ng-app="failfairy">
<head>
<meta charset="UTF-8">
<title>gulp test</title>
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
</head>
<body>
<! -- inject:js -->
<script src="scripts/app.js"></script>
<! -- endinject -->
</body>
</html>

<スパン

見やすくするために、別のプラグインで

<スパン 落とし穴2：ローカルサービスの構築  ブラウザシンク
以前は、ネイティブnodeでビルドするのが苦痛ということしか知りませんでしたが、その後  ブラウザシンク  このプラグインは素晴らしいです、それはそれ以上のことをしますが、私はちょうどそれが私にサービスを構築するために必要です。
<スパン 公式サイトには、詳しい説明があります。 http://www.browsersync.cn
私が使っている機能 このプラグインは、グローバルディレクトリを持つローカルサーバを作成します。  localhost:gulpDemo caojf$ です。  グローバルに、アクセスする場合は、ブラウザのアドレスバーに入力します。 ローカルホスト:3000/dist 

var browserSync = require('browser-sync').create(); // Static server
gulp.task('browser-sync', function() {
      browserSync.init({
            server: {
                  baseDir: ". /" //This is the point of the pitfall, I was setting . /dist later found that the injected plug-in reported a 404 error, remember that ah, must not be the same as me two
            }
      });
});

<スパン <スパン <スパン <スパン <スパン そして、もう少しだけ  <スパン bower_components  フォルダ内のコンポーネントをインジェクションするということは、このように解釈すべきではありません。  インジェクト  私も以前、このような失敗をしたことがありますが、時間の無駄ですし、スマートではありません。
インターネット上では、bowerがいかに素晴らしいかについて語られていますが、基本的に、どのプラグインを利用して  index.html  ファイルを作成します。
落とし穴3：bowerでインジェクトされた特定のプラグイン  ワイデップ
<スパン 公式の説明です。  <スパン Bowerの依存関係をあなたのソースコードに配線します。
<スパン 私の理解では bower.jsonにある全てのサインイン済みプラグインを指定されたファイル（index.html）に注入します。 

var wiredep = require('wiredep').stream;
gulp.task('bower', function () {  
  gulp.src('. /src/index.html')
    .pipe(wiredep({
      optional: 'configuration',
      goes: 'here'
    }))
    .pipe(gulp.dest('. /dist'));
});

<スパン <スパン <スパン <スパン を実行した結果、このようなものが生成されます。 

<!DOCTYPE html>
<html lang="en" ng-app="failfairy">
<head>
<meta charset="UTF-8">
<title>gulp test</title>
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<! -- bower:js -->
<script src=". /bower_components/jquery/dist/jquery.js"></script>
<script src=". /bower_components/angular/angular.js"></script>
<script src=". /bower_components/bootstrap/dist/js/bootstrap.js">
<! -- endbower -->
</head>
<body>
<! -- inject:js -->
<script src="scripts/app.js"></script>
<! -- endinject -->
</body>
</html>

<スパン <スパン <スパン <スパン 見やすいようにまとめてみました：お楽しみに

<スパン <スパン <スパン <スパン <スパン 

<!DOCTYPE html>
<html lang="en" ng-app="failfairy">
<head>
	<meta charset="UTF-8">
	<title>gulp test</title>
	<meta name="description" content="">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
    <! -- bower:js -->
    <script src=". /bower_components/jquery/dist/jquery.js"></script>
    <script src=". /bower_components/angular/angular.js"></script>
    <script src=". /bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <! -- endbower -->
</head>
<body>
    <! -- inject:js -->
    <script src="scripts/app.js"></script>
    <! -- endinject -->
</body>
</html>






// *****************************
// gulpfile.js 
// *****************************
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
connect = require('gulp-connect');
browserSync = require('browser-sync').create();
inject = require('gulp-inject');
wiredep = require('wiredep').stream;

// style
gulp.task('styles', function() {
return gulp.src('src/**/app.scss')
.pipe(sass('src/**/app.scss', {
style: 'expanded'
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/styles'))
.pipe(rename({
suffix: '.min'
}))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({
message: 'Styles task complete'
}));
});


// Script
gulp.task('scripts', function() {
return gulp.src('. /src/**/app.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('app.js'))
.pipe(gulp.dest('. /dist/scripts'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('. /dist/scripts'))
.pipe(notify({
message: 'Scripts task complete'
}));
});

// Images
gulp.task('images', function() {
return gulp.src('src/assets/**/*')
.pipe(cache(imagemin({
optimizationLevel: 3,
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
.pipe(notify({
message: 'Images task complete'
}));
});


// Static server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: ". /"
}
});
});

// Clean up
gulp.task('clean', function() {
return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {
read: false
})
.pipe(clean());
});

// inject
gulp.task('index', function() {
gulp.src('. /dist/index.html')
.pipe(inject(gulp.src(['. /dist/scripts/app.js'], {
read: false
}), {
relative: true
}))
.pipe(gulp.dest('. /dist'));
});

// injection of the bower element '. /bower_components/angular/*.js', 
gulp.task('bower', function () { 
gulp.src('. /src/index.html')
.pipe(wiredep({
optional: 'configuration',
goes: 'here'
}))
.pipe(gulp.dest('. /dist'));
});

// Prepare for running
gulp.task('startFun', ['bower', 'styles', 'scripts', 'images'], function() {
gulp.start('index');
});

// add an injection
gulp.task('startInject', ['startFun'], function() {
gulp.start('browser-sync');
});

// Run the project and start the service
gulp.task('default', ['clean'], function() {
gulp.start('startInject');
});






























    <! -- inject:js -->
    <script src="scripts/app.js"></script>
    <! -- endinject -->
</body>
</html>

<スパン <スパン <スパン <スパン 

// *****************************
// gulpfile.js 
// *****************************
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
connect = require('gulp-connect');
browserSync = require('browser-sync').create();
inject = require('gulp-inject');
wiredep = require('wiredep').stream;

// style
gulp.task('styles', function() {
return gulp.src('src/**/app.scss')
.pipe(sass('src/**/app.scss', {
style: 'expanded'
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/styles'))
.pipe(rename({
suffix: '.min'
}))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({
message: 'Styles task complete'
}));
});


// Script
gulp.task('scripts', function() {
return gulp.src('. /src/**/app.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('app.js'))
.pipe(gulp.dest('. /dist/scripts'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('. /dist/scripts'))
.pipe(notify({
message: 'Scripts task complete'
}));
});

// Images
gulp.task('images', function() {
return gulp.src('src/assets/**/*')
.pipe(cache(imagemin({
optimizationLevel: 3,
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
.pipe(notify({
message: 'Images task complete'
}));
});


// Static server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: ". /"
}
});
});

// Clean up
gulp.task('clean', function() {
return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {
read: false
})
.pipe(clean());
});

// inject
gulp.task('index', function() {
gulp.src('. /dist/index.html')
.pipe(inject(gulp.src(['. /dist/scripts/app.js'], {
read: false
}), {
relative: true
}))
.pipe(gulp.dest('. /dist'));
});

// injection of the bower element '. /bower_components/angular/*.js', 
gulp.task('bower', function () { 
gulp.src('. /src/index.html')
.pipe(wiredep({
optional: 'configuration',
goes: 'here'
}))
.pipe(gulp.dest('. /dist'));
});

// Prepare for running
gulp.task('startFun', ['bower', 'styles', 'scripts', 'images'], function() {
gulp.start('index');
});

// add an injection
gulp.task('startInject', ['startFun'], function() {
gulp.start('browser-sync');
});

// Run the project and start the service
gulp.task('default', ['clean'], function() {
gulp.start('startInject');
});

<スパン <スパン

<スパン <スパン

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します