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

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

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

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

npm install -g node-sass

● 2-. 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(sourcemaps.init())
	.pipe(sass({})
	   .on('error', sass.logError)
    )
    .pipe(sourcemaps.write('./'))
    .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,source.sass",
	"shell" : true,
	"working_dir": "$project_path" ,
	//  パスを明示的に設定する場合はこちらを設定する
	"osx": {
	    "path": "$HOME/.nodebrew/current/bin/node-sass:$PATH"
	},
}

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

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

SublimeOnSaveBuild

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

なお、 gulp を使わずにコンパイルしたい場合は

node-sass ./scss/style.scss ./css/style.css --source-map true

のようなコマンドを実行すればOKです。

No.1288
02/18 14:47

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({
      https: true,
      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から https://192.168.0.10:8000/ にアクセスします

No.1140
01/17 17:27

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

HTML生成に JavaScriptテンプレート「ejs」を使いSublime Textから自動でビルド出来るようにする

静的サイト作成時に「ヘッダ」「フッタ」「グローバルナビゲーション」等は共通部品として別ファイルで管理しておきたい事がよくあります。
そこでテンプレートエンジン ejs を使用します。(拡張子「.ejs」)
流れとしては
『ejsテンプレートを編集して保存』→『gulpが自動でコンパイル(全てのhtmlファイルを自動生成)』→『ブラウザでhtmlファイルを確認』 となります。
なお、node.js のインストールは割愛します。(あらかじめインストールしておいてください)

● gulp のインストール

npm install -g gulp

●1. ejs のインストール

HTML制作ディレクトリのトップからターミナルで

npm install --save-dev gulp-ejs@2.3.0
注意 : gulp-ejs はバージョン2系とバージョン3系で引数の渡し方が変わっています。
今回はバージョン2系を使用しています
なおバージョン確認コマンドは「npm info gulp-ejs」

●2. ejsをSublimeTextでコンパイル出来るようにビルドの設定をする。

gulp自身にファイルを監視させることもできますが、SublimeTextのビルドを使う方法を紹介します。
【ツール】→【ビルドシステム】→【ビルドシステム追加】で新規ファイルが開くので下記の項目を入力してファイル名 gulp.sublime-build で保存します。
保存するパスは

/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/User/gulp.sublime-build

です。

"selector" : ["source.ejs"] の項目は必ず配列で記述すること。
( Mac OSX での例 )

{
    "cmd": ["gulp ejs"],
    "selector" : ["source.ejs"],
    "shell": true,
    "working_dir": "$project_path" ,
		"osx": {
		    "path": "/usr/local/bin:$HOME/.anyenv/envs/ndenv/shims:$HOME/.nodebrew/current/bin:$PATH"
		},
}

↑ SublimeTextにパスを渡しています

$HOME/.nodebrew/current/bin:  // nodebrew用
$HOME/.anyenv/envs/ndenv/shims // ndenv用

●3. ejsファイルを保存時に自動でコンパイルするように設定する

ファイル更新時に自動でコンパイルできるようにSublimeTextで設定します 【基本設定】→【Package Settings】→【SublimeOnSaveBuild】→【Settings - User】を選択してセッティングファイルを開く。
以下のコードをペーストして保存

{
    "filename_filter": "\\.(scss|sass|ejs|js|css|html)$",
    "build_on_save": 1
}

拡張子「scss」「sass」「ejs」「js」「css」「html」保存時に自動でビルドするよう設定します。(不要な拡張子は取り除くこと。)

●4. gulpの設定ファイル gulpfile.js の作成

HTML制作ディレクトリのトップにファイル gulpfile.js を下記の内容で作成します。

var changed = require('gulp-changed');
var gulp    = require('gulp');
var ejs     = require('gulp-ejs');

//
// ejs コンパイル設定
//

const DEST = './www';

gulp.task('ejs', function(){
  gulp.src(['./ejs/*.ejs', './ejs/*/*.ejs', '!./ejs/_*.ejs'])
    .pipe(changed(DEST))
    .pipe(ejs({}, {ext: '.html'}))
    .pipe(gulp.dest('./www/'));
});

●5. SublimeTextでのビルド

・ejsファイルのコンパイル

ejsファイルは 拡張子 .ejs としてディレクトリ ejs において、SublimeTextで開いて command + b でコンパイルします。
一度コンパイルすると後は保存のたびに自動でコンパイルされます。

●6. EJSテンプレートで別ファイルをインクルード

共通部分を切り分けて呼び出します。
その時にパスも渡しています。

・呼び出す元のファイル(例)

<%- include('../_html_head.ejs', {r_path:'..'}) %>

・呼び出される側のファイル(例)

<link rel="stylesheet" href="<%= r_path %>/js/script.js">
<link rel="stylesheet" href="<%= r_path %>/css/style.css">

でインクルード時にパラメーターを渡すことができます。

●6. EJSテンプレートファイル名を取得する

<%= filename %>

と記述するとフルパスでファイル名が帰ります

/Users/hogehoge/Desktop/test/ejs/index.ejs

ただし、インクルードされるファイルに記述してもインクルード元ファイルのパスが返ります。

下記のように使うと便利です

<% var flag = filename.split('/')[filename.split('/').length - 1].replace('.ejs','') %>
<%= flag %>

引用 : http://bit.ly/1Oz6EJX

●6. EJSテンプレートでコメントを入力する

コメントは

<% /* ここはコメントです */ %>

と入力します

ejsの使い方 : https://github.com/tj/ejs
EJS便利な構文 : http://bit.ly/1XiajOj
Gulp + EJS + JSONを使用してhtmlを量産 : http://bit.ly/1WZFQ8c

No.1032
11/21 11:09

edit