今回は非常にプロジェクトや、使いどころを選びますが、ウォッチしている SCSS に変更があった場合、コンパイルを行い、生成された CSS ファイルを FTP アップロードする方法をメモしておきます。
目次
- Gulp で SCSS コンパイル後に FTP アップロードする
- まとめ
Gulp で SCSS コンパイル後に FTP アップロードする
下記のパッケージをインストールし、gulpfile でタスクを設定します。
path.src に対象となる scss ファイルがあるフォルダを、path.dest に css ファイル出力先のフォルダを指定します。
※下記 gulpfile では、CSS の minify は行ってますが、css ファイルのみアップロードするタスクとなっています。
npm install
[code]
npm install gulp gulp-autoprefixer gulp-clean-css gulp-notify gulp-rename gulp-sass ftp-deploy –save–dev
[/code]
gulpfile.js
[code]
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’));
});
[/code]
まとめ
今回の説明は FTP アップロードという利用用途が限定されてしまう方法です。
利用例としては、WordPress のテーマファイルに SCSS を利用し、本番環境で確認しながら スタイル修正行い、頻繁に CSS アップロードを行うような場合、非常に有効な方法かと思います。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
