Update!

JavaScript: Gulp で SCSS コンパイル後に FTP アップロードする

今回は非常にプロジェクトや、使いどころを選びますが、ウォッチしている SCSS に変更があった場合、コンパイルを行い、生成された CSS ファイルを FTP アップロードする方法をメモしておきます。

目次

  • Gulp で SCSS コンパイル後に FTP アップロードする
  • まとめ

Gulp で SCSS コンパイル後に FTP アップロードする

下記のパッケージをインストールし、gulpfile でタスクを設定します。
path.src に対象となる scss ファイルがあるフォルダを、path.dest に css ファイル出力先のフォルダを指定します。

※下記 gulpfile では、CSS の minify は行ってますが、css ファイルのみアップロードするタスクとなっています。

npm install

npm install gulp gulp-autoprefixer gulp-clean-css gulp-notify gulp-rename gulp-sass ftp-deploy --save--dev

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var rename = require('gulp-rename');
var cleanCSS = require('gulp-clean-css');

var FtpDeploy = require('ftp-deploy');
var ftpDeploy = new FtpDeploy();

// paths
const paths = {
    src: '/path/to/scss/',
    dest: '/path/to/css/'
}

// Sass compile task
gulp.task("scss", function () {
    return gulp.src('./scss/**/*.scss') // コンパイル対象 scss
        .pipe(sass())
        .pipe(autoprefixer()) // ベンダープレフィックス付与
        .pipe(gulp.dest('./css')); // 出力
});

// .min.css generate task
gulp.task("mincss", function () {
    return gulp.src('css/**/style.css') //上のタスクで生成した css
        .pipe(cleanCSS()) // css 圧縮
        .pipe(rename({
            extname: '.min.css'
        })) // .min.css にリネーム
        .pipe(gulp.dest('./css')) // min.css 出力
        .pipe(notify({
            title: 'compiled!',
            message: new Date(),
            sound: 'Pop'
        }));
});

// ftp-deploy
gulp.task("ftp", done => {
    var config = {
        user: "your account user",
        password: "your ftp password",
        host: "hostname",
        port: 21,
        localRoot: paths.src,
        remoteRoot: paths.dest,
        include: ['style.css', '**/style.css'],
        deleteRemote: false,
        forcePasv: true
    };
    ftpDeploy.deploy(config, function (err) {
        if (err) console.log(err);
        else console.log('ftp deploy finished');
    });
    done();
});

gulp.task("default", function () {
    // scss watch & ftp deploy
    gulp.watch('./scss/**/*.scss', gulp.series('scss', 'mincss', 'ftp'));
});

まとめ

今回の説明は FTP アップロードという利用用途が限定されてしまう方法です。
利用例としては、WordPress のテーマファイルに SCSS を利用し、本番環境で確認しながら スタイル修正行い、頻繁に CSS アップロードを行うような場合、非常に有効な方法かと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents