BLOG

商用環境と開発環境で異なる処理を実行する

商用環境と開発環境でgulpタスクを変えないといけない理由

例 :sourcemaps

商用環境では通信量が増え、一般ユーザーに公開しないほうが良い為

gulpfile.js

const {src, dest, watch, series, parallel} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const pkg = require('./package.json');
const conf = pkg["gulp-config"];
const sizes = conf.sizes;
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync');
const server =  browserSync.create();
const isProd = process.env.NODE_ENV === "production";//ここを付け加え、この場合に商用環境と判定する。


function icon(done){
    for(let size of sizes){
        let width = size[0];
        let height = size[1];
         src('./favicon.png')
            .pipe($.imageResize({
                width,
                height,
                crop: true,
                upscale: false
            }))
            .pipe($.imagemin())
            .pipe($.rename(`favicon-${width}×${height}.png`))
            .pipe(dest('./dist/images/icon'));
        }
        done();
    }

function styles(){
    return src('./src/sass/main.scss')
        .pipe($.sourcemaps.init())
        .pipe($.sass())
        .pipe($.postcss([
            autoprefixer({
                "overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"],
                cascade: false
            })
        ]))
        .pipe($.sourcemaps.write('.'))
        .pipe(dest('./dist/css'));
}

function scripts(){
    return src('./src/js/*.js')
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.sourcemaps.write('.'))
    .pipe(dest('./dist/js'));
}

function lint(){
    return src('./src/js/*.js')
    .pipe($.eslint({fix: true}))
    .pipe($.eslint.format())
    .pipe($.eslint.failAfterError())
    .pipe(dest('./src/js'))
}

function startAppServer(){
    server.init({
        server: {
            baseDir: './dist'
        }
    });
    watch('./src/**/*.scss', styles);
    watch('./src/**/*.scss').on('change', server.reload);
}

const serve = series(parallel(styles, series(lint, scripts)), startAppServer);

exports.icon = icon;
exports.styles = styles;
exports.scripts = scripts;
exports.lint = lint;
exports.serve = serve;

次に使用するmoduleをインストール

yarn add gulp-if cross-env --dev

package.jsonの”scripts”を下記に変更


  "scripts": {
    "start": "cross-env NODE_ENV=production gulp serve"
  },

環境変数を設定することが出来る。

NODE_ENV=productionとすることでNODE_ENVという変数にproductionという文字列が設定された状態で後に続くコマンドが実行されるので

gulpfile.jsの

const isProd = process.env.NODE_ENV === “production”;

がtrueになる

これがtrueのとき商用環境用に実行されている状態となる

sourcemapsを商用環境で実行させないようにする

gulpfile.js

const {src, dest, watch, series, parallel} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const pkg = require('./package.json');
const conf = pkg["gulp-config"];
const sizes = conf.sizes;
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync');
const server =  browserSync.create();
const isProd = process.env.NODE_ENV === "production";


function icon(done){
    for(let size of sizes){
        let width = size[0];
        let height = size[1];
         src('./favicon.png')
            .pipe($.imageResize({
                width,
                height,
                crop: true,
                upscale: false
            }))
            .pipe($.imagemin())
            .pipe($.rename(`favicon-${width}×${height}.png`))
            .pipe(dest('./dist/images/icon'));
        }
        done();
    }

function styles(){
    return src('./src/sass/main.scss')
        .pipe($.if(!isProd, $.sourcemaps.init())) //ここを変更
        .pipe($.sass())
        .pipe($.postcss([
            autoprefixer({
                "overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"],
                cascade: false
            })
        ]))
        .pipe($.if(!isProd, $.sourcemaps.write('.'))) //ここを変更
        .pipe(dest('./dist/css'));
}

function scripts(){
    return src('./src/js/*.js')
    .pipe($.if(!isProd, $.sourcemaps.init())) //ここを変更
    .pipe($.babel())
    .pipe($.if(!isProd, $.sourcemaps.write('.'))) //ここを変更
    .pipe(dest('./dist/js'));
}

function lint(){
    return src('./src/js/*.js')
    .pipe($.eslint({fix: true}))
    .pipe($.eslint.format())
    .pipe($.eslint.failAfterError())
    .pipe(dest('./src/js'))
}

function startAppServer(){
    server.init({
        server: {
            baseDir: './dist'
        }
    });
    watch('./src/**/*.scss', styles);
    watch('./src/**/*.scss').on('change', server.reload);
}

const serve = series(parallel(styles, series(lint, scripts)), startAppServer);

exports.icon = icon;
exports.styles = styles;
exports.scripts = scripts;
exports.lint = lint;
exports.serve = serve;

$.if()で第一引数に条件文を。

第2引数に、実行したい処理を記述する。

isProdがtrueでないときに、sourcemapsが走る

逆に

package.json

  "scripts": {
    "start": "cross-env NODE_ENV=production gulp serve",
    "dev": "gulp serve" //ここ追加
  },

このようにコマンドを設定すると、Productionという文字列が設定されていない状態でタスクが走るので、isProdがfalseになりsoucemapsが生成されることになる

コマンドを実行

これはsoucemapsが出来ないver

yarn run start

soucemapsが出来るver

yarn run dev