Gulpで複数のファイルを結合する方法 (gulp-concat) |
概要 JavaScript や CSS をコーディングする際に、管理を便利にするために役割ごとにファイルを複数に分割して、実際に動作させる際には1つのファイルに結合して動かしたい場合があります。 本稿では Gulp で複数のファイルを結合する方法について解説します。 なお、Gulp で複数のファイルを結合するには gulp-concat モジュールが便利です。 本稿では gulp-concat を用いた方法を紹介します。 本稿のゴール 本稿では、3つのファイル( src/file1.txt, src/file2.txt, src/file3.txt )を、1つのファイル( dest/file.txt )として結合して出力することをゴールとして解説します。 プロジェクト ├ gulpfile.js ├ /src │ ├ file1.txt │ ├ file2.txt │ └ file3.tx
gulp を使って自動でsass をコンパイルできるようにする - Qiita
一体何番煎じになる記事だろうか…。 gulp を使ってsass を自動コンパイルできるようにした。 【重要】追記(2022/01/02) gulpfiles.js で「gulp.task～」を使って記述する方法は、2018年12月から非推奨になっているため、この記事は参考程度に読んでください。というのを3年位経った2022年に気づきました…。 別途記事を投稿する予定です。 事前準備 gulp を使えるようにするには、予め以下をインストールする必要がある。 node.js Ruby sass これらのインストールについてはOS によって異なるため、省略。 (2019年3月22日削除) npm init node.js インストール後、gulp をインストールしたいディレクトリで以下のコマンドを実行する。
【gulp】gulp@4.0.0にしたら`AssertionError [ERR_ASSERTION]: Task function must be specified`と怒られる - tweeeetyのぶろぐ的めも
はじめに とあることで、gulpを3.x.x.から^4.0.0にあげる必要がありました。 あげてからgulpタスクを実行すると 以下のようなエラーが出たのでその対応方法をメモ # defaultタスクを実行するとこんなエラーが... $ ./node_modules/gulp/bin/gulp.js assert.js:42 throw new errors.AssertionError({ ^ AssertionError [ERR_ASSERTION]: Task function must be specified at Gulp.set [as _setTask] (/Users/tweeeety/gulp-task-gulp4.0.0-sample1/node_modules/undertaker/lib/set-task.js:10:3) at Gulp.task (/User
![【gulp】gulp@4.0.0にしたら`AssertionError [ERR_ASSERTION]: Task function must be specified`と怒られる - tweeeetyのぶろぐ的めも](https://cdn-ak-scissors.b.st-hatena.com/image/square/99cdde3e18b194c2ebac87842fc64939d410d68d/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftweeeety%2F20180618%2F20180618044056.png)
gulp 4.0 が正式リリース、v3 からの移行に伴う gulpfile.js ファイルの修正点 | WWW WATCH
gulp 4.0 が正式リリースされましたが、v3 から v4 へのバージョンアップに伴い実施されたいくつかの修正が原因で、v3 環境で使用していた gulpfile.js ファイルがそのままでは正常に動作しなくなりました。v4 移行のために行った gulpfile.js ファイルの修正点をまとめます。 つい先日ですが、gulp 4.0 が正式リリースされ、本記事執筆現在、npm install gulp すると gulp 4.0.0 がインストールされるようになっています（今まではプレリリース扱いということで、npm install gulp@next と指定しなければ 4.0 はインストールされませんでした）。 Version 4.0 Now Default - gulpjs gulp changelog - gulpjs/gulp そこで早速ですが、試しにテスト環境作って gulp
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でSassのコンパイル・Autoprefixer・Minifyの実行をするまでの最低限のこと｜クロノドライブ
はじめに この記事はGulpを使ってSassをコンパイルしているけど、なんだかよくわかってないという人に向けた記事です。Sassをただコンパイルするだけではなく、AutoprefixerやMinify・Source mapなどあると便利だと思う必要最低限の構成の作り方とそれぞれの使い方を解説していきます。 前提 npmコマンドをなんとなく使ったことがある gulpfile.jsというものは知っている 目指す構成 Sassのコンパイルをする Source mapを作成する Minifyする Autoprefixerでベンダープレフィックスを自動的に付与する 1〜4のことをファイルの変更があったら自動的に行う 学べること Gulp実行までの手順 Gulpのタスクの作り方 Gulpのタスクの実行の方法 ファイル監視の方法 環境設定 まずはGulpを動かすための環境を整えましょう。Gulpを使った
テンプレートエンジン「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上で使えます
gulp.js を今一度キチンと！gulp.js 導入基礎
フロントエンドのお仕事として、HTMLやCSS、JavaScript のコーディング回りを行っていると、以前に比べてやらなければならないことが増えてきていました。そのため、細々した作業でも、自動化して効率よく開発をすすめないと、時間がかかってしまうことが多いです。 そんなときに活用できるのが、今回使い方を紹介する gulp です。 gulp.js このエントリーでは、gulp が使えるように、gulp とはどういうものなのかの簡単な説明から、導入の基礎部分までを書いておきます。コピペでしか使ったことがない！という人や、誰かのコピペに頼って使っていたような人も、今後の活用していくための参考に利用してもらえたら嬉しいです。 gulp とは？ gulp.js は Node.js 製の毎回行うような作業を自動化してくれるツールです。よく様々なサイトでタスクランナーとして紹介されていますが、正確には
gulpのセットアップ windows編 - Qiita
Macと同じような手順でインストールを行おうとしたが、思った以上に時間を取ってしまったので、簡単なセットアップ方法をメモとして以下に残す。Windows7(32bit)で動作を確認した。 メリット 使う意味あるの？について、html,js,cssの高級言語をコンパイルして、結果をすぐ見れるプラグインがあるのが大きい。あるいは、コンパイル済みのcssに、自動でベンダプレフィックス（display:-webkit-boxなど）を付けるgulp-pleeeaseや、VannilaJSをCommonJSライクの記法で書けるようになるbrowserify／webpack、デザインの共通部分の隔離・継承・上書きが行えるjadeのプラグインがあり、gulpは、フロントエンドの開発に実用的と言える。 インストール git / Git Bash http://git-scm.com/downloads/ の
windows7でNode.jsとnpmその4 windows7にgulpをインストールする - Motomichi Works Blog
参考にさせて頂いたページ 5分で導入できる！ タスクランナーGulpを使ってWeb制作を爆速にしよう – ICS LAB gulp-imagemin gulpをグローバルにインストールする 5分で導入できる！ タスクランナーGulpを使ってWeb制作を爆速にしよう – ICS LAB を参考にしながら進めていく。 node.jsのインストールは済んでいるので 2.Gulpをグローバルにインストール からやっていく。 npm install -g gulp を実行したら > v8flags@1.0.8 install C:\Users\smotomichi\.nvmwv0.10.25\node_modules\gulp\node_modules\v8flags > node fetch.js C:\Users\smotomichi\.nvmwv0.10.25\gulp -> C:\Users
gulpfileをCoffeeScript等で書く方法
Task Runnerツールのgulpで、 タスクの設定は gulpfile.js という設定スクリプトを作って書くことになっています。 (任意のファイルを指定する場合は、コマンドライン引数の --gulpfile オプションで指定します) gulp/docs/getting-started.md at master · gulpjs/gulp Task Runnerツールとして有名なGruntでは、設定ファイルをjs以外にCoffeeScriptをデフォルトでサポートしているため、 オブジェクトの入れ子がたくさんできる gruntfile をCoffeeScriptで書くという人も多いと思います。 gulpでは、デフォルトでは js ですが、 --require オプションを使うことで任意のaltJSを使って、 gulpfile を書くことが出来るようになっています。 (この場合のデフォ
gulpが実行出来なくてハマった時に確認したこと - Qiita
先日とある理由でgulpを使ったのですが、思ったように実行できなかった時のメモ。 エラー内容 npm install 実行時 Error: Cannot find module 'wrappy' at Function.Module._resolveFilename (module.js:338:15) at Function.Module._load (module.js:280:25) at Module.require (module.js:364:17) at require (module.js:380:17) at Object.<anonymous> (/Users/maximum80/sample/node_modules/gulp/node_modules/orchestrator/node_modules/end-of-stream/node_modules/once/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gulp-autoprefixerをGridレイアウトに対応させる | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
gulpでSASSを自動コンパイルする - Qiita
『npm WARN package.json @ No repository field.』 と怒られたでござる
【散文】Gulpfile.js[coffee]（Sass,livereload）導入時の苦労話 - Qiita