帰ってきたGulp 4 - Qiita
2014年あたりから、v4が出なくてやきもきしていましたが、待つこと3年(4年?)、2018年のはじめにv4.0.0がリリースされました。2018年現在の視点で、v4をチェックしてみたいと思います。 タスクは関数に 以下、GitHubにある例からの抜粋です。(多少変形しています) import {src, dest} from 'gulp' import less from 'gulp-less' import rename from 'gulp-rename' import cleanCSS from 'gulp-clean-css' export default () => src('src/style.css') .pipe(less()) .pipe(cleanCSS()) .pipe(rename({basename: 'main', suffix: '.min'})) .pip
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を使った
[Gulp]これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみるでgulp-sassを使ってSCSSファイルをCSSにコンパイルするタスクを作成しました。今回はそのタスクをベースにSCSSファイルの変更を監視してタスクを実行するようにします。 watchタスクを作る まず、前回のgulpfile.jsをお復習いです。Sassを実行するだけのsassという名前のタスクが作られています。コメントの部分にwatchタスクを作ります。 var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function(){ gulp.src('./src/scss/*.scs
![[Gulp]これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
gulpでsassをコンパイルするタスクを作る - yutaponのブログ
何番煎じかわからないけど、gulpを使ってみたら中々良かったのでまとめてみます。 gulp.jsとは gulp.js はフロントエンド用のタスクランナーってやつです。 同じタスクランナーの競合に Grunt がありますが、後発だけあってストリームを駆使して可読性の良い設定ファイルが書けます。 Gruntでできることは大体gulpでもできるので、どちらを使ったら良いかは好みの問題かも知れません。 この記事ではsassのコンパイルをするタスクと、関連してベンダープレフィックスを自動で付与するところまで紹介します。 gulpのインストール npmコマンドでサクッと入れます。 $ npm install -g gulp これでgulpコマンドが使えるようになりました。 gulpでsassのコンパイルをする gulpでsassをコンパイルするのに、こちらのプラグインを使います。 gulp-ruby-
便利なGruntの弱点を補うgulp.jsのインストールと使い方
詳しくは上記連載を見てもらえば分かりますが、GruntとはJavaScriptを使用してWeb開発に伴うさまざまな作業を自動化して効率良く行うためのビルドツールです。 このツールでは「タスク」と呼ばれる一連の処理を設定ファイルに記述していきます。Gruntの設定ファイル（Gruntfile.js）は、タスクに対してJSON形式でパラメーターを指定していくのですが、ここで少々問題があります。 シンプルなタスクであれば分かりやすいのですが、多くの拡張機能（プラグイン）を使用したり、タスクの制御を細かく行う必要が生じたたりした場合、Gruntfileの記述量が増えて冗長になり、タスク同士の関連やタスク実行結果も分かりにくくなってしまいます。 そんなGruntの問題点を解消することを目的として開発されたのが、今回紹介する「gulp.js」（以下、gulp）です。 gulpはGruntを継承しつつ、
ターミナルをカラフルでかわいくする - ゆるりブログ
ターミナル、デフォルトだと味気ないけどちょっと設定すればカラフルでかわいくすることができる。モノクロだと何が起こっているのかわからなくなるけど、色がついてるとどこに注目するべきかとか比較的わかりやすくなる。 諸事情あってPCを初期化していろいろと設定し直さなくちゃいけなくなったので、iTerm2とoh-my-zshを使ってターミナルをかわいくする方法をメモ代わりに書いておく。 iTerm2 ⌘+Dや⌘+Shift+Dでウィンドウを割ることができるのでiTerm2使ってる 私はローカルサーバー起動したりCSSのメタ言語をコンパイルしたりgruntやgulpみたいなタスクランナーを走らせることがあるのだけれど、それがタブをまたがず表示させられるので良い iTerm2 - Mac OS Terminal Replacement ここから「Download」してアプリケーションに追加すると良い i
タスクランナー「gulp」の導入手順（Windows）
前に同じタスクランナーのGruntを導入してみましたが、gulpというのも結構話題に見るのでこちらも導入し試してみました。 エラーがでてインストールできない人は、ページの下の方に自分がとった解決策が書いてあります。 gulpとは gulpとはnode.jsを使ったタスクランナーです。機能的にはGruntと一緒です。設定を記すgulpfile.jsの書き方が少し違うのと、処理スピードがGruntより速いようです。 公式サイトはこちらから gulp.js – the streaming build system インストール 基本的なインストール方法はGruntと一緒です。 こちらのコマンドをコマンドプロンプトに入力します。 npm install -g gulp 次にそのプロジェクトフォルダの階層まで移動します。 cd 階層へのパス ここで試しにgulpのバージョンを確認してみます。 gul
ビルドツールまとめ。Gruntとかgulpとか (フロント寄り) - Qiita
はじめに そろそろ、使っていないと後ろ指をさされそうな雰囲気になってきた、ビルドツール各種ですが、業界(?)の全体像をなんとなく眺めてみたいと思います。動きとしてはRuby界隈が早く、Guardが2010年あたりから、それを参考にする形でGruntが出てくるのが2011年、gulpについてはまだ1年未満という状況ですが、特にJavaScript周りは活況です。 下記、主にGitHubの各種数値を並べています。コミュニティの盛り上がりや成熟度の判断の参考として。 名称 環境 設定ファイル 可読性 GitHub プラグイン Issues 初コミット
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
Gruntについて最新の気持ち
思いつき だいぶ前からGrunt周りというかGruntそのものへの関心が薄れゆくなか、タスク周りがやたらと充実してきたエコシステムの恩恵を、ただただ享受するにとどまっている。 業務で700行のGruntfile.jsを見かけて、SAN値をもっていかれた折に前々から感じていた疑念が表に出た。 「これ、Gruntに仕事させすぎじゃないの」 分担してもよいのでは 前述の700行のなかには、ファイルのビルドをはじめとして、ユニットテスト、E2Eテスト、ドキュメント生成、ローカルサーバー、LiveReload etc etc etc ...すべてひとつのファイルに入っていた。 (; ⁰⊖⁰) Oh... いまいち感覚的なトコロなので表現しづらいのだが、役割としてあまりにGruntfileで表現している内容がごった煮すぎるように思う。 自分の場合、テスト周りはtestemにしていて、ドキュメント生成系
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
re-dzine.net situs togel online toto 2023 -