Giter VIP home page Giter VIP logo

gradle-frontend-plugin's Introduction

gradle-frontend-plugin

https://plugins.gradle.org/plugin/com.matsuyoido.frontend

Feature

  1. sass compile by jsass
  2. css minify by YUI Compressor
  3. css add prefix by CanIUse and ph-css
  4. js minify by YUI Compressor or Google Closure Compiler

Tasks

group: Compile tasks

  1. $ gradlew sassCompile
  2. $ gradlew cssMinify
  3. $ gradlew jsMinify
  4. $ gradlew jsMerge

sassCompile

frontend {
    setting {
        // If you want to set encoding. 'windows' or 'linux' or 'mac'
        lineEnding = 'linux'
        // If you want to add prefixer, set values.
        prefixer {
            // specify data.json from https://github.com/Fyrd/caniuse/blob/master/data.json
            // If don't set, download from https://github.com/Fyrd/caniuse/blob/master/data.json to "$rootDir/gardle/plugin/data.json".
            // If download error, used from caniuse-db-1.0.30000748
            caniuseData = file("$rootDir/caniuse/data.json")
            // If set version string(ex. "76" or "all"), specified greater version check css supports & add prefixer.
            ie = ""
            edge = ""
            chrome = ""
            firefox = ""
            safari = ""
            ios = ""
            android = ""
        }
    }
    style {
        scss {
            inDir = file("$projectDir/src/main/sass")
            outDir = file("$projectDir/src/main/resources/static/css")
            // If you compile and minify, set true. 
            enableMinify = true
            // If you want to add prefixer, set true.
            addPrefixer = true
        }
        // you can multiple block `scss`.
        scss {
            inDir = file("$rootDir/resources/vendor")
            outDir = file("$projectDir/src/main/resources/static/css")
        }
    }
}

cssMinify

frontend {
    setting {
        // If you want to set encoding. 'windows' or 'linux' or 'mac'
        lineEnding = 'linux'
        // If you want to add prefixer, set values.
        prefixer {
            // specify data.json from https://github.com/Fyrd/caniuse/blob/master/data.json
            // If don't set, download from https://github.com/Fyrd/caniuse/blob/master/data.json to "$rootDir/gardle/build/data.json".
            // If download error, used from caniuse-db-1.0.30000748
            caniuseData = file("$rootDir/caniuse/data.json")
            // If set version string(ex. "76" or "all"), specified greater version check css supports & add prefixer.
            ie = ""
            edge = ""
            chrome = ""
            firefox = ""
            safari = ""
            ios = ""
            android = ""
        }
    }
    style {
        css {
            inDir = file("$projectDir/src/main/sass")
            outDir = file("$projectDir/src/main/resources/static/css")
            // If you want to add prefixer, set true.
            addPrefixer = true
        }
        // you can multiple block `css`.
        css {
            inDir = file("$rootDir/resources/vendor")
            outDir = file("$projectDir/src/main/resources/static/css")
        }
    }
}

jsMinify

frontend {
    script {
        js {
            inDir = file("$projectDir/src/main/resources/static/js")
            outDir = file("$projectDir/src/main/resources/static/js")
            // If you want to specify minify compiler. 'google' (Default) or 'yahoo'
            type = 'google'
        }
        // you can multiple block `js`.
        js {
            inDir = file("$rootDir/resources/vendor")
            outDir = file("$projectDir/src/main/resources/static/js")
        }
    }
}

jsMerge

frontend {
    script {
        js {
            inDir = file("$projectDir/src/main/resources/static/js")
            outDir = file("$projectDir/src/main/resources/static/js")
        }
        // you can multiple block `js`.
        js {
            inDir = file("$rootDir/resources/vendor")
            outDir = file("$projectDir/src/main/resources/static/js")
        }
    }
}

All Extension

frontend {
    setting {
        lineEnding = 'linux'
        prefixer {
            caniuseData = file("$rootDir/your/fit/version/data.json")
            ie = "all"
            edge = "42"
            chrome = ""
            firefox = ""
            safari = ""
            ios = ""
            android = ""
        }
        // If you want to happen error stop, set value false.(default is true.)
        skipError = false
    }
    style {
        scss {
            inDir = file("$projectDir/your/scss/directory")
            outDir = file("$projectDir/your/css/output/directory")
            enableMinify = true
            addPrefixer = true
        }
        css {
            inDir = file("$projectDir/your/css/directory")
            outDir = file("$projectDir/your/css/output/directory")
            addPrefixer = true
        }
    }
    script {
        js {
            inDir = file("$projectDir/your/javascript/directory")
            outDir = file("$projectDir/your/javascript/output/directory")
            type = 'google'
        }
    }
}

Details

SassCompile

  • target: .scss files
  • output: .css file
    • If you set enableMinify = true, becomes .min.css file
  • fileName: scss file name

cssMinify

  • target: .css files
  • output: .min.css file
  • fileName: css file name

jsMinify

  • target: .js files
  • output: .min.js file
  • fileName: js file name

jsMerge

  • target: .js.map files
    • this content is json file.
    • 「key: sources」's value is type of string array and value is js file path.
  • output: .min.js file
  • fileName: map file name

Bug or Request

please create New Issue in Japanese or English. (Japanese is better...)

gradle-frontend-plugin's People

Contributors

matsuyoido avatar

Stargazers

avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

gradle-frontend-plugin's Issues

Development Memo

  1. Google Closure を利用しない方法を模索する
    • コンパイルエラーが発生するため、エラー対策に時間がかかる…
    • https://github.com/yuanyan/UglifyJS-java
    • Closure を Web経由でやることも検討しておく？
      • サーバーに依存した場合、利用できないパターンも発生するためやりたくはない。

Some files are not minified.

指定ディレクトリ配下のjs,cssファイルの内、一部のファイルが圧縮されない。
ファイル名末尾（拡張子除く）の最後の1文字が以下のいずれかの場合に対象外になっているように見える。

  • '.'
  • 'm'
  • 'i'
  • 'n'

※恐らく*.min.js等を対象外にしようとしていると思いますが、glob文が誤っているようです

gradle-frontend-plugin/plugin/src/main/java/com/matsuyoido/plugin/frontend/task/Minifier.java

Line 11 in f170670

super(".min." + extension, "glob:*[!.min]." + extension);

Replace use of deprecated IncrementalTaskInputs

The gradle-frontend-plugin uses deprecated Gradle APIs that will be removed in Gradle 8.0. When building a project with Gradle 7.5.1 the following warnings are output:

$ ./gradlew clean build --warning-mode all
> Configure project :my-project
IncrementalTaskInputs has been deprecated. This is scheduled to be removed in Gradle 8.0. On method 'CssMinifyTask.minifyCss' use 'org.gradle.work.InputChanges' instead. Consult the upgrading guide for further information: https://docs.gradle.org/7.5.1/userguide/upgrading_version_7.html#incremental_task_inputs_deprecation
IncrementalTaskInputs has been deprecated. This is scheduled to be removed in Gradle 8.0. On method 'JsMinifyTask.compileJs' use 'org.gradle.work.InputChanges' instead. Consult the upgrading guide for further information: https://docs.gradle.org/7.5.1/userguide/upgrading_version_7.html#incremental_task_inputs_deprecation
IncrementalTaskInputs has been deprecated. This is scheduled to be removed in Gradle 8.0. On method 'JsMergeTask.mergeJavascript' use 'org.gradle.work.InputChanges' instead. Consult the upgrading guide for further information: https://docs.gradle.org/7.5.1/userguide/upgrading_version_7.html#incremental_task_inputs_deprecation

【追加】Extensionに改行の設定を追加する

個人の環境やGitの状況によって、コンパイルを行った際に改行コードが変わった結果、
diff が発生する可能性がある。

diff が常に発生するのは煩わしいので、設定を行える必要がある。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.