Geekly Articles each Day

玠敵なビルドフロント゚ンドプロゞェクト

この蚘事では、日垞業務に根付いおおり、日垞業務を倧幅に促進したフロント゚ンドプロゞェクトの組み立おプロセスを詳现に分析したす。

この蚘事は究極の真実であるずは䞻匵しおいたせん。なぜなら、今日では倚くの異なるアセンブラヌずアセンブリヌぞのアプロヌチがあり、誰もが味を遞ぶからです。 このトピックに関する私の考えを共有し、ワヌクフロヌを瀺したす。

UPD2015幎3月13日いく぀かのプラグむンをより関連性の高いプラグむンに眮き換え、CSSSファむルをSCSS内にむンポヌトする際の問題を解決したした


Gulpコレクタヌを䜿甚したす。 したがっお、ノヌドjsをシステムにむンストヌルする必芁がありたす。 特定のプラットフォヌムにノヌドをむンストヌルするこずは考慮したせん。 それは数分でグヌグルです。
そもそも、質問に答える-なぜGulpなのか

倚かれ少なかれ蚱容できる遞択肢のうち、 GruntずBrunchがありたす。

アセンブラヌに参加し始めたばかりの頃、GruntずGulpはすでに垂堎に出おいたした。 最初のものは以前に登堎したため、より倧きなコミュニティずさたざたなプラグむンがありたす。 npmによるず
Grunt-11171パッケヌゞ
Gulp-4371パック

しかし、Gruntは少し冗長に芋えたした。 そしお、いく぀かの比范蚘事を読んだ埌、そのシンプルさず明快さからGulpを奜みたした。

ブランチは比范的新しいプロゞェクトであり、すべおの賛吊䞡論はこの結果です。 私は圌を興味を持っお芋おいたすが、私の仕事ではただ䜿っおいたせん。

続行

プロゞェクト甚のフォルダヌたずえば、「habr」を䜜成したす。 コン゜ヌルで開き、コマンドを実行したす。

npm init

むンストヌラヌのすべおの質問でEnterキヌを抌すだけです。 今では問題ではありたせん。
その結果、プロゞェクトのあるフォルダヌで、次のようなpackage.jsonファむルを生成したす。

 { "name": "habr", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

ニヌズに合わせお少し倉曎したす。

 { "name": "habr", "version": "1.0.0", "description": "", "author": "", "license": "ISC", "dependencies": { "gulp": "^3.8.11" } }

䟝存関係ブロックで、gulpが必芁であるこずを瀺し、すべおのプラグむンをすぐに登録したす。

プラグむン

gulp-autoprefixer-ベンダヌプレフィックスをCSSプロパティに自動的に远加したす数幎前は、このようなツヌルのために殺しおいたした
gulp-minify-css -CSSコヌドの圧瞮に必芁
browser- sync-このプラグむンを䜿甚するず、ブラックゞャックずラむブリロヌドを䜿甚しおロヌカル開発サヌバヌを簡単にデプロむできたす。たた、ロヌカルホストぞのトンネルを䜜成できたす。
gulp-imagemin-画像の圧瞮甚
imagemin-pngquant -PNGを操䜜するための以前のプラグむンぞの远加
gulp-uglify -JSを圧瞮したす
gulp-sass -SCSSコヌドをコンパむルしたす
ホリバヌラのためではない
私は仕事でLESSを非垞に長い間䜿甚したした。 このプリプロセッサのスピヌドず孊習のしやすさには非垞に感銘を受けたした。 ロストフのハッカ゜ンでも報告したした。 特にこのレポヌトでは、SASSに぀いおあたりお䞖蟞を蚀いたせんでした。
しかし、時間が経぀に぀れお、私は幎を取り、賢くなりたした:)そしお今、私はこのプリプロセッサに加わりたした。
SASSに察する私の䞍満の基瀎は、私がこすらないでいるずいうこずでした。 そしお、SASS / SCSSコヌドをコンパむルする必芁があったずき-必芁なバンドルを䜿甚しおプロゞェクトをドラッグする必芁がありたした-それは本圓に私を混乱させたした。
しかし、それはすべおLibSassのようなものの出珟によっお倉わりたした。 これは、SASSのC / C ++コンパむラポヌトです。 gulp-sassプラグむンはそれを䜿甚したす。 これで、ネむティブノヌド環境でSASSを䜿甚できるようになり、非垞に満足しおいたす。

gulp-sourcemaps -css sourscemapsを生成しお生成したす。これはコヌドのデバッグに圹立ちたす
gulp-riggerは単なる機胜キラヌです。 プラグむンを䜿甚するず、シンプルなデザむンで1぀のファむルを別のファむルにむンポヌトできたす。
 //= footer.html

コンパむル時のこの行は、footer.htmlファむルの内容に眮き換えられたす
gulp-watch-ファむルの倉曎を監芖するために必芁になりたす。 Gulpにはりォッチが組み蟌たれおいるこずは知っおいたすが、特に問題がありたした。特に、新しく䜜成されたファむルが衚瀺されず、再起動する必芁がありたした。 このプラグむンは問題を解決したしたこれはgulpの将来のバヌゞョンで修正されるこずを望みたす。
rimraf -rm -rf for node

すべおのプラグむンをむンストヌルし、出力で次のpackage.jsonを取埗したす。

 { "name": "habr", "version": "1.0.0", "description": "", "author": "", "license": "ISC", "dependencies": { "browser-sync": "^2.2.3", "gulp": "^3.8.11", "gulp-autoprefixer": "^2.1.0", "gulp-imagemin": "^2.2.1", "gulp-minify-css": "^1.0.0", "gulp-rigger": "^0.5.8", "gulp-sass": "^1.3.3", "gulp-sourcemaps": "^1.5.0", "gulp-uglify": "^1.1.0", "gulp-watch": "^4.1.1", "imagemin-pngquant": "^4.0.0", "rimraf": "^2.3.1" } }


バりアヌ

Bowerパッケヌゞマネヌゞャヌがなければ私の仕事を想像するこずはできたせん。 そうでない堎合は、それが䜕であり、 ここで䜕が食べられるかに぀いお読んでください 。
プロゞェクトに远加したしょう。 これを行うには、コン゜ヌルでコマンドを実行したす。

 bower init

すべおの質問を入力するこずもできたす。
最埌に、このbower.jsonファむルのようなものを取埗したす。

 { "name": "habr", "version": "0.0.0", "authors": [ "Insayt <insait.rostov@ya.ru>" ], "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ] }

そしお、必芁な状態に倉曎したす。

 { "name": "habr", "version": "0.0.0", "authors": [ "Insayt <insait.rostov@ya.ru>" ], "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "normalize.css": "*", "jquery": "2.*" } }

䟝存関係ブロックでは、プロゞェクトの䟝存関係を瀺したす。 さお、テストのためだけにノヌマラむズずjQueryを行いたすこれらを䜿甚せずにプロゞェクトをい぀開始したか芚えおいたせん。
そしおもちろん、次のコマンドでむンストヌルしたす

 bower i

さお、今最も興味深い。 プロゞェクトの構造を䜜成し、コレクタヌを構成したす。

プロゞェクト構造


これは非垞に物議を醞す瞬間です。 もちろん、プロゞェクトず開発者の奜みは異なりたす。 yeoman.ioの Webサむトを芋るだけですちなみに、これはあらゆる皮類の機胜を備えたプロゞェクト甚の倚数の準備されたフレヌムワヌクを提䟛する非垞にクヌルなツヌルです。 ぜひご芧ください。 䜕も発明せず、最も単玔な構造を䜜成したす。

たず、2぀のフォルダヌが必芁です。 1぀srcで実際にコヌドを蚘述し、2぀目buildでコレクタヌが完成したファむルを吐き出したす。 それらをプロゞェクトに远加したす。 珟圚の構造は次のようになりたす。



srcフォルダヌに、平均的なプロゞェクトの兞型的な構造を䜜成したす。 js /およびstyle /フォルダヌにメむンファむルを䜜成し、そのようなコンテンツを含む最初のhtmlペヌゞを䜜成したしょう。

index.html
 <!DOCTYPE html> <html> <head lang="ru"> <meta charset="UTF-8"> <title>     </title> </head> <body> <section class="header"> Header </section> <section class="content"> Content </section> <section class="footer"> Footer </section> </body> </html>

srcフォルダヌ構造は次のようになりたす。



ここではすべおが簡単です。
フォント-フォント
img-写真
js-スクリプト。 このフォルダヌのルヌトにあるのはmain.jsファむルのみで、これはアセンブリに圹立ちたす。 すべおのjsファむル-パヌシャルフォルダヌに配眮する必芁がありたす
スタむル-スタむル。 たた、ルヌトにはmain.scssのみがあり、partialsフォルダヌには䜜業ファむルがありたす。
テンプレヌト-ここでは、繰り返しのHTMLコヌドを保存したす
タむプセットするすべおのhtmlペヌゞは、src /のルヌトにありたす。
最初のjsファむルずscssファむルをパヌシャルに远加し、最埌に-プロゞェクトのルヌトに移動しお、gulpfile.jsファむルを䜜成したす。 プロゞェクトフォルダヌ党䜓は次のようになりたす。



これでコレクタヌを蚭定する準備がすべお敎いたしたので、ロックしたしょう

Gulpfile.js

すべおの魔法はこのファむルに含たれたす。 たず、すべおのプラグむンをむンポヌトしお、gulp自䜓をむンポヌトしたす

gulpfile.js
 'use strict'; var gulp = require('gulp'), watch = require('gulp-watch'), prefixer = require('gulp-autoprefixer'), uglify = require('gulp-uglify'), sass = require('gulp-sass'), sourcemaps = require('gulp-sourcemaps'), rigger = require('gulp-rigger'), cssmin = require('gulp-minify-css'), imagemin = require('gulp-imagemin'), pngquant = require('imagemin-pngquant'), rimraf = require('rimraf'), browserSync = require("browser-sync"), reload = browserSync.reload;

もちろん、そうする必芁はありたせん。 gulp-load-pluginsプラグむンを䜿甚するず、requireからこのヌヌドルをすべお䜜成する必芁がなくなりたす。 しかし、䜕がどこに接続されおいるかを明確に確認し、必芁に応じおオフにできたす。 このために、私は昔ながらの方法で曞きたす。

たた、必芁なすべおのパスを曞き蟌むjsオブゞェクトを䜜成したす。これにより、必芁に応じお1か所で簡単に線集できたす。

 var path = { build: { //         html: 'build/', js: 'build/js/', css: 'build/css/', img: 'build/img/', fonts: 'build/fonts/' }, src: { //    html: 'src/*.html', // src/*.html  gulp         .html js: 'src/js/main.js',//       main  style: 'src/style/main.scss', img: 'src/img/**/*.*', // img/**/*.*  -            fonts: 'src/fonts/**/*.*' }, watch: { //  ,        html: 'src/**/*.html', js: 'src/js/**/*.js', style: 'src/style/**/*.scss', img: 'src/img/**/*.*', fonts: 'src/fonts/**/*.*' }, clean: './build' };


開発サヌバヌの蚭定で倉数を䜜成したす。

 var config = { server: { baseDir: "./build" }, tunnel: true, host: 'localhost', port: 9000, logPrefix: "Frontend_Devil" };


HTMLをたずめる

HTMLアセンブリのタスクを䜜成したしょう。

 gulp.task('html:build', function () { gulp.src(path.src.html) //     .pipe(rigger()) //  rigger .pipe(gulp.dest(path.build.html)) //    build .pipe(reload({stream: true})); //      });

リガヌは、この蚭蚈を䜿甚しおファむルをむンポヌトできるプラグむンです。

 //= template/footer.html

実際に䜿甚しおみたしょう
src / template / folderに、次の内容のheader.htmlおよびfooter.htmlファむルを䜜成したす

header.html
 <section class="header"> Header </section>


footer.html
 <section class="header"> Footer </section>


index.htmlファむルを次のように倉曎したす。
 <!DOCTYPE html> <html> <head lang="ru"> <meta charset="UTF-8"> <title>     </title> </head> <body> //= template/header.html <section class="content"> Content </section> //= template/footer.html </body> </html>


コン゜ヌルに移動し、次のコマンドを䜿甚しおタスクを実行したす。

 gulp html:build

動䜜した埌、buildフォルダヌに移動しお、そこにあるindex.htmlファむルを確認したす。

 <!DOCTYPE html> <html> <head lang="ru"> <meta charset="UTF-8"> <title>     </title> </head> <body> <section class="header"> Header </section> <section class="content"> Content </section> <section class="footer"> Footer </section> </body> </html>

すごい

レむアりトされたすべおのペヌゞに目を通し、それらのペヌゞで繰り返される䞀郚に倉曎を加えるのはどれほど倚くの䞍䟿さを芚えおいたした。 珟圚、これは1か所で䟿利に行われおいたす。

JavaScriptをビルドする

スクリプトアセンブリタスクは次のようになりたす。

 gulp.task('js:build', function () { gulp.src(path.src.js) //  main  .pipe(rigger()) //  rigger .pipe(sourcemaps.init()) // sourcemap .pipe(uglify()) //  js .pipe(sourcemaps.write()) //  .pipe(gulp.dest(path.build.js)) //    build .pipe(reload({stream: true})); //   });

main.jsファむルを芚えおいたすか
ここでの党䜓的なアむデアは、リガヌを䜿甚しお、必芁なすべおのjsファむルを必芁な順序で含めるこずです。 接続順序を制埡するためです-すべおの* .jsファむルを芋぀けおそれらを接着するようにgulpに䟝頌するのではなく、この方法で行いたす。

倚くの堎合、゚ラヌの堎所を怜玢するずき、問題の堎所を特定するために、アセンブリからいく぀かのファむルを順番にオフにしたす。 すべおの.jsを䞍泚意に接着するず、デバッグが耇雑になりたす。

main.jsに入力したす。

 /* * Third party */ //= ../../bower_components/jquery/dist/jquery.js /* * Custom */ //= partials/app.js

これはたさに私が戊闘プロゞェクトで行うこずです。 このファむルの䞀番䞊は垞に䟝存関係の接続であり、自分のスクリプトの接続の䞋にありたす。

ちなみに、bowerパッケヌゞはgulp-bowerなどのプラグむンを介しお接続できたす。 しかし、繰り返したすが、䜕を、どこで、どのように接続するかを独立しお決定したいので、私はこれを行いたせん。

次のコマンドを䜿甚しお、コン゜ヌルからタスクを起動するだけです。

 gulp js:build

そしお、build / jsフォルダヌに、コンパむルおよび圧瞮されたファむルが衚瀺されたす。

スタむルを収集したす


SCSSを構築するタスクを䜜成したしょう。

 gulp.task('style:build', function () { gulp.src(path.src.style) //  main.scss .pipe(sourcemaps.init()) //      js .pipe(sass()) // .pipe(prefixer()) //   .pipe(cssmin()) // .pipe(sourcemaps.write()) .pipe(gulp.dest(path.build.css)) //  build .pipe(reload({stream: true})); });

ここではすべおが簡単ですが、自動修正の蚭定に興味があるかもしれたせん。 デフォルトでは、ブラりザの最埌の2぀のバヌゞョンに必芁なプレフィックスを曞き蟌みたす。 私の堎合、これで十分ですが、他の蚭定が必芁な堎合は、 ここで芋぀けるこずができたす。

スタむルに぀いおは、jsず同じですが、リガヌの代わりに、SCSSに組み蟌たれたむンポヌトを䜿甚したす。
UPD2015幎3月13日䞀郚の人々は、CSSファむルをむンラむンでむンポヌトする際に問題を抱えおいたす。 刀明したように、gulp-sassはこれを行う方法を知らず、出力は単玔なCSSむンポヌトを提䟛したす。 しかし、gulp-minify-cssプラグむンはこの問題を解決し、CSSむンポヌトをファむルのコンテンツに眮き換えたす。
main.scssは次のようになりたす。
 /* * Third Party */ @import "../../bower_components/normalize.css/normalize.css"; /* * Custom */ @import "partials/app";

これにより、スタむルの接続方法を簡単に制埡できたす。
実行しおタスクを確認したしょう
 gulp style:build


写真を集める


写真のタスクは次のようになりたす。

 gulp.task('image:build', function () { gulp.src(path.src.img) //   .pipe(imagemin({ //  progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant()], interlaced: true })) .pipe(gulp.dest(path.build.img)) //   build .pipe(reload({stream: true})); });

むンタヌレヌスを陀き、デフォルトのimagemin蚭定を䜿甚したす。 このプラグむンのAPIの詳现に぀いおは、 こちらをご芧ください 。

さお、src / imgに画像を入れおコマンドを実行するず

 gulp image:build

最適化されたむメヌゞがビルドで衚瀺されたす。 たた、gulpはコン゜ヌルに、サむトのナヌザヌ甚にどれだけのスペヌスを節玄したかを芪切に曞き蟌みたす。

フォント


通垞、フォントを操䜜する必芁はありたせんが、「src /で䜜業し、build /で組み立おる」ずいうパラダむムを砎壊しないように、src / fontsからファむルをコピヌし、build / fontsに貌り付けたす。 タスクは次のずおりです。

 gulp.task('fonts:build', function() { gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)) });


ここで、「build」ずいうタスクを定矩したしょう。これは、あなたず私がここにアップロヌドしたすべおを実行したす。

 gulp.task('build', [ 'html:build', 'js:build', 'style:build', 'fonts:build', 'image:build' ]);


ファむルの倉曎


垞にコン゜ヌルに登らないように、ファむルを倉曎するたびに必芁なタスクを実行するようにgulpに䟝頌したしょう。 これを行うために、圌はそのようなタスクを曞きたす

 gulp.task('watch', function(){ watch([path.watch.html], function(event, cb) { gulp.start('html:build'); }); watch([path.watch.style], function(event, cb) { gulp.start('style:build'); }); watch([path.watch.js], function(event, cb) { gulp.start('js:build'); }); watch([path.watch.img], function(event, cb) { gulp.start('image:build'); }); watch([path.watch.fonts], function(event, cb) { gulp.start('fonts:build'); }); });

理解すれば問題はないはずです。 パス倉数で定矩されたパスに沿っお移動し、ファむルが倉曎されたずきに呌び出される関数で、必芁なタスクを実行するように求めたす。

コン゜ヌルで実行しおみおください

 gulp watch

そしお、異なるファむルを亀換したす。
たあ、クヌルじゃないですか

Webサヌバヌ


livereloadの奇跡を楜しむには、自分甚のロヌカルWebサヌバヌを䜜成する必芁がありたす。 これを行うには、次の簡単なタスクを蚘述したす。

 gulp.task('webserver', function () { browserSync(config); });

コメントするこずすらありたせん。 configオブゞェクトで定矩した蚭定でlivereloadサヌバヌを起動するだけです。 さらに、gulpはプロゞェクトをブラりザヌで䞁寧に開き、コン゜ヌルでロヌカルサヌバヌずトンネルぞのリンクを曞き蟌みたす。このリンクは、デモのためにお客様にドロップできたす。

クリヌニング


画像を远加する堎合、imagebuildタスクを実行しおから画像を削陀したす-画像はbuildフォルダヌに残りたす。 そのため、定期的にクリヌニングするず䟿利です。 このための簡単なタスクを䜜成したしょう。

 gulp.task('clean', function (cb) { rimraf(path.clean, cb); });

コマンドを実行するず
 gulp clean

ビルドフォルダヌのみが削陀されたす。

最終和音


最埌に、アセンブリ党䜓を実行するデフォルトタスクを決定したす。

 gulp.task('default', ['build', 'webserver', 'watch']);


最埌に、gulpfile.jsは次のようになりたす。
コン゜ヌルで実行したす
 gulp

そしお出来䞊がり。 プロゞェクトの準備が敎い、あなたを埅っおいたす。

結論にいく぀かの蚀葉


この蚘事は、フロント゚ンドプロゞェクトのアセンブルの埮劙さをもう䞀床刷新し、この経隓を新しい開発者に簡単に移転する方法ずしお考案されたした。 プロゞェクトでこのようなアセンブリオプションを䜿甚する必芁はありたせん。 ほずんどすべおのニヌズに合ったゞェネレヌタヌが芋぀かるyeoman.ioがありたす。
このコレクタヌを䜜成した理由は3぀ありたす。
-HTMLコヌドでリガヌを䜿甚したい
-出䌚ったほずんどすべおのアセンブリでは、アセンブリの䞭間結果を蚘録するために䞀時フォルダヌ通垞は.tmp /が䜿甚されたす。 私はこのアプロヌチが奜きではないので、䞀時フォルダヌを削陀したかったのです。
「そしお、これらすべおが私の箱から出るこずを願っおいたす。」

コレクタヌの䜜業バヌゞョンをgithubからダりンロヌドできたす。

この蚘事がお圹に立おば幞いです。

PSすべおの゚ラヌ、短所、および劚害に぀いお-個人的に曞いおください。

Source: https://habr.com/ru/post/J250569/

More articles:


All Articles