WEB制作(html・css(スタイルシート))に関する各種メモ書き:タグ「gulp」での検索

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

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

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

gulp-sftpのインストール

npm install --save-dev gulp-sftp

gulp-sftpのGulp設定(gulpfile.js に記述)

//
// SFTP 設定
//
var sftp   = require('gulp-sftp');
var fs    = require('fs');
var load_json = function(filename) {
  return JSON.parse(fs.readFileSync(filename, 'utf8'));
};
gulp.task('sftp', function () {
  	var my_json = load_json(__dirname + '/gulp_ftp.json');
    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/test/)フォルダ以下はアップロードしない```  
``` ローカルの先頭アンダーバー3つで始まるファイル( 例:___myfile.html )はアップロードしない```  
です。

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

```
SFTP error or directory exists:
```

が出ます。
No.1046
07/19 15:28

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