Memo

Gulpの諸々を検証

必ず使うタスクランナーGulpとGruntの基本コード9選 - ICS MEDIA
https://ics.media/entry/9199■複数のファイルを一度にコンパイルconst gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('default', function() {
  return gulp
    .src([
      'sass/test1.scss',
      'sass/test2.scss'
    ])
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(gulp.dest('dist/css'));
});
■複数のファイルをコンパイルして1ファイルに結合

※要プラグインインストール

>npm install -D gulp-concat


以下のように使用する

const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat');

gulp.task('default', function() {
  return gulp
    .src([
      'sass/*.scss'
    ])
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(concat('style.css'))
    .pipe(gulp.dest('dist/css'));
});
■CSSファイルから改行などを削除して圧縮

※要プラグインインストール

>npm install -D gulp-clean-css


以下のように使用する

const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');

gulp.task('default', function() {
  return gulp
    .src([
      'sass/*.scss'
    ])
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(concat('style.css'))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
});
■画像を最適化

※要プラグインインストール

>npm install -D gulp-imagemin


以下のように使用する
画像は img に保存する

const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
const imagemin = require('gulp-imagemin');

gulp.task('sass', function() {
  return gulp
    .src([
      'sass/*.scss'
    ])
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(concat('style.css'))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('image', function() {
  return gulp
    .src([
      'img/*.png'
    ])
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'));
});

gulp.task('default',
  gulp.series(
    'sass',
    'image'
  )
);
■TypeScriptをコンパイル

※要プラグインインストール

>npm install -D typescript
>npm install -D gulp-typescript


TypeScriptのファイルは ts/test.ts とし、以下を記述しておく

var Message:string;
Message = 'Hello TypeScript';
alert(Message);


以下のように使用する

const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
const typescript = require('gulp-typescript');
const imagemin = require('gulp-imagemin');

gulp.task('sass', function() {
  return gulp
    .src([
      'sass/*.scss'
    ])
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(concat('style.css'))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('ts', function() {
  return gulp
    .src([
      'ts/*.ts'
    ])
    .pipe(typescript({
      target: 'ES5',
      removeComments: false
    }))
    .pipe(gulp.dest('dist/js'));
});

gulp.task('image', function() {
  return gulp
    .src([
      'img/*.png'
    ])
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'));
});

gulp.task('default',
  gulp.series(
    'sass',
    'ts',
    'image'
  )
);
■JSファイルから改行などを削除して圧縮

※要プラグインインストール

>npm install -D gulp-uglify


以下のように使用する

const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
const typescript = require('gulp-typescript');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');

gulp.task('sass', function() {
  return gulp
    .src([
      'sass/*.scss'
    ])
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(concat('style.css'))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('ts', function() {
  return gulp
    .src([
      'ts/*.ts'
    ])
    .pipe(typescript({
      target: 'ES5',
      removeComments: false
    }))
    .pipe(concat('script.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

gulp.task('image', function() {
  return gulp
    .src([
      'img/*.png'
    ])
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'));
});

gulp.task('default',
  gulp.series(
    'sass',
    'ts',
    'image'
  )
);
■package.json をもとにインストール

いつも使うGulpのプラグインをpackage.jsonで一括インストールする | WebMemo
https://webmemo.work/gulp-npm-install/

例えば以前作成した package.json がある場合、その階層で以下を実行することで同じものをインストールできる

>npm install


package.json の内容は、一例だが以下のようなものになる

{
  "name": "gulp-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-changed": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-plumber": "^1.2.1",
    "gulp-sass": "^4.1.0",
    "gulp-typescript": "^6.0.0-alpha.1",
    "gulp-uglify": "^3.0.2",
    "typescript": "^4.0.5"
  }
}
Memo

Advertisement
