Clever Geek Handbook

Linuxフロントエンド開発ツールキット

こんにちは、紳士、開発者！ この記事では、Linuxでの開発を非常に快適で便利なものにして、 痛みを感じるだけの喜びをもたらす方法を説明します。



私たちは何を達成しますか：

ブラウザでページを表示し、テキストエディターHTMLおよびCSS / SASSで編集します。 PSDからコードを直接抽出し、同時にブラウザーでPixelPerfectに直接調整します。 保存すると、SASSは自動的にCSSに変換され、サーバーにアップロードされます。 PSDテンプレートから必要な写真を2回クリックするだけで切り取り、その後自動的にサーバーにアップロードします。 30分以内にこれを達成する方法は？ 教えます！



あなたの経験が数年以上であり、あなたがかなり経験豊富なフロントエンドである場合、この記事に新しいものは見つかりません。 これは、最近GNU / Linuxコミュニティに参加したか、参加したばかりの人を対象としています。



まとめ



  1. ブラウザの選択
  2. Firefoxの拡張機能をインストールする
  3. テキストエディターの選択
  4. Sublime Text 3に必要な拡張機能
  5. 追加のツールとシステムの最適化


優秀なプログラマーのほとんどが仕事をするのは、支払いや表彰を期待しているからではなく、プログラミングを楽しんでいるからです。

-ライナス・トーバルズ


ブラウザを選択してください



便利な開発のために、インストール後に追加の設定をできる限り少なくするために、ほとんどの組み込みの便利なツールを備えたブラウザが必要です。



これらの目的のために、 Firefox Developer Editionは完璧であり、その開発者によると、「インターネットを構築する人のために」コンパイルされています。 理由は次のとおりです。



長所



完全に無料


私たちはソフトウェアの自由のために努力していますよね？ そして、まともな無料の代替手段があるのに、なぜ何かに余分なお金を払うのですか？！



組み込み開発者ツール


マジックボタンF12を押すと、ブラウザーは開発モードに変換されます。このモードでは、CSSページスタイルの編集、ページでのHTML変更およびJavaScriptデバッグ、レスポンシブデザインモード、ページの読み込み速度の監視ができます。

詳細については、 公式ページをご覧ください 。



シャーマニズムのないマルチプロセッシング


Firefox Developer Editionはe10sをサポートしています -すぐに使えるマルチプロセッシングにより、開発者によるとページの読み込みが最大400％速くなります。 繰り返しますが、必要に応じて、このモードは設定で簡単に無効にできます。 （彼は大量のRAMを消費します。後でこれに戻ります）



Firefoxの拡張機能



もちろん、 FDEには多数の追加機能がありますが、追加のプラグインをインストールするとさらに便利になりますが、最も基本的なリストを以下に示します。



完璧なピクセル



もちろん、Pixel Perfectレイアウトが標準になりました。このプラグインを使用すると、サイトレイアウトをオーバーレイでオーバーレイできるため、開発が大幅に容易になります。



高度なCookieマネージャー



一部のCookieを表示、変更、または削除することが必要になる場合があり、このプラグインはこれらの目的に最適なソリューションです。 また、Cookieを追加することもできます。



ユーザーエージェントスイッチャー



名前が示すとおり、User-Agentを変更するための優れたソリューション。 彼らはボタンを押し、ブラウザ、オペレーティングシステム、デバイスを選択しました。 できた！ あなたは素晴らしいです。



ユーザーエージェントスイッチャー



前の拡張機能の作成者によるアドオン。 カスタムUser-Agentを追加できます。これは実際には、名前からも見ることができます



ここでは、実際に、ブラウザーの主要な拡張機能を把握し、テキストエディターの選択と構成に安全に進むことができます。



テキストエディターを選択する



もちろん、非常に多くの異なるテキストエディターと開発環境がありますが、それらのすべての中で重要なリーダーを強調したいと思います-これはSublime Text 3です。機能が大幅に増加します。

追加の拡張機能はパッケージコントロールを使用してインストールされます 。インストールの手順については、 こちらを参照してください 。



Sublime Text 3の拡張機能



EmmetおよびEmmet Cssスニペット



そもそも、多くの人になじみのあるエメットです。 数時間でHTMLコードの記述を高速化できるプラグイン。 詳細についてはこちらをご覧ください 。EmmetCss Snippetsを使用すると、CSSファイルで同じ魔法を実行できます。



カラー蛍光ペン



CSSですべての色を強調表示（「#FFFFFF」、「rgb（255,255,255）」、「白」など）

ピペットと組み合わせると、開発が大幅にスピードアップします。



サス



SublimeのSass構文サポート。 プリプロセッサをまだ使用していない場合は、開始することをお勧めします。 そして、以下でSassとの共同作業を検討します。



SFTP



サーバー上のファイルを編集したり、FTPでその他の作業を行うことが必要になる場合があります。 このプラグインは、追加のソフトウェアをインストールせずにファイルをリモートで編集したり、コンピューターにダウンロードしたり、逆にサーバーにダウンロードしたりするのに役立ちます。



システム最適化



そのため、システムの最適化と追加アプリケーションのインストールという最も興味深い部分にスムーズにアプローチしました。



ブラウザがあり、テキストエディタも動作する準備ができています。 残っているものは何ですか？ PSDファイルとスライス画像を表示します。 Linuxの下。 ほんと？



このプロセスは喜んで行うことができ、特に私たちのために作成されたと思われる素晴らしいAvocodeプログラムがこれを助けてくれます。 サブスクリプションの価格は気にせず、1通のメールの試用期間は2週間続き、誰も私たちにたくさんのメールアドレスを用意することを邪魔しません。



このプログラムを使用すると、PSDファイルを表示したり、 Adobe ExtractなどのオブジェクトのCSSプロパティを抽出したりすることができますが、必要なレイヤーを別のファイルに直接保存できます。



SASSからCSSへの変換と画像からのスプライトの接着を自動化するにはどうすればよいですか？ これはNode.jsとGulpに役立ちます。



これらのすばらしいアプリケーションの機能については、公式サイトで読むことができます。この全体のセットアップ方法を説明します。



NVMのインストールはNode.jsバージョンマネージャーで、通常のbashスクリプトを使用してインストールされます。 ターミナルエミュレータを開き、次を規定します。 



curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash


またはWgetを使用： 



 wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash


ターミナルウィンドウを再起動し、次を使用してインストールを確認します。 



 nvm --version


すべてが正しくインストールされると、コンソールに「nvm」という碑文が表示されます。 これでNode.jsとGulpをインストールする準備が整いました。 ターミナルを使用してNode.jsをインストールします。 



 nvm install v[vesrion] //  [vesrion]    ,  v4.5.0


インストールの終了を待ってGulpをインストールし、次のコマンドを順番に実行します。 



 npm install --global gulp-cli


その後、プロジェクトフォルダーに移動し、処方します。 



 npm init npm install --save-dev gulp


上記でインストールしたすべてが正しく動作するようにGulpファイルを構成することだけが残ります。 gulpfile.jsドキュメントを作成し、プロジェクトのルートに配置します。 gulpfile.jsのコンテンツを以下に添付します。



私のgulpfile.js 
 var gulp = require( 'gulp' ); // Gulp var gutil = require( 'gulp-util' ); var ftp = require( 'vinyl-ftp' ); //    FTP   SFTP var sass = require( 'gulp-sass' ); // Sass var notify = require( 'gulp-notify' ); //     var spritesmith = require('gulp.spritesmith'); //  function getFtpConnection() { return ftp.create({ host: '_', user: '_', password: '', parallel: 10, log: gutil.log, }); } var LocalScssFiles = ['./sass/style.scss']; var LocalFiles = ['./css/*.css', './index.php', './templateDetails.xml']; var FullPathFTP = '/public_html/autodiagnostic/templates/autodiagnostic'; gulp.task('sprite', function() { var spriteData = gulp.src('./psd/assets/*.*') // ,      .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css', cssFormat: 'css', algorithm: 'binary-tree', cssVarMap: function(sprite) { sprite.name = 's-' + sprite.name } })); spriteData.img.pipe(gulp.dest('./built/images/')); // ,    spriteData.css.pipe(gulp.dest('./css/')); // ,    }); gulp.task('sass', function () { return gulp.src(LocalScssFiles) .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) .pipe(gulp.dest('./css')) }); gulp.task('watch', function() { var conn = getFtpConnection(); gulp.watch(LocalScssFiles, ['sass']); gulp.watch(LocalFiles).on('change', function(event) { return gulp.src( [event.path], { base: '.', buffer: false } ) .pipe( conn.dest( FullPathFTP ) ) .pipe(notify({ message: "Updated <%= file.relative %>", title: "Gulp FTP [<%= options.hours %> Hours, <%= options.mins %> Min, <%= options.secs %> Sec]", templateOptions: { hours: new Date().getHours(), mins: new Date().getMinutes(), secs: new Date().getSeconds() } })); ; }); });




各行の意味については詳しく説明しませんが、Gulpがおもしろいと思う場合は、別の記事でGulpの操作について説明できます。



システム最適化



作業を最適化するためのヒント：





結果



その結果、新しくて面白いものを作成する楽しいプロセスから気を散らすことなく、ほとんどの日常的なアクションが自動的に行われる完全に最適化されたシステムがあります。


More articles:


All Articles