プログラムメモ

gulp(タスク自動化ツール)

トップに戻る

新規投稿
タグ「gulp」での検索

gulpでSFTPでファイルをサーバにアップロードする

gitが使用できないサーバの時はgulpからSFTPでファイルをアップロードできるようにするととても便利です。
gulp version4 では gulp-sftp がうまく動作しないので gulp-sftp-up4 を使用します。

● gulpでSFTPファイルアップロードする gulp-sftp-up4

gulp-sftp-up4のインストール

npm install --save-dev gulp-sftp-up4

gulp-sftpのGulp設定（gulpfile.js に記述）

var my_json = load_json(__dirname + '/gulp_ftp.json');
console.log( my_json );

gulp.task('sftp', function () {
    return gulp.src( my_json.file_options )
        .pipe(sftp( my_json.ftp_options ));
});

sftpの設定ファイル（ gulp_ftp.json ）

{
    "file_options" : [
        "www/**", 
        "!www/test/**", 
        "!www/**/___*"
    ] ,
    "ftp_options" : {
      "host"      : "xxx.yyy.com",
      "port"      : 22,
      "user"      : "hogehoge",
      "pass"      : "fugafuga",
      "remotePath": "/var/www/mysite/htdocs/"
    }
}

アップロードするファイルのルールは
ローカルの（./www）以下の全てのファイルを、サーバ上の（/var/www/mysite/htdocs/）へアップロードする
ローカルの（ ./www/test/）フォルダ以下はアップロードしない
ローカルの先頭アンダーバー3つで始まるファイル（ 例:___myfile.html ）はアップロードしない
です。

remotePath は 必ずスラッシュ（/）で始まる絶対パスで表記すること。 絶対パスでないとディレクトリ作成時に下記エラー

SFTP error or directory exists:

が出ます。

No.1046
01/08 16:38

edit

gulp

gulpのWEBサーバでPHPを使用する

gulpのWEBサーバでPHPを動作させるには gulp-connect-php を使用します。
https://www.npmjs.com/package/gulp-connect-php
browser-sync と連携するには以下のようにします。

● gulp-connect-php , browser-sync のインストール

npm install --save-dev gulp
npm install --save-dev gulp-connect-php
npm install --save-dev browser-sync

var gulp = require('gulp'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync');
 
gulp.task('connect-sync', function() {
  connect.server({}, function (){
    browserSync({
      proxy: '127.0.0.1:8000'
    });
  });
 
  gulp.watch('**/*.php').on('change', function () {
    browserSync.reload();
  });
});
No.1045
07/11 14:56

edit

gulp

gulpでJavaScript, CSS, 画像 を圧縮 + 便利な機能を使用する

このページのGulpプラグインを一気にインストールするには

npm install --save-dev gulp
npm install --save-dev gulp-uglify
npm install --save-dev gulp-cssmin
npm install --save-dev gulp-rename
npm install --save-dev imagemin

gulp-uglify : JavaScriptを圧縮する
gulp-cssmin : CSSを圧縮する
gulp-rename : ファイル名をリネームする

● JavaScriptをコメントを残して圧縮（minify）する uglify

uglifyのインストール

npm install --save-dev gulp-uglify

uglifyのGulp設定（gulpfile.js に記述）

//
// JavaScript minify設定（uglify）
//
var uglify = require("gulp-uglify");
var rename  = require( 'gulp-rename' );
gulp.task('jsmin', function() {
    gulp.src('./js/*.js')
        .pipe(uglify({preserveComments: 'some'}))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./js_min'));
});

コメントを残す方法（ ! を以下のようにつける）

/*! 
  残したいコメント
*/

● CSSを圧縮（minify）する cssmin

cssminのインストール

npm install --save-dev gulp-cssmin

cssminのGulp設定（gulpfile.js に記述）

//
// CSS minify設定
//
var cssmin = require( 'gulp-cssmin' );
var rename = require( 'gulp-rename' );
gulp.task('cssmin', function () {
    gulp.src('./css/*.css')
    .pipe( cssmin() )
    // .pipe( rename({suffix: '.min'}) )
    .pipe( gulp.dest('./css_min') );
});

● CSSスタイルガイドジェネレーター frontnote

CSSスタイルガイドジェネレーターはCSSファイルからのドキュメントを生成するとても便利なものです。 frontnote以外にも kss-node, sc5-stylgeduige, などがありますが frontnoteは簡単で使いやすいのでおすすめです。

frontnoteのインストール

npm install frontnote --save-dev
npm install --save-dev gulp-frontnote

frontnoteのGulp設定（gulpfile.js に記述）

//
// CSSスタイルガイド frontnote 設定（ .scss ファイルからスタイルガイドを生成します）
//
var frontNote = require('gulp-frontnote');
gulp.task('frontnote', function () {
gulp.src('./scss/*.scss')
    .pipe(frontNote({
	    out: './frontnote',
    }));
});

● 画像（ jpg , png ）を圧縮する imagemin

imageminのインストール

npm install --save-dev gup-imagemin

imageminのGulp設定（gulpfile.js に記述）

// // jpeg , png 圧縮設定 // var imagemin = require('gulp-imagemin'); gulp.task('imagemin', function(){

gulp.src(['www/img/*.{png,jpg}', 'www/img/*/*.{png,jpg}'])
	.pipe(imagemin())
    .pipe(gulp.dest('www/img/'));

});

No.1043
07/19 10:53

edit

gulp