gulp - yagisawatakuya/Wiki GitHub Wiki

node.js

nodist依存ファイルのアップデート

nodist update

node.jsの最新の安定板をインストール

nodist stable

バージョン確認

node -v

gulp install

参考：https://ics.media/entry/3290

1.ディレクトリ移動

cd ★★★

2.package.jsonファイル生成

npm init -y

3.gulp install

npm install -D gulp
npm install gulp --save-dev

// 複数インストール例
npm install autoprefixer browser-sync gulp gulp-cached gulp-changed gulp-imageoptim gulp-plumber gulp-postcss gulp-rename gulp-sass --save-dev

※gulp uninstall

npm uninstall プラグイン名 --save-dev

// 複数アンインストール例
npm uninstall autoprefixer browser-sync gulp gulp-cached gulp-changed gulp-imageoptim gulp-plumber gulp-postcss gulp-rename gulp-sass --save-dev

gulp構築

// plugin - 読み込み
var autoprefixer = require('autoprefixer');
var browserSync = require('browser-sync');
var gulp = require('gulp');
var cache = require('gulp-cached');
var plumber = require('gulp-plumber');
var postcss = require('gulp-postcss');
var rename = require( 'gulp-rename');
var sass = require('gulp-sass');


gulp.task('default', ['watch', 'scss', 'server']);

// watch - 監視
gulp.task('watch', () => {
  gulp.watch(`./src/**/scss/**/*.scss`, ['scss']);
  gulp.watch(`./src/**/*`, ['server-reload']);
});

// scss - sassファイルコンパイル
gulp.task("scss", () => {

  //ファイルの参照先を指定
  gulp.src('./src/**/scss/**/*.scss', {base: './src/'})// base - 階層構造を維持したまま出力

    // エラー時にwatchを止めない
    .pipe(plumber())

    // 更新のあったファイルのみを実行
    .pipe(cache('sass'))

    // アプトプットスタイルにコンパイル
    .pipe(sass({
      outputStyle: 'expanded'
    }))

    // ベンダープリフィックス自動追加
    .pipe(postcss([
      autoprefixer({
        browsers: [
          'ie >= 11',
          'last 2 Edge versions',
          'last 2 Chrome versions',
          'last 2 Firefox versions',
          'last 2 Safari versions',
          'iOS >= 9.3',
          'Android >= 4.2'
        ]
      })
    ]))

    // css ⇔ Scss　リネーム
    .pipe(rename((path) => {
      path.dirname = path.dirname.replace('scss', 'css');
    }))

    //処理を行ったファイルの保存先を指定
    .pipe(gulp.dest('./src/'));

});

// browserSync - 対象ディレクトリとインデックスファイルの指定
gulp.task('server', () => {
  browserSync({
    server: {
      baseDir: './src/',
      index: 'index.html'
    }
  });
});

// ブラウザのリロードを自動化
gulp.task('server-reload', () => {
  browserSync.reload();
});

MEMO

  1. プロジェクトフォルダを用意
  2. コマンドラインを開く
  3. PC（グローバル）にgulpをインストール
npm install -g gulp-cli
もしくは
sudo npm install --global gulp-cli
  1. cdコマンドでローカルのHTMLフォルダに移動
  2. 以下を実行し、プロジェクトの依存パッケージをダウンロード
npm install
  1. 以下を実行しファイル監視を開始
gulp
  1. "src"フォルダの内容を編集
  2. "dist"フォルダに出力されたファイルをFTPでアップロード

参考

http://horicdesign.com/gulp/entry-194.html
https://hatsuka.info/coding/gulp
http://satohmsys.info/gulp-scss-compile/
https://blog.mismithportfolio.com/web/20160911postcss
http://cly7796.net/wp/other/to-copy-the-development-directory-in-gulp/
https://qiita.com/toshihirock/items/b6d8193f83d5d6ee2002
https://qiita.com/morishitter/items/46c751b9df09eeef2d7e
https://qiita.com/youthkee/items/f456fb5730655cc8f9c2
http://book2.scss.jp/code/c5/05.html

特定のディレクトリやファイルを対象から除外する方法

https://www.nxworld.net/services-resource/gulp-exclude-files-and-directories-task.html

gulp.task('ejs', function() {
  gulp.src(['src/ejs/**/*.ejs', '!src/ejs/**/_*.ejs'])
      .pipe(ejs({}, {ext: '.html'}))
      .pipe(gulp.dest('dist'))
});

配列

gulp.src(['★★', '★★'])

Electron

・実行ファイルの作成

electron-packager ./ sample ––platform=darwin,win32 ––arch=x64 ––version=2.0.0

Back to Top

⚠️ **GitHub.com Fallback** ⚠️