[英]SASS to CSS via an ANT task + directory creation
我最近開始在基於Java的項目中使用SASS [ http://sass-lang.com/ ],並希望創建一個Ant任務:
我該怎么做呢?
它最終花了我一些時間來弄清楚,所以我想我會發布我是如何完成它的。 這是我的設置:
build.properties
css.dir=./template/ver1-0/css/v3
sass.dir=./template/ver1-0/css/v3/scss
scss目錄結構:
/template/ver1-0/css/v3/scss
+ widgets
- widgettest.scss
- widgettest2.scss
+ global
- globaltest.scss
- globaltest2.css
- file1.scss
- file2.scss
- _partial1.scss
- _partial2.scss
這是Ant任務 :
<!-- scss to CSS -->
<!-- via: http://workingonthecoolstuff.blogspot.com/2011/02/using-sass-in-ant-build.html -->
<target name="sass-compile-to-css">
<echo message="Compiling scss files to css..." />
<!-- create the css destination dir if it doesn't already exist -->
<property name="css-dest" location="${css.dir}"/>
<echo message="Creating directory at ${css.dir} [if it doesn't yet exist]" />
<mkdir dir="${css-dest}" />
<!-- create subdirs if necessary
via: https://stackoverflow.com/questions/536511/how-to-create-directories-specified-by-a-mapper-in-ant -->
<echo message="Creating css directories (and temporary .css files) for .scss to be compiled..." />
<touch mkdirs="true">
<fileset dir="${sass.dir}" includes="**/*.scss" excludes="**/_*" />
<mapper type="glob" from="*.scss" to="${css.dir}/*.css"/>
</touch>
<echo message="Running sass executable against sass files and compiling to CSS directory [${css-dest}] " />
<!-- run sass executable -->
<apply executable="sass" dest="${css-dest}" verbose="true" force="true" failonerror="true">
<arg value="--unix-newlines" />
<srcfile />
<targetfile />
<fileset dir="${sass.dir}" includes="**/*.scss" excludes="**/_*" />
<mapper type="glob" from="*.scss" to="*.css"/>
</apply>
<echo message="Done compiling scss files!" />
</target>
運行任務后,結果如下所示:.scss文件被編譯為與它們創建的路徑相同的路徑。 如果${css.dir}
下的文件父目錄尚不存在, ${css.dir}
相應地創建它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.