CAMP
gulp-directory-sync でディレクトリを同期する | バシャログ。
どうもfujiharaです。ただいまテレワーク中です。本日はgulp-directory-syncを使って ディレクトリを同期する方法をご紹介します 追記:2021/06/28）まずこちらの記事を参考にしていただき、駄目な場合はこちらのgulp-directory-syncをお試しください。 背景 WordPressを開発する際には以下のような構成で行っております。 (以下リポジトリルートです) . ├── frontend_check (コーディング用) ├── gulpfile.js ├── package.json ├── src (各種ソース) ... (その他各種設定フィル等) srcディレクトリで各種ソースを用意しgulpで運用してfrontend_checkに吐き出すイメージです frontend_check以下はこの様になっています frontend_check ├── a
いまさら始めるGulpでWordPressテーマ開発 | オレインデザイン
今回はGulpの導入から最低限の活用部分まで、どうやったら使えるのか・使えるようになるのかを紹介してみたいと思… こちらを元にして、今回はWordPressテーマのGulp開発環境を作ってみようと思います。といっても、ベースはすでに出来上がっているので、少し変更を加えたりする程度になります。 あと、環境としてはLocal by Flywheelを使うことを想定しています。 内容としては、 WordPress開発環境を作るベースの環境を作る 自動でrtl.cssを書き出す 監視タスクを作る というような感じになります。他のSassコンパイルやJavaScriptの結合・圧縮部分は前回のコードに書き出し先を変更したりする程度で大丈夫です。では始めていきましょう。 WordPress開発環境を作るベースの環境を作る まずは、前回作った環境のpackage.jsonとgulpfile.jsをコピー
いまさら始めるgulp入門 | オレインデザイン
$ node -v これで何かしら数字が出てきたら、Node.jsのインストール完了です。 プロジェクトのフォルダを作る まずは、プロジェクトのフォルダを作りましょう。デスクトップでもどこでも大丈夫なんで作りましょう。今回はデスクトップにmyprojectというフォルダを作って進めていきます。 そして、ターミナルで、作ったフォルダにアクセスしておきましょう。ここからは、基本こちらで作ったフォルダ内で作業しますので。 cdで移動先を指定するんですが、長いパスを入力するのは面倒なんで、該当フォルダをターミナルにドロップすると、パスを自動で入力してくれるので、こちらの方法の方が（特に初心者の方は）間違いがないです。 ちなみに、cdというコマンドは、Change Directoryという意味です。 npm initする ターミナルでプロジェクトフォルダに移動していることを確認して、 $ npm i
gulp.jsで便利なタスクを作ってみよう【ESLint編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、店長です。 フロントエンド入門者のためのgulp.js編も第5回となりました。第3回、第4回に引き続き、今回もgulp.jsで便利なタスクを作ってみましょう。今回はJavaScriptをより綺麗に書くために使いたい構文チェックツール「gulp-eslint」をご紹介します。 第3回から今回までの内容に関するファイルは、下記にまとめています。 Im0-3/gulp-tutorial – Github 5-1が前回の内容で、5-2と5-3が今回作る内容になっています。ファイルをダウンロードしたら、ターミナルでprojectフォルダに移動して $ npm install gulp-eslint --save-dev を実行しましょう。そうすると、制作に必要なライブラリをダウンロードできます。 前回までのファイルの内容は下記の通りです。 ディレクトリ構成 project |--app
gulp.jsで便利なタスクを作ってみよう【エラーと通知編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、店長です。 前回のデバッグ編は「デバッグ」をテーマに、HTMLの記法チェックとブラウザ間同期をする方法についてご紹介しました。 今回のテーマは、「エラーと通知」です。gulpタスクでエラーを受け取った際に、効率的に動かす方法と、そのエラーをデスクトップへ通知する方法をご紹介します。 前回までのファイルと、今回のファイルはこちらにあります。 Im0-3/gulp-tutorial – Github 4-1が前回の内容、4-2、4-3が今回作る内容になっています。ファイルをダウンロードしたら、ターミナルでprojectフォルダに移動して $ npm install を実行しましょう。そうすると、制作に必要なライブラリをダウンロードできます。 前回までのファイルの内容は下記のとおりです。 ディレクトリ構成 project |--app | |--product | | |--inde
gulp.jsで便利なタスクを作ってみよう【デバッグ編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、店長です。 第一回、第二回でgulp.jsの基本的な使い方について学びました。今回は便利なライブラリを紹介しつつ、実用的なタスクを作っていきます。 今回のテーマは「デバッグ」です。HTMLの構文チェックを自動化する方法と、PC・スマホで常に修正内容を反映させながらチェックする方法をお伝えします。 コードは前回、前々回作ったファイル構成を元におこなうので、初めて読む方は下記から前回までの内容をダウンロードしてください。 Im0-3/gulp-tutorial – Github 3-1が前回の内容、3-2、3-3が今回作る内容になっています。ファイルをダウンロードしたら、ターミナルでprojectフォルダに移動して $ npm install を実行しましょう。そうすると、制作に必要なライブラリをダウンロードできます。 前回までのファイルの内容は下記のとおりです。 ディレクトリ構成
gulp.jsのAPIについて知ろう！【図解付き】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 大学4年生、英語の単位が取れたのかまだわからず不安なれもんです。 さて、前回はgulp.jsの概要と、sassタスクやwatchタスクを使って実際に動かしてみるところまでをやりました。今回は、gulp.jsに用意されているAPIについて説明しながら、前回書いたコードが実際にどんなことをしていたのか、見ていきたいと思います。 gulp.jsのAPIができること gulp.jsのAPIを使うことによって、タスクの設定や処理をするファイルの指定、結果の出力先の指定、ファイルの監視ができるようになります。実際にgulpfile.jsにタスクを定義するためには、gulp.jsが提供するAPIを使用します。 gulp API docs：gulp/docs/API.md – GitHub 今回記事内で使うメソッドはgulpでもともと用意されているものなので、さらにインストールする必要はあり
動画キャプチャで解説！gulp.jsのインストール方法と簡単な使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのはっちゃんです。 自分は髭が濃く、小学生の頃から電動髭剃りで剃っていたほどなのですが、LIGに入ってからは髭キャラとして生かすことができました。濃く産んでくれた親に感謝しています。 話は変わって、LIGのフロントエンドエンジニアによる連載がはじまります！ 今回は「gulp.js編」の第1回。gulpについては、すでに多くの技術書や記事が出回っていますが、今回は連載という形で改めて基礎から応用までをご紹介していきます。 こんなこともできたんだ！という新たな発見もあるかもしれません。 gulpを使う理由 制作をしていて、こういったことを面倒くさいと感じたことはありませんか？ 修正があったときに、同じHTMLのパーツを探して全部修正する Webサービスを利用してCSSやJavaScriptを圧縮する スプライト画像が増えるたびにPhotoshopなどでいちい
Gulp+WebPackで作るTypeScript開発環境【5分でできる！】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
それでは順を追って作ってみましょう！ ディレクトリの準備 まずはディレクトリを用意します。 今回はts-templateフォルダの中にindex.htmlを置きました。 ts-template �└── index.html 作ったらterminalで移動しましょう。 package.json作成 package.jsonを作成します。 npm init 何かいろいろ聞かれますが、全て[enter]でOKです。 ts-template ├── index.html └── package.json モジュールのインストール 必要なモジュールをインストールしましょう！ まとめてインストールもできますが、今回は1つずつインストールしていきます。 gulp gulp-connect gulp-webpack ts-loader typescript npm install gulp --save
Gulp.jsとPostCSSを使ってCSSの面倒な作業をなくそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ここ最近はいろいろと勉強したいことがあふれかえってます。うまく時間を作って知識を増やしていきたいところです。こんにちは、CTOの林です。 近年のエンジニアリングは自動化の方向へどんどん流れています。 Grunt,Gulp,WebPack,CI,Chef,Ansible…… etc. もちろんCSSにも自動化の流れが来ています。 過去にこんなことがありませんでしたか？ CSSのインデントや記述の仕方がバラバラ パフォーマンス・チューニング？？ とりあえずベンダープレフィックスを全部つけておけばいいだろう！ 圧縮を納品前にやって、圧縮したら崩れた 今日は普段の制作ですぐに使えるCSS自動化の方法を紹介しつつ、実際に使えるパッケージを導入するところまでを行いたいと思います。 ※11月18日にいいオフィスで行われた「書籍『最強のCSS設計』出版記念イベント＆勉強会―CSS設計、チーム開発を成功させ
gulp でディレクトリ構造を維持したコピー - アカベコマイリ
失敗談 & そこから得られた知見の記録。いままで gulp で複数ディレクトリの構造を維持してコピーするとき以下のようにしていた。 var gulp = require( 'gulp' ); gulp.task( 'copy', function() { gulp.src( 'src/*.html' ).pipe( gulp.dest( 'dest' ) ); gulp.src( 'src/css/**' ).pipe( gulp.dest( 'dest/css' ) ); gulp.src( 'src/js/*.js' ).pipe( gulp.dest( 'dest/js' ) ); } ); この処理だと gulp.dest が冗長なうえ同期実行のためにコールバック関数を呼び出す場合も個別に end/error イベントをハンドリングする必要があり面倒だ。それにもかかわらずこうしてい
2015年はgulpで決まり！開発環境をgruntから乗り換えよう！（コーダー編） | SONICMOOV LAB
もーいーくつねーるーと～、おーしょーうーがーつー♪ という所で、今年も残り 10 営業日を切りましたね・・・・！早いですね！ 皆さまいかがお過ごしでしょうか♪ 世間はクリスマスなムード一色ですが、皆さまお忘れになってはいないでしょうか。 大掃除という名の一大行事を！！終えない限りはクリスマスを迎えられませんよね（鬱 今週こそはきっと・・・ほほほ。。 自分を追い込んでみたところで、本題に入りたいと思います！ こちらは、ソニックムーブ Advent Calendar 2014 12日目の記事になります！ 目次 なぜ gulp なのか 目標 ディレクトリ構成 基本設定 タスク設定 トラブルシューティング 参考URL なぜ gulp なのか 当記事は grunt から gulp に乗り換えを考えているユーザーを対象としているので、Node.js のインストール方法の説明を省かせていただきます・・・
gulp.jsとBrowser Syncで快適なWordPress開発環境を手に入れる
Browser Sync のインストール まず、BrowserSyncをダウンロードします。BrowserSync をダウンロードにはnpmコマンドを使用します。npmコマンドを使用するための設定については、はじめての gulp.js！Mac で CSS ファイル、JavaScript の圧縮を行おう gulp-css-sass-268を参考にしてください。 BrowserSync の動作確認 BrowserSync のインストールが完了したら動作確認しましょう。BrowserSync を起動するためには、以下のコマンドを実行します。これで、cssディレクトリ配下に保存されている CSS ファイルが変更される都度、ブラウザがリロードされます。
gulp.jsでWeb開発環境をつくる - Qiita
. ├── gulpfile.js ├── package.json ├── .jshintrc └── src ├── images │ └── picture.jpg ├── index.html ├── page.html ├── scripts │ ├── lib │ │ └── jquery.js │ └── main.js └── styles ├── main.scss └── sub.scss var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var browserSync = require('browser-sync'); var rimraf = require('rimraf'); var runSequence = require('run-sequence'
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
パッケージマネージャーBowerとGulpを組み合わせてコーディングを効率化させる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、外部ライターの田路です。 春の足音がどんどん大きくなってきていますね。 春といえば卒業の季節です。 今回はパッケージマネージャーBowerとGulpを組み合わせて、ファイルのコピペを卒業する方法をご紹介いたします。 使うための準備 jQueryとBootstrapを例に進めていきます BowerとGulpを使います 「フロントエンド用パッケージマネージャーBowerの導入方法と使い方」を参考に、Bowerの基本的な使い方を理解しておいてください。 「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」を参考に、Gulpへの入門を済ませておいてください。 黒い画面が苦手なあなたへ bower-browser – これは便利！Bower管理フロントエンド http://www.moongift.jp/2015/02/bower-browser-これは便利！bo
テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか？ EJSっていうのはですね、なんかもう、こう、すんごいツールでして！ とにかく、使うとコーディングがめっちゃ早くなるんですよ！！ 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは？ EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://liginc.co.jp/248226
WWW WATCH
