Movatterモバイル変換


[0]ホーム

URL:


Skip to content
Search Gists
Sign in Sign up

Instantly share code, notes, and snippets.

@t32k
Last activeDecember 29, 2015 12:19
    • Star(6)You must be signed in to star a gist
    • Fork(4)You must be signed in to fork a gist

    Select an option

    Save t32k/7669928 to your computer and use it in GitHub Desktop.
    HTML5 Conference 2013:今どきのGruntを使ったフロントエンド開発(HTML/CSS編)

    Slide

    SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面(ターミナル)を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt(JavaScript製のタスクランナー)を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。


    @t32k

    Why use Grunt?

    Grunt: The JavaScript Task Runner

    GUI Apps

    Web Performance

    Books

    How to use Grunt

    node.js

    $ npm install grunt-cli -g

    Package.json

    $ npm init
    $ npm install grunt --save-dev$ npm install grunt-csso --save-dev

    Gruntfile

    $ npm install grunt-init -g$ git clone https://github.com/gruntjs/grunt-init-gruntfile.git~/.grunt-init/gruntfile$ grunt-init gruntfile
    // Load the task:grunt.loadNpmTasks('grunt-csso');
    // Configure the task:grunt.initConfig({csso:{dist:{files:{'output.css':['input.css']}}}});
    // Register the task:grunt.registerTask('default',['csso']);

    Customize your Gruntfile!

    $ npm install grunt-init -g$ git clone https://github.com/gruntjs/grunt-init-gruntplugin.git~/.grunt-init/gruntplugin$ grunt-init gruntplugin

    t32k/maple

    Jet Start

    $ npm install yo -g$ npm install generator-maple -g$ mkdir your_proj&&cd$_$ yo maple$ grunt

    [DEMO] yo maple
    yo maple demo - YouTube.

    用語集

    Node.js : サーバーサイドJavaScript
    NPM : Node Package Module、パッケージ管理ツール(プラグイン管理的な)
    Git : 分散型バージョン管理システム(ソースコード管理に使われるもの)
    Grunt : JavaScript製のタスクランナー(面倒なタスクを実行してくれるもの)
    Yeamon : Web開発のためのイケてるワークフロー
    リント : 文法チェック的な
    スキャフォールディング : 足場作り、プロジェクトに必要なファイル一式を生成すること
    コンパイル : コードを機械語に変換すること(ここではコンバート的な意味合い)
    ビルド : コンパイルなどを行い、最終的な実行可能なソフトウェアにすること
    デプロイ : ソフトウェア(Webサービスなど)を利用可能な状態にすること
    cd : Change Directory、現在のディレクトリを移動するコマンド
    mkdir : MaKe DIRectory、ディレクトリを作成するコマンド


    #html5j

    アンケートにご協力ください!あなたのフィードバックが、html5jの活動を支えています!

    Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment

    [8]ページ先頭

    ©2009-2025 Movatter.jp