忍者ブログ
 
 
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

ホームページのソースについて、gulpを用いて、自動でbuildなどしていましたが、Jenkinsを使って実行できるようにしました。
「CIしたい」というよりかは、「Jenkins使いたい」というための、勉強のようなもの。
出来るようにしたことは、以下の通り。

1.build
  gitからチェックアウト
  npm installなどで、必要な環境構築
  Jadeやsassなどからビルド

2.lint
  coffee-scriptやsassなどのソースを解析
  checkstyleなど

3.test
  動作について、e2eテスト
  ユニットテストもしたかったけど、するほどのソース量がなかった。

4.deploy
  buildしたソースをサーバーに転送する



これらのJenkins設定を行う際にあった問題と解決について、メモがあるので以下に記載します。メモなので言葉足らずなところもあるかもしれませんが、後で気が向いたら追記します。少しでも何か参考になれば。

jenkinsメモ
1.Jenkinsが、グローバルに入っている、gulpなどを読み取れない。
カスタムワークスペースを利用
C:\Users\sora\Documents\Jenkins\myweb

npm config set cache C:\npm\npm-cache --global
http://kakakikikeke.blogspot.jp/2013/08/windowsjenkins.html

実行ユーザがLocal SystemになっているためWindowsに設定しているJAVA_HOME等の環境変数が有効になっていない
■解決方法
ファイル名を指定して実行からservices.mscを入力
一覧からJenkinsを探す
右クリックからプロパティを開く
プロパティダイアログが開いたらログオンタブを選択
アカウントを選択しWindowsにログインするユーザ名とパスワードを入力する
アカウントを検索した場合は参照から検索できる
名前を入力して「名前の確認」というボタンを押下するとそのユーザがいるかどうかを確認できる
アカウントが設定できたらプロセスの一覧画面に戻り右クリックから再起動を実施すると環境変数が反映される
2.build
json,jadeのデータが一部gitにあげてないので、ローカルでコピーする →タスクとして追加
3.test
A Jasmine spec timed out. Resetting the WebDriver Control Flow.
  繝�繧ケ繝茨シ域峩譁ー螻・豁エ�シ�
    笨� 繧オ繝悶Γ繝九Η繝シ縺ョ譛�蠕後�ョ隕∫エ�縺ッ縲�2006蟷エ縲�
      - Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
「Windowsではサービスとしてcronなどのdaemonを起動させると、そのプロセスからはGUIアプリケーションを立ちあげて動作させることが出来ない制約があります」
らしい
→ローカルでマスタースレーブを作り、起動してそちらで実行することに
コンソール文字化け
 →環境変数に以下を追加
JAVA_TOOL_OPTIONS=-Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8
http://www.ramuda.co.jp/techlabo/archives/2609
4.lint
scss-lint
バージョンが古かった。更新した。
gemfileを今まであまり扱っていなかった。
coffee-lint
checkstyleがconsole.logに出力される
ファイルに出力したい。 → 一時的に、console.logを変更
色情報を消したい → 正規表現で削除

console.log = (d) ->
log_file.write d.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '') + '\n'
5.deploy
パスワードなどを、引数として指定するようにし、ファイルに保存しない
conn.newer としているけど、新規だけじゃなくすべてのファイルが転送される。
転送時に更新日時が更新されてる?
→different size とした
gulp buildが、--release --jenkins をjenkinsで実行した時のみエラーになる
6.フロー
フロー表示をしたかった。
pipeline pluginを入れた。

人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ blogram投票ボタン PINGOO!カテゴリイラスト・写真
PR
もやしもん(12)限定版 (プレミアムKC イブニング )
もやしもん(12)限定版 (プレミアムKC イブニング )


西野さんを交えて、大きなテーマは、以下の2つ
 日本酒業界
 大人って何?


日本酒業界については、
桶取引、逆桶買いなど

お酒についてはよくわからないから、
そういうのもあるんだ。
美味しければ、作り手も納得してればそれでいいじゃない?と思ってたけど、
改めて読むと、著作権の話とか関連するかなと思って気になる。

あと、いつもの様に、お酒の作り方、菌たちの仕事などが解説されていて、
お酒飲めないのにお酒知識がつくよw



大人って何?については、
はじめに読んだ時は、ふんわり思っていたけれども、
改めて読みなおして、自分も以前より少しだけいろいろ経験して時間が過ぎたからか、
共感できる言葉が、多くあるなぁと思える。
前よりも、共感する内容の意味がよりはっきり認識できたかな。


以下に、その、読んでて、わかる!とか、いいねと思った言葉を抜粋します。

  西野さんの「私のことを分かった風に決めつけないで」

  ワインは加点法、日本酒は減点法。人でも減点より褒められたいね。

  転機っていうのは後付で、
  実は毎日ってのはつながっているからいきなり変わったりしない
  転機を待たなくても、やりたいことをやればいい

  大学生ってなってみたらガキだよね
  小学生の頃は中学生は大人に見えたけれど、自分が高校生になったら小学校の時と変わらない
  「大人」は常に私から遠い

  二十歳になったら大人の仲間入りするんだと思っていたけど、相変わらず大人は二十歳なんて鼻であしらって子供扱い

  先達が今日までやってきたことは、君たちはもう一からやらなくても容易に手にすることが出来る
  君たちにとって素晴らしいリードだ
  僕なんかよりもずっと先に進める可能性を持っているんだ


もやしもん



人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ blogram投票ボタン PINGOO!カテゴリイラスト・写真


jQueryは、別の本で読んでみたり、なんとなくwebの情報で使っていたjavascriptだけれど、一度本で学んでみようと思って、買って読んでみました。

各章としては以下のとおり。(正確な章の名前ではなく、扱っている内容を記載)
Capter1 javascriptとは?
Capter2 基本的な文法、型、制御命令など
Capter3 基本データ型、オブジェクト
Capter4 関数
Capter5 オブジェクト指向構文
Capter6 ブラウザオブジェクト
Capter7 DOM
Capter8 Ajax
Capter9 jQuery
Capter10 現場で使うための応用知識(JsUnit/JsDoc/コーディング規約など)


前半の、Capter2~5が知らなかった内容。
後半の、Capter6~は、だいたい知っている内容でした。

特に、関数やオブジェクト指向構文などは、webの使用例などを見ているだけでは構文として学べなかったので、良かったと思います。
この本を読んだ後に、webの記事を見なおしていると、分かる部分が増えて理解が深まりました。

後半については、この本が、2010年に発行されたもののため、その後、ライブラリやフレームワークが色々出ているのは反映されていません。
そのため、もともと知っていたことが含まれていることもあり、参考程度でした。



ひと通り、基本的な文法を確認したので、次に読む本に悩むところ。
目次レベルだと、あまり差がわからないものもあり、、、
オライリーのjavscript(サイ本というらしい)は、分厚いし、
JavaScript: The Good Partsは、書評によると癖が強いらしい?出版も2008年と古め
JavaScriptパターンは、書評がわからないけれど、ちなみに出版は2011年
Effective JavaScriptを読んでみようかな、、いいという書評も見たし、この中では2013年発行と一番新しい。

ES6という新しい標準化が出てきているらしいし、その解説か、
Coffeescriptの文法を確認したほうが良いかなぁ
(coffeescriptは、{}を書かなくて良いのとかインデントが楽で好き)

なお、最近は、これも読んでる →JavaScript Promiseの本






人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ blogram投票ボタン PINGOO!カテゴリイラスト・写真
webページ更新しました。
・・・といっても、コンテンツとしては特になく、構造をね。。。
webコンテンツ作成の勉強になった。

そして、更新履歴を見て、約1年ぶりの更新。。。


以下に、変更点を記載します。

<template>

foundation → bootstrap

 簡単。
 この前が、jadeでlayoutを外出ししていたため、そこの構成やclass名を変えるだけですぐに対応できた。

<追加導入>

サブメニュー

  これまでサイドのメニューは、topのメニューと同じにしていたけど、同じページ内の項目にしてみた

ページtopへ

  ページの右下などでよく見る。同じページのtopへ移動ボタン追加。
  これも、bootstrapであるかと思ったんだけど、無いようなのでjsにサンプルからそのまま記載

affix

 サイドのメニューが、スクロールしても同じ位置に固定する機能。
 bootstrapにあったので、追加してみた。
 追加で、レスポンシブで幅が狭い時は、上部にあるため、コンテンツと被らないように、実施しないよう@mediaで制御追加

scrollspy

 スクロールしていると、現在のコンテンツにあわせたサブメニューの見出しをactive表示して、自分が今どれを読んでいるか分かるもの。bootstrapのサイトでも利用されている。
 こちらも、bootstrapにあるので追加してみた。
 スクロールを始めると、サブメニューの幅が小さくなるというバグが有るらしいので、それにも対応。

fontawesome

 

js concat

  bowerのものを、1つにconcatしようとしたけれど、jsは順番がやっぱり重要で、順番が異なると動かない。依存関係を確認するというのをいろいろ調べたけれども、できなかったけど、
  bower.json内のdependenciesの順番変更したらすぐ出来た。
  dependenciesは、アルファベット順かと思っていたけど、変更できたみたい。

<構成の分離>

jade内の記載のうち、ページ構成ではないデータをjsonに分離
繰り返し処理のPGM化促進 変更履歴など

<CSS>

css spriteを利用しようとして、うまくいかないからやめた
後で、これだけ試す

scssをsass記法に変えようとして、うまくいかないし、bowerのscssファイルを現在参照しているので、やめた

<gulp>

browsersyncで、変更があったらブラウザ上もリロードして確認
gulpのcoffeeコンパイルを、これまで、coffeeだけのもので行っていたけれど、webpackで行う

<webテスト>

karma・jasmine

この辺を見て、勉強したので、使ってみようと思った。
静的サイトなので、特にjsのロジックはなく、animationぐらいなんだけど、試してみようとした。
http://qiita.com/hosomichi/items/4e508e804b0e50e7b6ec
http://qiita.com/hosomichi/items/311e3eac4f55183b62c2
http://qiita.com/hosomichi/items/7464c69bf54927d019a7


こちらにもwebpack導入。テストをcoffeeで書くため

DOMの操作をしやすくするよう、karma jquery導入

ページが表示されないと思ったら、相対パスが異なっていた。(specファイルからの相対位置ではない?)
 document.body.innerHTML = window.__html__['../WebContent/history.html']
→document.body.innerHTML = window.__html__['WebContent/history.html']

jsのcoverageがとれないと思ったら、パス指定の間違いだった(間に空白入ってた)
 'WebContent/js/**/* .js': ['coverage']
→'WebContent/js/**/*.js': ['coverage']

karmaでwebページ動作テストをしようと思ったが、ページリンク動作がうまく動かず
結局、karmaはunit testで、integrated testじゃねーからと言われたので、
ひとまずunit testのみを行うことにする
、、、が、単体で出来る事もないのでやめたw
http://bittersweetryan.github.io/jasmine-presentation/#slide-17

protractor

そこで、end to endテストを行うことにした。
karmaにも、end2endのプラグインが(非公式??)あるようだけど、動かなかったので、e2e用という、protractorを利用してみる。
はじめ、for AngularJSと書かれていたので、他のだと使えないと思って諦めていたけど、使ってみたら出来た。検索したら、Angular以外で利用しようとしている人も、まあまあいるみたい
tutorialが、confとspecをjsで書かれていたが、coffeeで書きたい。
エラーが出ていたが、byがcoffeescriptの予約語とかぶっている記事を思い出して、Byに変更すると実行できた。
windowサイズ初期化

リンククリック後のスクロール値取得しようとしたが、animationで時間差があるため、sleep使用

helper関数化

テスト完成後、共通部分を関数として外出し
 しかし、javascriptの文法+coffeescriptの文法がいまいちわかっていないので、なかなか動かない。結局、()のあるなしで動かなかったみたい。
  getScrollTop
 →getScrollTop()

さらに、helper関数として外出し

サーバー終了設定

gulpの設定で、こちらの方法で、サーバーのexitをしようとすると、テスト実行されない
https://github.com/schickling/gulp-webserver/issues/48

こちらの方法で、終了時の処理を入れると、テストが実行後、自動終了するようになった
    .on 'end', -> process.exit()
http://stackoverflow.com/questions/29968380/how-to-exit-protractor-when-done


なお、参考までに、最終的なspecファイルはこちら。
<e2eSpec.coffee>

h = require('../helpers/helper')

describe 'テスト(更新履歴)', ->

  submenu_link_list = $$('.submenulist li')
  submenu_link_last = submenu_link_list.last()
  submenu = $('.submenulist')
  mainrow = $('.main-row')
  gototop_link = $('.gototop')

  SLEEP_TIME = 1000
  INIT_WINDOW_WIDTH = 1500
  INIT_WINDOW_HEIGHT = 1000
  SCROLL_TEST_ITEM = 5


  beforeEach ->
    browser.driver.manage().window()
        .setSize(INIT_WINDOW_WIDTH, INIT_WINDOW_HEIGHT)
    browser.ignoreSynchronization = true
    browser.get browser.baseUrl+'/history.html'
    return


  it 'サブメニューの最後の要素は「2006年」', ->
    expect(submenu_link_last.getText()).toEqual '2006年'

  it 'サブメニューの最後の要素のリンク先は、#submenu[0-9]*であること', ->
    submenu_link_last.$('a').getAttribute('href').then (submenu_link_url) ->
      expect(submenu_link_url).toMatch '#submenu[0-9]*$'

  it 'サブメニューリンクをクリックすることで、ページ内リンク先に移動すること', ->
    # 初期スクロール位置の確認
    expect(h.getScrollTop()).toEqual 0

    # サブメニューリンクをクリック
    submenu_link_last.click()
    browser.sleep(SLEEP_TIME)

    # クリック後のスクロール位置の確認
    submenu_link_last.$('a').getAttribute('href').then (submenu_link_url) ->
      submenu_link_id = h.getLinkId(submenu_link_url)
      $(submenu_link_id).getLocation().then (locationdata) ->
        mainrow.getCssValue('padding-top').then (headerH) ->
          expect(h.getScrollTop()).toEqual locationdata.y - parseInt(headerH, 10)


  it 'スクロールすると、サブメニューが合わせて移動すること', ->
    # サブメニューの初期location取得
    init_locationdata_y = 0
    submenu.getLocation().then (locationdata) ->
      init_locationdata_y = locationdata.y

    # スクロール
    submenu_link_list.get(SCROLL_TEST_ITEM).click()
    browser.sleep(SLEEP_TIME)

    # スクロール後のサブメニューの位置が、スクロール量+初期locationであること
    h.getScrollTop().then (scrollTop) ->
      submenu.getLocation().then (locationdata) ->
        expect(locationdata.y).toEqual scrollTop + init_locationdata_y

  it 'スクロールすると、scrollspyが動作すること', ->
    # 初期はactive状態ではないこと
    expect(h.hasClass(submenu_link_list.get(SCROLL_TEST_ITEM), 'active')).toBe(false)

    # スクロール
    submenu_link_list.get(SCROLL_TEST_ITEM).click()
    browser.sleep(SLEEP_TIME)

    # スクロール後に、titleに一致した項目がactiveになっていること
    expect(h.hasClass(submenu_link_list.get(SCROLL_TEST_ITEM), 'active')).toBe(true)

  it 'トップへボタンで、ページ先頭に移動すること', ->
    # トップへボタンをクリック前に、スクロールする。初期位置がページ先頭でないこと
    submenu_link_list.get(SCROLL_TEST_ITEM).click()
    browser.sleep(SLEEP_TIME)
    expect(h.getScrollTop()).toBeGreaterThan 0

    # トップへボタンをクリック
    gototop_link.click()
    browser.sleep(SLEEP_TIME)

    # ページ先頭に移動していること
    expect(h.getScrollTop()).toEqual 0

<helper.coffee>

module.exports = {
  getScrollTop : ->
    browser.executeScript('return document.body.scrollTop;')

  hasClass : (element, cls) ->
    element.getAttribute('class').then (classes) ->
      classes.split(' ').indexOf(cls) != -1

  getLinkId : (url) ->
    url.substring(url.lastIndexOf('#'), url.length)
}

<今後>

今後、追加でやりたいことメモ
・Jenkinsでテスト CI →(7/14 build/test/lint)
・css sprite →アイコン整理したら、spriteする画像がなくなった。。。
・coffeescript lint →(7/11)
・sourcemap →(7/11 仮)
・SNSアイコン変更 → (7/15)
・gulpファイルをtaskで分割 → (11/26)


なお、現在、こちらの本で、javascriptのことを一旦勉強中。






人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ blogram投票ボタン PINGOO!カテゴリイラスト・写真
タスクランナーとしてGruntを使っていたけど、gulpに変更しました。
ついでに、構文チェックとか色々追加中。
とりあえず、やりたいことがひと通り出来たのでよしとしよう。

パッケージの理解

・npm
   →node.js製。gulpやそのプラグインパッケージ管理
・bower
   →npmからインストール。jqueryなど、webページで使うプラグインパッケージ管理。gitを入れないとプラグインインストール出来ない。
・gem
   →ruby製。sassやcompassのコンパイルのため。


Grunt

行ったこと

・compassコンパイル
・Jadeコンパイル
  jsonデータ読み込み
・pluginコピー(全て)
・watch

ソース


module.exports = function(grunt) {
    var pkg, taskName;
    pkg = grunt.file.readJSON('package.json');
    grunt.initConfig({
        //ディレクトリ設定
        dir :{
            src : 'src',
            dist : 'Webcontent',
            test : '<%= dir.src %>/test',
            doc : 'docs',
            js : 'js',
            css : 'css',
            cssCompile : '<%= dir.src %>/<%= dir.css %>.compile'
        },
        // SassとCompassをコンパイルします。
        compass: {
            dist: {
                options: {
                    basePath: '<%= dir.src %>',
                    config: '<%= dir.src %>/config.rb',
                }
            }
        },
        cssmin: {
             minify: {
                files: {
                    '<%= dir.dist %>/css/style.css': ['<%= dir.src %>/css/*.css']
                }
            }
        },
        jade: {
            options:{
                pretty: false,
                data: grunt.file.readJSON('src/json/config.json'),
            },
            source:{
                expand: true,
                cwd: '<%= dir.src %>/jade',
                src: ['**/!(_)*.jade'],
                dest: '<%= dir.dist %>',
                ext: '.html'
            }
        },
        //plugin copy
        copy: {
            js: {
                expand: true,
                cwd: '<%= dir.src %>/',
                src: ['js/**'],
                dest: '<%= dir.dist %>'
            },
            plugin: {
                expand: true,
                cwd: '<%= dir.src %>/',
                src: ['plugin/**'],
                dest: '<%= dir.dist %>'
            }
        },
        watch: {
            // Sassファイルが更新されたら、タスクを実行します。
            sass: {
                files: ['<%= dir.src %>/**/*.scss',],
                tasks: ['compass']
            },
            css: {
                files: ['<%= dir.src %>/css/*.css'],
                tasks: ['cssmin']
            },
            jade: {
                files: ['<%= dir.src %>/**/*.jade','<%= dir.src %>/**/*.json',],
                tasks: ['jade']
            },
            js: {
                files: ['<%= dir.src %>/js/**'],
                tasks: ['copy:js']
            },
            plugin: {
                files: ['<%= dir.src %>/plugin/**'],
                tasks: ['copy:plugin']
            }
        },
    });

    // GruntFile.jsに記載されているパッケージを自動読み込み
    for(taskName in pkg.devDependencies) {
        if(taskName.substring(0, 6) == 'grunt-') {
            grunt.loadNpmTasks(taskName);
        }
    }

    //grunt.registerTask('default', ['connect', 'watch:sass']);
    grunt.registerTask('default', ['watch']);

    grunt.registerTask('eatwarnings', function() {
        grunt.warn = grunt.fail.warn = function(warning) {
            grunt.log.error(warning);
        };
    });
};

gulp

行ったこと

・coffeeスクリプトコンパイル(jsからcoffeeスクリプトに変更した)
  coffeeスクリプト文法チェック
  release時のみ、最適化
・scss(compass)コンパイル
  scss文法チェック
・Jadeコンパイル
  json文法チェック
  jsonデータ読み込み
  release時のみ、minify
  release時のみ、sitemap.xml作成
・画像コピー
・pluginのbowerからmainで必要な物のみコピー



ソース


gulp         = require 'gulp'
$             = require('gulp-load-plugins')()
bowerfiles  = require 'main-bower-files'
#runSeq = require 'run-sequence'

#path
$src = './src'
$WebContent = './WebContent'
mySiteUrl = 'http://sora9.web.fc2.com/'
config =
              path:
                 js: $src + '/coffee/**/*.coffee'
                 scss: $src + '/scss/**/*.scss'
                 scssSourceMap: '../../'+$src + '/scss'
                 jade: $src + '/jade/**/*.jade'
                 jadetask: $src + '/jade/**/!(_)*.jade'
                 jsondata: $src + '/json/config.json'
                 img: $src + '/img/**/*'
                 link: $src + '/link/**/*'
              outpath:
                js: $WebContent + '/js'
                css: $WebContent + '/css'
                html: $WebContent
                img: $WebContent + '/img'
                link: $WebContent + '/link'
                lib: $WebContent + '/lib'

isRelease = $.util.env.release?

gulp.task 'js', ->
  gulp
    .src config.path.js
    .pipe $.coffeelint()
    .pipe $.coffee()
#    .pipe $.jshint()
#    .pipe $.jshint.reporter 'jshint-stylish'
    .pipe $.if isRelease, $.uglify()
    .pipe gulp.dest config.outpath.js


gulp.task 'scss', ->
  gulp
    .src config.path.scss
    .pipe $.plumber()
    .pipe $.scssLint()
    .pipe $.rubySass(compass : true)
#    .pipe $.pleeease()
#    .pipe $.minifyCss()
    .pipe gulp.dest config.outpath.css

gulp.task 'json', ->
  gulp
    .src config.path.jsondata
    .pipe $.jsonlint()
    .pipe $.jsonlint.reporter()

gulp.task 'jade', ->
  gulp
    .src config.path.jadetask
    .pipe $.plumber()
    .pipe $.jade(
      data: require(config.path.jsondata)
      pretty: true
      )
#    .pipe $.htmlhint()
    .pipe $.if isRelease, $.minifyHtml()
    .pipe gulp.dest config.outpath.html
    .pipe $.if isRelease, $.sitemap(siteUrl: mySiteUrl)
    .pipe $.if isRelease, gulp.dest config.outpath.html

gulp.task 'img', ->
  gulp
    .src config.path.img
#    .pipe $.plumber()
    .pipe gulp.dest config.outpath.img

gulp.task 'link', ->
  gulp
    .src config.path.link
#    .pipe $.plumber()
    .pipe gulp.dest config.outpath.link

gulp.task 'bower', ->
  gulp.src bowerfiles()
#    .pipe $.if '*.js', $.concat('vender.js')
    .pipe $.if '*.js', $.uglify(preserveComments: 'some')
    .pipe $.if '*.css', $.concat('vender.css')
    .pipe gulp.dest config.outpath.lib


gulp.task 'watch', ->
  gulp.watch config.path.js, ['js']
  gulp.watch config.path.scss, ['scss']
  gulp.watch [config.path.jsondata], ['json','jade']
  gulp.watch [config.path.jade], ['jade']
  gulp.watch config.path.img, ['img']
  gulp.watch config.path.link, ['link']


gulp.task 'default', ['watch']
gulp.task 'build', [
  'bower',
  'js',
  'scss',
  'json',
  'jade',
  'img',
  'link',
]

◎エラーなど、はまったこと

・cssの文字コード指定

sassの文法チェックを入れたところ、「prefer single quoted strings」と言われたので、
先頭の文字コード指定『@charset "utf-8";』をシングルクォートにしたら、「invalid windows-31j character」と言われて、コンパイル出来なくなった。
しかも、複数ファイルだったが、文字コードがそれぞれ異なったので、特定が難しく、以下の記述に辿り着き、ダブルクォートに戻したら、うまく行った。
初めの文法チェックによるwarningは無視することに。


http://frmmpgit.blog.fc2.com/blog-entry-33.html

次に作成する*.sassファイルの先頭に『@charset "utf-8";』と指定するとソースファイルをUTF-8としてコンパイルするようになる。ダブルクォートで囲むことに注意。

最初シングルクォートで'utf-8'としていたが次のようなエラーが出てコンパイルに失敗していた。

・release時のみの動作

参考サイトにて、「$.if isRelease」と書いたら、「--release」オプションを指定してgulpを実行した時のみ、動作が実行される。とあったのだが、
「isRelease is not defined」と怒られる。
よくよく参考コードを見ると、以下の宣言が抜けていました。

isRelease = $.util.env.release?



参考:

Bowerまとめ(概要・導入・コマンド一覧)
俺のgulpfileなど
gulp.js その4 プラグイン一覧
Gulpでウェブアプリ作る際のスケルトン
gulp.jsでWeb開発環境をつくる
人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ blogram投票ボタン PINGOO!カテゴリイラスト・写真
管理人・颯来の近況や、オススメのものを紹介! イラスト中心サイト→http://sora9.web.fc2.com/
           
プロフィール
名前:颯来(そら)
自作イラストを載せています。
オリジナルイラスト中心。
ファンタジー系多め
…more
HP:Jumble Junk
手書きブログ pixiv
ついった(近況報告)
フリーエリア
pixiv
instagram
ブログ内ページランキング
ブログ内カウンター
ラクガキ一覧
ブログランキング
アクセス解析
レコメンデーションエンジン track feed jumblejunk颯来ブログ
ランキング
blogram投票ボタン

人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ PINGOO!カテゴリイラスト・写真
アーカイブ
これ以前のアーカイブ一覧
RSS
ブログ内検索
カレンダー
03 2017/04 05
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
リンク/BlogPeople
++++++++++++++++++++++
忍者ブログ [PR]


Designed by Pepe
Related Posts Plugin for WordPress, Blogger...