Gulpをローカルにインストールしてプロジェクト内で使用する
最終更新日: Update!!
クライアント側でのコーディングは近年複雑になってきており、それに伴っていろんな作業が増えてきています。そこで少しでも作業時間を短縮するために、gulpというタスクランナーツールを使うことで効率よくコーディングを行うことが可能になります。今回は実際にプロジェクトで導入するフローをまとめていきたいと思います。
gulpをローカルへインストールする
まずは事前準備としてグローバルにgulpをインストールしておきます。下記のコマンドを入力します。詳しくは過去の記事「WEB開発環境(Mac OS)に必要な各種インストール方法まとめ(1)」をご参考に。$ sudo npm install gulp -g次にローカルにgulpをインストールを行うので、コマンドでプロジェクトフォルダまで移動します。プロジェクトフォルダに移動したらコマンドでgulpをローカルにインストールします。
$ cd プロジェクトフォルダ名 // プロジェクトフォルダまで移動する $ npm install --save-dev gulpインストールが終わると「node_modules」フォルダが生成されますので、下記コマンドでインストールが完了しているかを確認します。
$ gulp -v // CLIとLocalのバージョンが表示されればOKインストールが完了したら「package.json」ファイルを用意します。これは必要なパッケージを記録しておくためのファイルです。プロジェクトフォルダのnode_modulesと同じ階層で下記のコマンドを入力すると自動的に生成されます。
$ npm init -y次に下記の内容を記述したgulpfile.jsのjavascriptファイルを作成し、node_modulesフォルダ、package.jsonファイルと同じ階層に配置します。 【gulpfile.js】
var gulp = require("gulp");これでローカルでgulpの準備が整いました。
便利なgulpのプラグインを追加する
gulpにはいろんなプラグインが用意されており、それらを使うことでより効率的にコーディングを進めていくことが可能になります。ここではよく使うものをいくつかピックアップしていきたいと思います。それぞれコマンドを入力してインストールします。// CSS圧縮 $ npm install gulp-cssmin --save-dev // javascript圧縮 $ npm install gulp-uglify --save-dev // 画像圧縮 $ npm install gulp-imagemin --save-dev // Sassコンパイル $ npm install gulp-sass --save-dev // ファイル名リネーム $ npm install gulp-rename --save-dev
gulpへタスクを登録する
プラグインをインストールしたら、それぞれに対応したタスクをgulpfile.jsへコードで追記していき実行できるタスクを追加します。 【gulpfile.js】//【cssmin】css圧縮・ファイル名に.min追加 var cssmin = require("gulp-cssmin"); var rename = require("gulp-rename"); gulp.task("cssmin", function () { gulp.src("css/*.css") .pipe(cssmin()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('./css/min')); }); //【uglify】javascript圧縮・ファイル名に.min追加 var uglify = require("gulp-uglify"); var rename = require("gulp-rename"); gulp.task("jsmin", function() { gulp.src(["js/**/*.js","!js/**/*.min.js"]) .pipe(uglify()) .pipe(rename({ extname: '.min.js' })) .pipe(gulp.dest("./js/min")); }); //【image】PNG画像圧縮 var image = require("gulp-image"); gulp.task("image", function() { gulp.src("img/*.png") .pipe(image()) .pipe(rename({ extname: '.min.png' })) .pipe(gulp.dest("img/")); }); //【sass】Sass(scssファイル)コンパイル var sass = require("gulp-sass"); gulp.task("sass", function() { gulp.src("scss/**/*.scss") .pipe(sass()) .pipe(gulp.dest("./css")); });これらのコードを追記するとそれぞれ以下のコマンドでタスクを実行できるようになります。
$ gulp cssmin // CSS圧縮のタスクを実行 $ gulp jsmin // javascript圧縮のタスクを実行 $ gulp image // PNG画像圧縮のタスクを実行 $ gulp sass // sassファイルコンパイルのタスクを実行
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories