EJSとSassとgulpで静的HTMLサイトを作る - Qiita
EJSとは Embedded JavaScript templating. 埋め込みJSテンプレートということらしく、HTMLを構築するときに、パーツ化、変数化をJavascriptを書くことができます。 PHPとかCMSとか使えない静的なHTMLの構築のときに、Dreamweaverのテンプレートみたいなことがgulp環境化で実行できるので、とても便利です。gulp下でできるので、いつもつかっているSassとかと組み合わせると静的HTMLのコーディングがとてもラクになります。 静的なHTMLサイトを構築するときに、EJSをつかうとヘッダ・フッタの共通パーツを一つのファイルで管理できたり、それでいてタイトルやmeta要素などをページごとに変えたりとかできるので便利です。 なによりJavascriptなのでWeb（とくにフロント）の人にはいじりやすいのではないかと思います。 Webサイト構築
gulp-sass で sourcemap を使う - Qiita
{ "devDependencies": { "gulp": "^3.9.0", "gulp-minify-css": "^1.2.0", "gulp-sass": "^2.0.4", "gulp-sourcemaps": "^1.5.2" } } ※gulp-sass の 2.0.3 以前のバージョンでは、windows 環境でのソースマップの出力に不具合があるようなので、windows 環境でうまくいかない場合はバージョンを上げてみましょう。 1. インライン出力 css ファイルにマッピング情報が追記されます。 var gulp = require('gulp'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); /* sass task */ gulp.task('sass'
gulp v4.0.0がプレリリース！ 移行方法と変更点まとめ
gulp v4.0.0がプレリリース！ 移行方法と変更点まとめ 2018年1月8日 ※この記事は2018年1月8日に公開しましたが、2020年9月14日に内容をメンテナンスしています。 gulp 2018年1月1日に、gulp v4.0.0がプレリリースされました。この記事では、gulp v4への移行方法と、主な変更点をいくつか紹介します。 gulp v4への移行方法 まず、gulp v3からv4への移行方法について説明します。 gulpのグローバルインストール グローバルインストールされているgulp v3を削除して、gulp v4をグローバルインストールします。 $ npm rm -g gulp $ npm install -g gulp-cli 参照：Quick Start | gulp.js gulpのローカルインストール ローカルインストールされているgulp v3を削除して、g
Gulp 4 gulp.seriesとgulp.parallel - かもメモ
gulp v4 で追加されたgulp.seriesとgulp.parallelを試してみた gulp.series(...tasks) ... 順番に実行する gulp.parallel(...tasks) ... 並列に実行をする GitHubのサンプル gulp.task('one', function(done) { // do stuff done(); }); gulp.task('two', function(done) { // do stuff done(); }); gulp.task('default', gulp.series('one', 'two', function(done) { // do more stuff done(); })); 呼び出されるタスク(関数)の引数にdoneがあり、タスクの最後で実行されています。 fn The fn is passed
絶対つまずかないGulp 5入門 - インストールとSassを使うまでの手順 - ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
必ず使うタスクランナーGulpとGruntの基本コード9選 - ICS MEDIA
みなさんはタスクランナーを使用していますか？ タスクランナーとは開発作業を自動化するためのツールで、2013年頃からWebのフロントエンド開発のトレンドとなっています。開発の現場では主にオープンソースのGulp（ガルプ）とGrunt（グラント）がよく使われています。 本記事ではGulpとGruntの両方の導入方法とウェブ制作でよく使用するプラグインの使い方を紹介します。GulpとGruntのいずれかはすでにインストールしているとして紹介します（記事末尾で付録としてインストール方法を解説しています）。 ※GruntとGulpの違いを知りたい方は記事「絶対つまずかないGulp入門」を参考ください。 この記事は2018年12月にリリースされたGulp 4に対応しています ファイルの複製 作業用のフォルダーからリリース用のフォルダーへファイルをコピーしたい時などに複製するタスクを登録しておくと便利
gulpfile.jsの書き方確認。改 - Qiita
先日sassをコンパイルした際に、gulp-combine-media-queries、メディアクエリをcssの下の方に整えるプラグインを入れていたんですが・・・・ cssを見てみたら整えられてない！なんで！？ 先輩に教えていただき、問題解決とアドバイスをいただいたので、共有させていただきます・・・・。 20190401追記： 保存するたびにsassは以下全てコンパイルしてましたが、更新かけたやつだけコンパイルする都合があったのでgulp-changedを入れました。 var gulp = require('gulp'); var sass = require('gulp-sass'); var plumber = require('gulp-plumber'); var changed = require('gulp-changed');//20190401追加 var sourcema
ざっくりGulp.js入門（Mac向け） - Qiita
プログラミング学習サービスやら、ペットサロン予約サービス、風俗検索サービスなど色々とやっている「かずきち」です。 ■運営サービス一部 http://crazy-wp.com/ http://webukatu.com/ 新宿のホストから不動産・保険の営業を経て、HTMLって何？という状態から３ヶ月独学でプログラミングやデザインを学び、IT業界で１年間実務経験を積んで年収は１本超え。現在は起業家としてサービス運営やら不動産運営をしています。 Qiita内にそれ系の記事も書いてます。 エンジニアで稼ぐために大切な１３のコト WEBサービスで起業したい人に読んで欲しい１８のコト Gulpとは？？ タスク自動化ツール。 画像やjs、cssなどの色々なファイルを圧縮してくれたり、CSSプリプロセッサのSASS、LESS、Stylusなどを自動でコンパイルしてくれたり、ファイルが更新されたら自動でブラウ
絶対つまずかないGulp入門。インストールからSassのコンパイルまで – ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 4に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18とv19で動作検証をしています。 ※Sass
【デザイナー向け】どうしてもgulp、npm、sass、pugを操作しなければならない人への説明書
1.はじめに デザイナーさん、以下のような事態に困ったご経験はないでしょうか。 「画像の差し替え・削除・追加が発生して、ちょっと直したいけど、どこを編集すればいいかわからない」 「文言修正が入った。エンジニアさんに振るまでの量でもないので自分で直したいが、どこを編集すればいいかわからない」 「フォルダによくわからないファイルがたくさんある。いじるのが怖い。」 近頃のweb開発環境は複雑化し、gulpやwebpack・npmなど、デザイナーにとってはよくわからない単語が増えてきました。 このようなツールを駆使してフロントエンド環境を構築しているエンジニアにとって、作業は効率化されましたが、逆にデザイナーにとってはどんどん敷居が高くなっていると思います。 本投稿では、そんな環境下でもなんとなくイマドキの用語を軽く理解して、ちょこっとの編集作業ができるようになることを目標にします。 ゴール gu
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
