布莱恩F爱
向一位来自Portlandyobet英雄联盟的谷歌开发专家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com
用终极课程学习Angular的正确方法

Web开发自动化- gruntfile使用CoffeeScript

这是关于web开发自动化系列的第三篇文章。web开发中最常见的任务是在JavaScript和CSS源文件上运行一系列任务,以优化它们,使之成为高性能的网站。一般来说,我们优化的JS和CSS文件的大小和数量都很小。

为了做到这一点,我首先开始使用Apache Ant和YUI压缩器创建我的JavaScript和CSS源文件的缩小版本。从那时起,我们走过了漫长的道路。我们现在使用CoffeeScript编译成JavaScript和CSS的源文件。这与使用Apache Ant的传统工作流程不太匹配。所以,咕哝一下吧。为了开始,我不得不这样做为我的项目安装和配置Grunt。在本教程的最后,我们可以使用我们的package.json为我的Gruntfile安装所需的插件依赖项。

这篇文章将完成[自动化系列(/2014/04/18/web开发-自动化/)],创建我们的Gruntfile并运行咕哝着说看命令,以在将任何更改保存到源文件后继续运行自动化任务。然后我们可以无缝地编写我们的CoffeeScript和更少的文件,保存它们,并立即在浏览器中测试。

Gruntfile包装

Gruntfile非常简单。这是最基本的。

  • 在与您的包相同的文件夹中创建一个文件。项目根目录中的json文件
  • 该文件可以是JavaScript: Gruntfile.js
  • 或者,也可以是CoffeeScript: Gruntfile.coffee
  • 定义在运行Grunt时调用的函数
  • 这个函数将配置Grunt,设置您的任务,并包括我们之前安装的插件
  • 函数必须定义modules.exports

下面的代码片段是我们的Gruntfile的第一部分。

gruntFunction=(咕哝着说)->gruntConfig=包裹:咕哝着说文件readJSON“package.json”咕哝着说initConfig gruntConfig模块出口=gruntFunction

我们定义了一个函数,名为gruntFunction (),它是我们的包装器函数,因为它被定义为module.exports函数在上面代码段的最后一行执行。在我们的gruntFunction中,我们正在为Grunt设置配置选项。在本例中,我只是告诉Grunt在哪里找到包文件。

下一步是调用loadNpmTasks ()方法来加载我们安装的插件。

咕哝着说loadNpmTasks“grunt-contrib-coffee”咕哝着说loadNpmTasks“grunt-coffeelint”咕哝着说loadNpmTasks“grunt-concat-css”咕哝着说loadNpmTasks“grunt-contrib-cssmin”咕哝着说loadNpmTasks“grunt-contrib-concat”咕哝着说loadNpmTasks“grunt-contrib-uglify”咕哝着说loadNpmTasks“grunt-contrib-less”咕哝着说loadNpmTasks“grunt-contrib-watch”

好了,现在我们可以开始添加任务了。

创建应用CSS从较少的来源

gruntConfig=包裹:咕哝着说文件readJSON“package.json”:应用程序:文件:“www / webroot / css / app.css”:“少src / / styles.less”咕哝着说initConfig gruntConfig繁重loadNpmTasks“grunt-contrib-less”模块出口=gruntFunction

在这个例子中,我使用less插件创建app.css文件从样式。更少的源文件。

Concat图书馆CSS

gruntFunction=(咕哝着说)->gruntConfig=包裹:咕哝着说文件readJSON“package.json”concat_css:填词:src:(“构建/ css / libs / * . css”]桌子:“www / webroot / css / libs.css”咕哝着说initConfig gruntConfig繁重loadNpmTasks“grunt-concat-css”模块出口=gruntFunction

在这个例子中,我将把所有的CSS库文件合并到一个单独的文件中libs.css文件。

缩小CSS库和应用程序

gruntFunction=(咕哝着说)->gruntConfig=包裹:咕哝着说文件readJSON“package.json”cssmin:应用程序:文件:“www / webroot / css / app.min.css”:(“www / webroot / css / app.css”]填词:文件:“www / webroot / css / libs.min.css”:(“www / webroot / css / libs.css”]咕哝着说initConfig gruntConfig繁重loadNpmTasks“grunt-contrib-cssmin”模块出口=gruntFunction

在这个例子中,我正在缩小app.csslibs.css文件到app.min.csslibs.min.css

从CoffeeScript源码创建应用JS

gruntFunction=(咕哝着说)->gruntConfig=包裹:咕哝着说文件readJSON“package.json”咖啡:应用程序:选项:加入:真正的sourceMap:真正的,文件:“构建/ js / app.js”:(“src /咖啡/ * .coffee”]咕哝着说initConfig gruntConfig繁重loadNpmTasks“grunt-contrib-coffee”模块出口=gruntFunction

在这个例子中,我将我的CoffeeScript源文件编译成一个单独的文件app.jsJavaScript文件。

Concat JS库

gruntFunction=(咕哝着说)->gruntConfig=包裹:咕哝着说文件readJSON“package.json”concat:选项:分隔符:“;”填词:src:(“构建/ js / libs / moment-with-langs.min.js”,“构建/ js / libs / jquery.timepicker.min.js”,“构建/ js / libs / md5.js”]桌子:“构建/ js / libs / libs.js”咕哝着说initConfig gruntConfig繁重loadNpmTasks“grunt-contrib-concat”模块出口=gruntFunction

在本例中,我将把所有JavaScript库文件合并到一个单独的文件中libs.js文件。

应用JS糟蹋

gruntFunction=(咕哝着说)->gruntConfig=包裹:咕哝着说文件readJSON“package.json”糟蹋:选项:横幅:“/ img /横幅/ 2014 /”"/** * <%= pkg.name % > *版权(c) < % = grunt.template.today(“yyyy") %> * <%= pkg.author.name %> <<%= pkg.author. "电子邮件% > > * /””“乱砍:真正的压缩:真正的drop_console:真正的dev:选项:美化:真正的压缩:乱砍:drop_console:preserveComments:“所有”文件:“www / webroot / js / libs.js”:“构建/ js / libs / libs.js”“www / webroot / js / app.js”:“构建/ js / app.js”经销:文件:“www / webroot / js / libs.min.js”:“构建/ js / libs / libs.js”“www / webroot / js / app.min.js”:“构建/ js / app.js”咕哝着说initConfig gruntConfig繁重loadNpmTasks“grunt-contrib-uglify”模块出口=gruntFunction

在这个例子中,我运行了UglifyJs来缩小库(lib .js)和我的应用程序(app.js)的JavaScript文件。

设置表的任务

gruntFunction=(咕哝着说)->gruntConfig=包裹:咕哝着说文件readJSON“package.json”::文件:(“少src / / * .less”]任务:(“少”,“cssmin”]咖啡:文件:(“src /咖啡/ * .coffee”]任务:(“咖啡”,“糟蹋”]咕哝着说initConfig gruntConfig繁重loadNpmTasks“grunt-contrib-watch”模块出口=gruntFunction

在本例中,我设置了一个监视任务。这使我能够运行grunt watch命令。它将监控我的源目录中的所有源文件(LESS和CoffeeScript),以查看任何更改。当保存更改时,我运行必要的任务来编译和缩小应用程序文件。要启动它,我只需运行命令:

美元的呼噜声

寄存器的默认任务

gruntFunction=(咕哝着说)->gruntConfig=包裹:咕哝着说文件readJSON“package.json”咕哝着说registerTask“默认”,(“少”,“concat_css”,“cssmin”,“咖啡”,“concat”,“糟蹋”]咕哝着说initConfig gruntConfig模块出口=gruntFunction

在本例中,我设置了运行grunt is执行的默认任务。注意,我已经在数组中指定了顺序。这是很重要的,因为大多数任务依赖于以前任务的完成。

完成Gruntfile。咖啡和包。json文件

下面是完整的Gruntfile。如果愿意,还可以下载完整的源文件。

下载文件后,只需删除. txt文件扩展名,并将该文件放在项目根文件夹中。

gruntFunction=(咕哝着说)->gruntConfig=包裹:咕哝着说文件readJSON“package.json”:应用程序:文件:“www / webroot / css / app.css”:“少src / / styles.less”concat_css:填词:src:(“构建/ css / libs / * . css”]桌子:“www / webroot / css / libs.css”cssmin:应用程序:文件:“www / webroot / css / app.min.css”:(“www / webroot / css / app.css”]填词:文件:“www / webroot / css / libs.min.css”:(“www / webroot / css / libs.css”]咖啡:应用程序:选项:加入:真正的sourceMap:真正的,文件:“构建/ js / app.js”:(“src /咖啡/ * .coffee”]coffeelint:应用程序:src:“src /咖啡/ * .coffee”no_tabs:水平:“忽略”缩进:水平:“警告”no_trailing_whitespace:水平:“错误”no_trailing_semicolons:水平:“错误”no_plusplus:水平:“警告”no_implicit_parens:水平:“忽略”max_line_length:水平:“忽略”concat:选项:分隔符:“;”填词:src:(“构建/ js / libs / moment-with-langs.min.js”,“构建/ js / libs / jquery.timepicker.min.js”,“构建/ js / libs / md5.js”]桌子:“构建/ js / libs / libs.js”糟蹋:选项:横幅:“/ img /横幅/ 2014 /”"/** * <%= pkg.name % > *版权(c) < % = grunt.template.today(“yyyy") %> * <%= pkg.author.name %> <<%= pkg.author. "电子邮件% > > * /””“乱砍:真正的压缩:真正的drop_console:真正的dev:选项:美化:真正的压缩:乱砍:drop_console:preserveComments:“所有”文件:“www / webroot / js / libs.js”:“构建/ js / libs / libs.js”“www / webroot / js / app.js”:“构建/ js / app.js”经销:文件:“www / webroot / js / libs.min.js”:“构建/ js / libs / libs.js”“www / webroot / js / app.min.js”:“构建/ js / app.js”::文件:(“少src / / * .less”]任务:(“少”,“cssmin”]咖啡:文件:(“src /咖啡/ * .coffee”]任务:(“咖啡”,“糟蹋”]咕哝着说initConfig gruntConfig繁重loadNpmTasks“grunt-contrib-coffee”咕哝着说loadNpmTasks“grunt-coffeelint”咕哝着说loadNpmTasks“grunt-concat-css”咕哝着说loadNpmTasks“grunt-contrib-cssmin”咕哝着说loadNpmTasks“grunt-contrib-concat”咕哝着说loadNpmTasks“grunt-contrib-uglify”咕哝着说loadNpmTasks“grunt-contrib-less”咕哝着说loadNpmTasks“grunt-contrib-watch”咕哝着说registerTask“默认”,(“少”,“concat_css”,“cssmin”,“咖啡”,“concat”,“糟蹋”]咕哝着说registerTask“棉絮”,“coffeelint”模块出口=gruntFunction

布莱恩F爱

嗨,我是布莱恩。我对TypeScript, Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。