gulpでJS,SCSSコンパイル環境

14472 ワード
gulp gulp テキストリンク

gulpのバージョン

❯ gulp -v                                                                                                                      (git)-[dev/threejs]
[16:21:15] CLI version 2.0.1
[16:21:15] Local version 4.0.0

gulp実行方法

下記のgulpfile.jsとpackage.jsonを置いて

$ npm install
$ gulp watch

で実行!
assets/js/とassets/scss/内のファイルを更新すると
assets/main-js/bundle.jsとassets/css/style.cssにそれぞれファイルが書き込まれる．

package.json
{
  "name": "dev",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^4.0.0",
    "gulp-sass": "^4.0.1"
  },
  "devDependencies": {
    "gulp-concat": "^2.6.1",
    "gulp-header": "^2.0.5",
    "gulp-plumber": "^1.2.0",
    "gulp-uglify": "^3.0.1",
    "gulp-webserver": "^0.9.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
gulpfile.js

// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass     = require('gulp-sass');
const plumber  = require('gulp-plumber');
const concat   = require('gulp-concat');
const uglify   = require('gulp-uglify');

// style.scssをタスクを作成する
// concat
gulp.task('scss.concat', function () {
    return gulp.src('assets/scss/*.scss')
    .pipe(plumber())
    .pipe(concat('style.scss'))
    .pipe(gulp.dest('assets/main-scss/'));
});
gulp.task('scss.compile', function () {
    // style.scssファイルを取得 ※return必須
    return gulp.src('assets/main-scss/style.scss')
        .pipe(plumber())
        // Sassのコンパイルを実行
        .pipe(sass({
            outputStyle: 'expanded'
        }))
        // cssフォルダー以下に保存
        .pipe(gulp.dest('assets/css'));
});

// jsファイル用
// concat
gulp.task('js.concat', function () {
    return gulp.src('assets/js/*.js')
    .pipe(plumber())
    .pipe(concat('bundle.js'))
    .pipe(gulp.dest('assets/main-js/'));
});
// コードを見にくくuglify
gulp.task('js.uglify', function() {
    return gulp.src('assets/main-js/bundle.js')
      .pipe(plumber())
      .pipe(uglify('bundle.min.js'))
      .pipe(gulp.dest('assets/main-js/'));
});
gulp.task('js', gulp.series('js.concat', 'js.uglify'))
gulp.task('scss', gulp.series('scss.concat', 'scss.compile'))



gulp.task('watch', function () {
    gulp.watch('assets/scss/*.scss', gulp.task('scss'));
    gulp.watch('assets/js/*.js', gulp.task('js'));
});

gulp.task('default', gulp.series( gulp.parallel('scss', 'js')));

使い方

HTMLファイル内で下記を追加

index.html
<head>
  <link rel="stylesheet" href="./css/style.css">
  <script src="./main-js/bundle.js"></script>
</head>
POJ1873
iBATIS 3試用手記3