0 gulp.jsとは #gulp.js #javascript みんなに公開
gulp.jsとは
- JavaScriptで書くタスクランナー
- Node.jsで動きます
- 定義されたタスクを実行できる
gulpfile.js
に書くとその通りにやってくれる
使いどころ
- Sassのコンパイル
- autoprefixerを使ってベンダープリフィックスを付ける
- JavaScriptのlintとかminify
- ES 2015をbabel
- live reload
- アプリケーションサーバーの起動管理
導入の仕方
Mac前提で
brew install node
- nodebrewとか使いたい場合はそちらで
- 何もしないと5.x系が入ると思いますが、安定版(LTS)は4.x系
npm install gulp --global
npmとは
- Node.jsのパッケージマネージャー
- RubyでいうところのGem(Gemfile)
- PHPでいうところのComposer(composer.lock)
- Node.jsの場合
package.json
というファイルを使いますnpm init
すると雛形が作成できます- 決められたバージョンをインストールできるようにする仕組み
仕組み
npm install
するとnode_modules
というディレクトリーができてそこにパッケージがインストールされますnpm install --saveす
るとインストールされた上にpackage.json
にそのモジュール名とインストールしたバージョンが記録されます。dependencies
として。npm install --save-dev
すると同様ですがdevDependencies
として記録されます
例
'use strict';
const gulp = require('gulp'),
sass = require('gulp-sass'),
bourbon = require('node-bourbon').includePaths,
autoprefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
nodemon = require('gulp-nodemon');
const paths = {
sass: [
'assets/sass/**/*.scss',
'assets/sass/**/*.sass'
],
js: [
'assets/js/**/*.js'
],
vendorcss: [
'node_modules/normalize.css/normalize.css'
],
vendorjs: [
'node_modules/jquery/dist/jquery.min.js'
]
};
gulp.task('sass', () => {
gulp.src(paths.sass)
.pipe(sass({
outputStyle: 'compressed',
includePaths: ['sass'].concat(bourbon)
}))
.on('error', (err) => {
return console.log(err.stack);
})
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false,
remove: false
}))
.pipe(gulp.dest('public/css'));
});
gulp.task('js', () => {
gulp.src(paths.js)
.pipe(uglify())
.pipe(gulp.dest('public/js'));
});
gulp.task('watch', ['sass', 'js'], () => {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.js, ['js']);
});
gulp.task('vendor', () => {
gulp.src(paths.vendorcss, {base: 'node_modules'})
.pipe(gulp.dest('public/css/vendor'));
gulp.src(paths.vendorjs, {base: 'node_modules'})
.pipe(gulp.dest('public/js/vendor'));
});
gulp.task('nodemon', () => {
nodemon({
script: 'app.js',
ext: 'js jade',
ignore: ['assets/*']
}).on('restart', []);
});
gulp.task('default', ['watch', 'nodemon']);
gulpfile.js- Bourbon - A Lightweight Sass Tool Set
- postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use
余談: Bowerとは
- Bower
- クライアントコーディングとかで必要なパッケージを管理できる
- Node.jsでできている
- 導入は
npm install bower --save-dev
- jQueryとかJSライブラリ、あとCSSのとか入れられる
- …でも正直npmでインストールできるものが多い
- ので、bower使わずにnpmで済ませています
- bowerが便利な場合も(まだ)あるのでそこは場合による
コメント(0)