Sublime Text で sass(scss)の最速コンパイルを行う( node-sass / gulp-sass )

いろいろ試した結果、次の node-sass を使う方法が最も速くおすすめです。

● node-sass をインストールする

node-sass グローバル環境にインストールします。(どこのディレクトリにいても使用できるようになります)

npm install -g node-sass

● gulp-sass をインストールする

gulp-sass をローカル環境にインストールします。

npm install gulp-sass --save-dev

gulpfile.js は 以下のようなファイルで作成します。

var gulp    = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./html/assets/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./html/assets/css'));
});

● SublimeTextにビルドを追加する(手動)

Package Controlからインストールできる SASS Build は Rubyのsass を使用するので動作が遅い。 そこで、手動で gulp-sass を使用するように手動でビルドを作成します。

1. ツール → ビルドシステム → ビルドシステム追加

2. 以下の内容で保存

ファイル名は SASS.sublime-build など好きなのをつけてください。
拡張子は .sublime-build から変更しないこと 。
path に 自分の環境の node-sass のパスを記述します。

{
	"cmd" : ["gulp sass"],
	"selector" : ["source.scss"],
	"shell" : true,
	"working_dir": "$project_path" ,
		"osx": {
		    "path": "$HOME/.nodebrew/current/bin/node-sass:$PATH"
		},
}

これでビルドシステムを「SASS」にしてビルド実行で sass → css 変換が行われます。 

● 保存して更新するたびに自動でビルドするように設定する

SublimeOnSaveBuild

をインストールします。 これで自動ビルドが実行されます。

No.1288
10/20 21:09

edit

gulpのwebサーバで高速にLiveReloadする

● gulp-connectのインストール

npm install --save-dev gulp-connect

● ファイル構成

例えば下記のように「www」にhtmlファイル、「assets」以下にcssやjsファイルが入っている構成を想定します。

└── www
└── assets
    ├── css
    ├── font
    ├── img
    └── js

● gulpfile.js の編集

gulpfile.js に以下を追記します

//
// connect 設定
//
var connect = require('gulp-connect');
gulp.task('connect', function() {
    gulp.src("./").pipe(exec('open http://localhost:8080'));
    connect.server({
        root      : 'www',
        livereload: true
    });
});
// connect用LiveReload
gulp.task('reload-www', function () {
    gulp.src(['./www/*.html','./www/*/*.html','./www/assets/*/*.*'])
        .pipe(connect.reload());
});
// connect用監視:ファイルが変更されたら'reload-www'を実行する
gulp.task('reload-watch', function () {
    gulp.watch(['./www/*.html','./www/*/*.html','./www/assets/*/*.*'], ['reload-www']);
});
// タスク設定
gulp.task('connect-live', ['connect','reload-watch']);

● サーバの起動

gulp connect-live

これで、該当ファイルが更新された時に「高速に(少なくとも gulp-webserver よりは。)」LiveReloadします

No.1281
07/31 10:53

edit

VS Code で gulp-ejs を使って ejs をコンパイル(ビルド)する

VS Code で gulp-ejs を使って ejs をコンパイル(ビルド)する

・ 1. tasks.json の作成

何かの .ejs ファイルを開いた状態で

タスク → 既定のビルド タスクの構成

から、デフォルトの tasks.json を作成します

・ 2. tasks.json の編集

tasks.json を下記の内容で作成します。

{
    "version": "2.0.0",
    "options": {
        "cwd": "${workspaceRoot}/../"
    },
    "tasks": [
        {
            "label": "ejs",
            "type": "shell",
            "command": "gulp",
            "args": [
                "ejs"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
            
        }
    ]
}

タスク実行時に

    "options": {
        "cwd": "${workspaceRoot}/../"
    },

でディレクトリを変更しているので、適宜書き換えてください。

No.1275
07/19 10:31

edit

VS codeのおすすめ拡張機能と設定の変更

WEB系エンジニアにオススメのVisual Studio Code の拡張機能

VS Code

https://code.visualstudio.com/

● 爆速 自動リロードサーバ 「Live Server」

かなり高速です。gulpの「gulp-webserver」「gulp-connect」より速い。

・VS code Live Server の起動方法

・VS code で表示させたいフォルダを開く
・「Command + Shift + P」 → 「Live Server: Change Liver Server work space」からフォルダを選択
・「Command + Shift + P」 → 「Live Server: Open with Liver Server」でブラウザで 「http://127.0.0.1:5500」が開く
(または画面一番下のステータスバーのところ Go Live を押しても ok)

● ブックマーク機能をつける「Bookmarks」

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

● ケースを変換 ( PascalCase → camelCase )

https://github.com/wmaurer/vscode-change-case

● = でコードを揃える「Code alignment」

https://marketplace.visualstudio.com/items?itemName=cpmcgrath.Codealignment

● 選択範囲の拡張を細かくする「expand-region」

https://marketplace.visualstudio.com/items?itemName=letrieu.expand-region
インストール後に「expand-region」の動作を「Command + space」に割り当てると SublimeTextぽくなります。

● HTML + CSS 用インテリセンス(IntelliSense for CSS class names in HTML)

https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

● SHIFT + return で <BR> コードを入力する (Insert <br> Tag)

● PHP用 インテリセンス

入力補完や( command + shift + o → : )でメソッド一覧を表示することができます。 https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense

● ファイル比較(diff)

比較したい二つのファイルを開いておいて「Command + shift + P」 → 「diff」でファイル比較を実行してくれます

● デフォルトのカラーテーマの色を変更する

C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-defaults\themes

を変更する

● ローカルのファイル名入力を自動で保管

https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename

● 自動でバックアップ

https://marketplace.visualstudio.com/items?itemName=xyz.local-history

● SCSS (SASS) をコンパイル 「Live Sass Compiler」

次のような設定ファイルを「Code」→「基本設定」→「設定」 に記述しておきます。
.scss ファイルを開いて、画面一番下の Watch アイコンをクリックして、 .scss ファイルを保存すると自動的に 「 ../css/xxxxx.css 」「 ../css_min/xxxxx_min.css 」ファイルが生成されます。

      // Live Sass Compiler
      "liveSassCompile.settings.formats":[
        // css
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css/"
        },
        // css (minified)
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../css_min/"
        }

● CSSを自動でフォーマット

https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-csscomb

・インストール後の設定方法

1. 設定ファイルを下記サイトから作成する

http://csscomb.com/config

2. 任意のフォルダに csscomb.json で保存する

csscomb.json の 例

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "\t",
    "color-shorthand": false,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": true,
    "quotes": "double",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": " ",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "vendor-prefix-align": true
}

3. VS code の設定ファイルに csscomb.json の場所を記述して保存

      // CSS, scssファイル保存時にCSSCombを実行
      "csscomb.formatOnSave": true,
      // csscomb.json の場所を指定
      "csscomb.preset": "YOUR_FOLDER/VS_code_csscomb/csscomb.json"

● VS Codeでダブルクリックした時にハイフン( - )も選択されるようにする

「Code」 →「基本設定→「設定」を開き、
左側の設定見本の editor.wordSeparators を右側に追加し ダブルクリック時に選択されて欲しい文字を消す。

  "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",

↓ (例: $ と - を消します)

      // ダブルクリック時に自動選択して欲しくない文字
      "editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?" ,
添付ファイル1
No.1237
08/17 14:22

edit

添付ファイル

npmでパッケージのバージョンを調べアップデートする

● npmでパッケージのバージョンを調べる

npm show 【パッケージ名】 versions

● npmで現在インストール済みパッケージのバージョンを一覧で取得(1階層まで)

npm list --depth=0

● 現在インストール済みパッケージの新しいバージョンが存在するかどうか調べる

npm outdated

● ncu を使ってインストール済みパッケージの新しいバージョンが存在するかどうか調べる

ncuのインストール

npm install -g npm-check-updates

ncuの実行

ncu

ncu実行結果例

Using /HOGEHOGE/package.json
⸨░░░░░░░░░░░░░░░░░░⸩ ⠇ :
 gulp-autoprefixer  ^3.1.0  →  ^5.0.0 

package.json には バージョン「^3.1.0」で インストールしろと記述がありますが、最新バージョンは「^5.0.0 」ですよ。 という意味です。

● ncuを使ってインストール済みパッケージを新しいバージョンにupdateする

(例:gulp-autoprefixer を最新バージョンにします。全パッケージを最新にしたい時は引数なしで「 ncu -u 」で実行します)

ncu -u gulp-autoprefixer

このコマンドで package.json が書き換わります。
実際のアップデートは npm コマンドで行います。

npm update

● npmでパッケージのバージョンを調べる(バージョン指定)

次の例ではバージョン3以下のバージョンすべてを表示します

npm show 【パッケージ名@3】 versions

● npmで特定のバージョンのパッケージをインストールする

次の例ではバージョン3.19.0の eslint をインストールします

npm install eslint@3.19.0
No.1153
07/26 16:30

edit

gulpで作成したwebサーバーにiphoneからアクセスする

● gulpfileの設定

gulpfile.js

var webserver = require('gulp-webserver');
gulp.task('webserver', function() {
  gulp.src('./www/') //Webサーバーで表示するサイトディレクトリ
    .pipe(webserver({
      livereload: true,
      host: '0.0.0.0', // ← 0.0.0.0を設定すると同一ネットワーク内から見ることができます
    }));
});



● gulp webserverの起動

gulp webserver

● サーバーを立てたマシンのipアドレスを調べる(Macの場合)

システム環境設定 > ネットワーク > ipアドレス の欄を見てipアドレスを取得します

● iphoneからアクセスする

先ほど調べたipアドレスが192.168.0.10 の場合は iphoneから http://192.168.0.10:8000/ にアクセスします

No.1140
05/09 15:53

edit

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