gulp勉強会

gulpとは？

Node.js上で動作するタスク自動化のための

ビルドツール

 

sassなどのメタ言語をコンパイルしたり、ｊｓをminifyしたり、shellを叩いたり、etc...

 

http://gulpjs.com/

色んなめんどくさーいことが、コマンド一つでできちゃう。

VS

  • Easy to use
    （シンプルなコードで使いやすい！）

  • Efficient
    （Node.js のストリームで効率的！）
  • High Quality
    （厳格なガイドラインなので高品質！）
  • Easy to Learn
    （最小限のAPIで習得がカンタン！）

gulpの特徴

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //コピーを実行するタスク
        copy: {
            main:{
                files: [ {
                    //src/jsディレクトリ以下のファイルをコピー
                    expand: true,
                    flatten: true,
                    src: ['src/js/*.js'],
                    dest: 'dest/js/'
                }, {
                    //src/htmlディレクトリ以下のファイルをコピー
                    expand: true,
                    flatten: true,
                    src: ['src/html/*.html'],
                    dest: 'dest/html/'
                }]
            }
        }
    });
    // Load tasks(grunt実行時に読み込むプラグイン)
    grunt.loadNpmTasks('grunt-contrib-copy');
    // Default tasks(grunt実行時に実行するタスク)
    grunt.registerTask('default', ['copy']);
};
var gulp = require('gulp');

    //コピーを実行するタスク
gulp.task('copy', function() {
    //src/jsディレクトリ以下のファイルをコピー
    gulp.src('src/js/*.js')
      .pipe(gulp.dest('dest/js/'));
    
    //src/htmlディレクトリ以下のファイルをコピー
    gulp.src('src/html/*.html')
      .pipe(gulp.dest('dest/html/'));
});

//デフォルトタスク定義
gulp.task('default', function() {
    gulp.run('copy');
});

Easy to use
（シンプルなコードで使いやすい！）

src/jsディレクトリ以下のファイルとsrc/html以下のファイルをそれぞれdestディレクトリにコピー

grunt

gulp

gulp

grunt

Efficient
（Node.js のストリームで効率的！）

sass

sass

js-minify

styleguide

js-minify

styleguide

complete!!

complete!!

Easy to Learn
（最小限のAPIで習得がカンタン！）

　gulp.src(globs[, options])

　gulp.dest(path)

　gulp.task(name[, deps], fn)

pipeに渡したいファイルを指定する。

　.pipe(行いたい処理)

srcで取得したファイルに処理を追加。

pipeに渡したいファイルを指定する。

pipeで処理しきったものの出力先。

タスクの定義する。
deps でここで定義したタスクを走らせる前に実行するタスクを指定出来る。配列指定。

　gulp.watch(glob [, opts], tasks)

Easy to Learn
（最小限のAPIで習得がカンタン！）

　gulp.task(name[, deps], fn)

タスクの定義する。
deps でここで定義したタスクを走らせる前に実行するタスクを指定出来る。配列指定。

watchしたいfileのPATHをglobに定義。
そこに変更が会ったら、taskを実行する。

var gulp = require('gulp');
var styledocco = require('gulp-styledocco');
var replace = require('gulp-replace-task');
var watch = require('gulp-watch');
var clean = require('gulp-clean');

gulp.task('styledocco-PC', ['clean-PC'], function(){
  console.log('----------pc styledocco task start----------');
  return gulp.src('./source/assets/stylesheets/pc/**/*.sass')
  .pipe(styledocco({
    out: './source/styleguide/pc/',
    name: 'Sumika-PC-StyleList',
    preproceccer: 'sass -p',
    include: ['./source/styleguide/stylesheets/_include.css', './source/styleguide/javascripts/_include.js']
  }));
});

gulp.task('replace-PC', ['styledocco-PC'], function(){
  gulp.src('./source/styleguide/pc/*.html')
  .pipe(replace({
    patterns: [
     {
        match: /<head>/g,
        replacement: "<head><link type='text/css' rel='stylesheet' href='../stylesheets/pc/all.css'><title>"
      }
      ]
    }))
  .pipe(replace({
    patterns: [
      {
        match: /<script>/g,
        replacement: "<script src='../templete/jquery-1.11.1.min.js'></script><script>$(function(){setTimeout(function(){$head = $('iframe').contents().find('head');
$head.append($('<link/>',{ rel: 'stylesheet', href: '../templete/pc/all.css', type: 'text/css'}))}, 20000);});</script><script>"
      }
    ]
  }))
  .pipe(gulp.dest('./source/styleguide/pc/'));
});

gulp.task('clean-PC', function(){
  return gulp.src('./source/styleguide/pc/*.html')
  .pipe(clean());
});

gulp.task('copy-pc-css', function(){
  gulp.src('./build/assets/stylesheets/pc/all.css')
  .pipe(gulp.dest('./source/styleguide/stylesheets/pc/'));
});

gulp.task('watch', function(){
  gulp.watch('./source/assets/stylesheets/pc/*.sass', ['replace-PC']);
});
gulp.task('styleguide', ['replace-PC', 'copy-pc-css']);

じゃあ使いましょう

gulp_practice

|  

    assets

    |

        styles

        |

            sass
            css

    views

    styleguide

 

1.assets/styles/sass内の*.sassを

assets/styles/cssにコンパイル

3.assets/styles/sass内の*.sassから、

styleguideにstyleguideを生成

4.assets/styles/sass内の*.sassが変更されたら、1,2,3のタスクを実行する。

2.assets/styles/css内の*.cssをminify

1.gulpをインストール

 

2.gulpのpluginをインストール

 

3.gulpfile.jsを作る

　1.gulpをインストール

$ npm install -g gulp

//gulp の command line interface インストール

グローバルインストールしているのは 
command line interface という gulp を実行するためだけのパッケージです。

$ gulp -v
[22:09:49] CLI version 3.8.6
[22:09:49] Local version undefined

プロジェクトの、rootディレクトリに移動

$ npm init 

//package.jsonを作る

$ npm install gulp --save-dev 

//プロジェクトにgulpをインストール
//nvmでnode入れてない時は、sudo使ってください。
$ npm install --save-dev gulp-sass

$npm install --save-dev gulp-minify-css

$ npm install  --save-dev gulp-styledocco

$ npm install --save-dev gulp-watch

　2.gulpのpluginをインストール

　3.gulpfile.jsを作る

var gulp = require('gulp');
var sass = require('gulp-sass');
var styledocco = require('gulp-styledocco');
var minifyCSS = require('gulp-minify-css');

gulp.task('sass', function(){
  return gulp.src('./assets/styles/sass/*.sass')
  .pipe(sass({errLogToConsole: true,
              sourceComments : 'normal'
  }))
  .pipe(gulp.dest('./assets/styles/css/'));
});

gulp.task('styledocco', function(){
  gulp.src('./assets/styles/sass/*.sass')
  .pipe(styledocco({
    out: './styleguide/',
    name: 'gulp-practice-styledocco'
  }))
});

gulp.task('minifyCSS', ['sass'], function(){
  gulp.src('./assets/styles/css/*.css')
  .pipe(minifyCSS())
  .pipe(gulp.dest('./assets/styles/css/'));
});

gulp.task('watch', function(){
  gulp.watch('./assets/styles/**/*.sass', ['minifyCSS', 'styledocco']);
});

gulp.task('default', ['minifyCSS', 'styledocco']);

https://github.com/keenjoe007/gulp_practice

拙い説明ですみませんでした。

最後のgulpfile.js、2回目以降のwatchが動きません(泣)

gulp

By takushi_u

Made with Slides.com

gulp

gulp勉強会

  • 526