忍者ブログ
 
 
×

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

タスクランナーとして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!カテゴリイラスト・写真
PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
管理人・颯来の近況や、オススメのものを紹介! イラスト中心サイト→http://sora9.web.fc2.com/
           
プロフィール
名前:颯来(そら)
自作イラストを載せています。
オリジナルイラスト中心。
ファンタジー系多め
…more
HP:Jumble Junk
手書きブログ pixiv
ついった(近況報告)
フリーエリア
pixiv
instagram
ブログ内ページランキング
ブログ内カウンター
ラクガキ一覧
ブログランキング
アクセス解析
レコメンデーションエンジン track feed jumblejunk颯来ブログ
ランキング
blogram投票ボタン

人気ブログランキングへ にほんブログ村 イラストブログ オリジナルイラストへ PINGOO!カテゴリイラスト・写真
アーカイブ
これ以前のアーカイブ一覧
RSS
ブログ内検索
カレンダー
05 2017/06 07
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...