---------2018年:現在に至る2017年:フリーランスとして2社目の常駐案件で某IT企業の新領域開発部門のフロントエンド開発を担当。合計3つのプロジェクトに参加。2016年:フリーランスエンジニアとして独立。個人的な思いとしてはキャリアの再スタート。某旅行関連サイトのフロントエンド開発を担当。2009年:友人と起業。営業代理店やイベント事業等を取締役として経営。script,slim,sassで開発している身からするとそのままのhtmlもcssもjavascriptもコーディングがストレスだとwwwで、今回は完全に個人完結する案件だったのでそういった案件が今後も来ると信じてLPコーディング用のリポジトリを作りました。static-page-template今回はその備忘録として。gulp導入を検討している方の参考になれば!gulpとは公式サイトhttps://gulpjs.com/タスクランナーとはタスクランナーとは、そのままなんですが、タスクを処理してくれるやつですwww要は予め決められたタスク(処理)を実行してくれるものです。cssのベンダープレフィックスを自動で付けてくれるとか。便利ですよね?できることもちろん色々あるので、ここでは触り程度に。cssベンダープレフィックス自動付与sassをcssにコンパイルslimをhtmlにコンパイルcoffeeをjavascriptにコンパイル各ファイルをミニファイしてくれるetcまあ他にも色々ありますが、今回はフロントエンド系の基本的なやつを上げました。要件と言っても上記の機能を付けるくらいですねwww今回の要件としては、制作案件の効率が目的なので、なるべく汎用的なものにしたなと。ファイル納品でその後の運用は先方任せというケースも考慮するとミニファイなどはないほうがベターなので本記事での要件は以下とします。cssベンダープレフィックス自動付与sassをcssにコンパイルslimをhtmlにコンパイルcoffeeをjavascriptにコンパイル上記をファイルの変更を検知して自動実行するこんなもんですかね。導入からタスクの実装までやりたいので細かくはやりません。-vpackage.jsonの作成Gulpを適用するディレクトリにて以下コマンド。-ygulpインストール同ディレクトリにて。導入マシン上の全てでgulpを適用させる方法もあるようですが、考慮しなければいけない要件が増えるため今回は該当ディレクトリで適用されるGulpタスクを作ります。実際のgulpタスクの実行はjsファイルで設定します。該当ディレクトリ直下にgulpfile.jsというファイルを作ります。必要なタスクモジュールをインストールします。モジュールのインストールのコマンドは以下。hogehogehogehogeの部分に必要なタスクモジュールを書きます。gulp-sassなどです。モジュールのインストールが完了したら、gulpfile.jsファイルでモジュールの呼び出し設定を行います。.pipe(gulp.dest('production/css/'));});簡単に説明すると、dev/sassディレクトリのsassファイルをcssファイルに変換して、production/cssディレクトリに保存すると。watch最後に基本的には、コーディング作業前に、ファイル変更の監視のタスクを走らせてからコーディングすれば問題ないかと。これがあるだけで開発のスピードは格段に上がるはず。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Reserved.-。