T: 400-6065-301
146
我是一个 自动化的忠实拥护者 因为它使生活更加简单。 为什么花时间在卑微的,单调乏味的任务,吸你的生命力,当你有一台电脑为你做事? 特别是web开发。
许多开发任务可以是一个苦差事。 在开发您可能想要编译代码,当推一个开发版本可以连接和贬低文件,删除只发展资源,等等。 甚至相对简单的删除一些文件,或重命名文件夹 可以占用了我们大部分的时间。
浦江做网站在本文中,我将向您展示如何使你的生活更容易利用提供的优秀功能 咕哝着说 ,一个Javascript任务跑。 我将指导您完成整个过程,所以不用担心,即使你不是一个Javascript向导!
在Hongkiat.com上:
CSSMatic使CSS网页设计师
在Mac自动化任务文件夹操作
自动化Dropbox文件操作
10应用在你的Android设备帮助自动化任务
如何(自动)备份你的网站Dropbox
安装繁重是非常容易的,因为它使用包管理器的节点。 这意味着你可能还需要安装节点本身。 打开一个终端或命令提示符(我将调用这个终端从现在开始)并输入 nmp - v 。
如果你看到一个版本号 npm 安装,如果你看到一个“命令未找到”错误,你必须去安装它 节点下载页面并选择你需要的版本。
一旦安装节点,越来越繁重的一个终端的命令:
1 | npm安装- g grunt-cli |
您将使用繁重项目基础上由于每个项目会有不同的需求。 现在让我们开始一个项目通过创建一个文件夹并导航到它通过我们的终端。
两个文件组成的核心咕哝: package.json 和 Gruntfile.js 。 包文件定义的所有第三方依赖你的自动化将使用Gruntfile允许您控制 如何 这些都是使用。 现在让我们创建一个基础的包文件包含以下内容:
1 2 3. 4 5 6 7 | { “名称”:“测试项目”, “版本”:“1.0”, “devDependencies”:{ “呼噜声”:“~ 0.4.5”, } } |
名称和版本是你,必须包含所有包您正在使用的依赖关系。 目前我们不做任何我们只要确保繁重本身添加依赖项。
你可能会问自己这是什么等号波浪号(~)称为是做。
版本可以使用规则的需要 npm的语义版本 。 简而言之:
你指定一个确切的版本 4.5.2
您可以使用大于或小于显示最小或最大版本等 > 4.0.3
使用波浪号指定版本。 使用 ~ 1.2 被认为是 1.2.x ,任何版本高于1.2.0但低于1.3
更多的方式指定版本是可用的,但这是足够的对于大多数需求。 下一步是创建一个Gruntfile将执行我们的自动化。
1 2 3. 4 5 6 7 8 9 | 模块。 出口=函数(){ grunt.initConfig ({ 包裹:grunt.file.readJSON (“package.json”) }); grunt.registerTask (“默认”[]); }; |
这基本上是Gruntfile的骨架; 有两个有趣的地方。 在一个位置 initConfig () 函数。 这就是你所有的项目配置。 这将包括处理少/ SASS编译、缩减脚本等等。
第二个位置是下面这个函数在您指定的任务。 你可以看到一个任务指定命名为“默认”。 它目前是空的没有,但是我们会在以后扩展。 任务基本上排队零碎东西从我们的项目配置和执行它们 。
例如,一个叫“脚本”的任务可能将我们所有的脚本,然后贬低结果文件,然后将其移动到它的最终位置。 这三个动作都在项目配置中定义,但“齐心协力”的任务。 如果这还不清楚别担心,我将向你展示这是如何实现的。
让我们创建一个任务,为我们贬低一个javascript文件。
我们需要做四件事任何时候我们想要添加一个新的任务:
如果需要安装一个插件
需要在Gruntfile
写一个任务
如果需要将它添加到一个任务组
浦江做网站找到你所需要的插件的最简单方法是在谷歌中输入这样的:“贬低javascript繁重插件”。 第一个结果应该引导你 grunt-contrib-uglify 插件就是我们需要的。
Github页面告诉你所有你需要知道的。 安装在终端一行,这就是你需要使用:
1 | npm安装grunt-contrib-uglify——save-dev |
你可能需要运行这个管理员特权。 如果你有类似的 npm犯错! 请尝试再次运行这个命令作为根用户/管理员。一路上只要输入sudo命令之前,在提示的时候输入你的密码:
1 | sudo npm安装grunt-contrib-uglify——save-dev |
此命令实际上解析你的 package.json 文件,并将其添加为一个依存关系,你不需要做手工。
下一步是添加在你的Gruntfile作为需求。 我喜欢在文件的顶部添加插件,这是我的完整Gruntfile后添加 grunt.loadNpmTasks (“grunt-contrib-uglify”); 。
1 2 3. 4 5 6 7 8 9 10 11 | 模块。 出口=函数(){ grunt.loadNpmTasks (“grunt-contrib-uglify”); grunt.initConfig ({ 包裹:grunt.file.readJSON (“package.json”) }); grunt.registerTask (“默认”[]); }; |
正如我们之前所讨论的,这应该是在完成 initConfig () 函数。 插件的Github页面(和大多数其他插件)给你足够的信息和示例。 这是我的测试项目中使用。
1 2 3. 4 5 6 | 糟蹋:{ 构建:{ src:“js / scripts.js”, 桌子:“js / scripts.min.js” } } |
这是很简单的,我指定了 scripts.js 文件在我的项目的js目录并缩小文件的目的地。 有很多方法来指定源文件,我们稍后再看一看。
现在,让我们看看完整的Gruntfile添加了之后,要确保你知道事物是如何组合在一起的。
1 2 3. 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 模块。 出口=函数(){ grunt.loadNpmTasks (“grunt-contrib-uglify”); grunt.initConfig ({ 包裹:grunt.file.readJSON (“package.json”), 糟蹋:{ 构建:{ src:“scripts.js”, 桌子:“scripts.min.js” } } }); grunt.registerTask (“默认”[]); }; |
现在你可以去您的终端类型 繁重糟蹋 但是我们需要任务组运行多个任务。 我们默认任务空,只是等待被添加的东西让我们修改如下:
1 | grunt.registerTask (“默认”, [“糟蹋”]); |
在这个阶段,你应该能够去终点站,类型 咕哝着说 看看缩小发生。 别忘了创建一个 scripts.js 文件当然!
这并没有花费很多时间设置它吗? 即使你新的这一切和你花了一些时间来完成这些步骤,节省的时间将超过几个使用时间。
让我们看看连接文件和 学习如何指定多个文件作为目标 一路上。
连接是一个过程,结合多个文件到一个文件的内容。 我们需要的 grunt-contrib-concat 插件。 让我们一起通过步骤:
安装插件使用 npm安装grunt-contrib-concat——save-dev 在终端。 一旦完成,一定要将它添加到您的Gruntfile就像在使用 grunt.loadNpmTasks (“grunt-contrib-concat”); 。
接下来是配置。 让我们把三个特定的文件,语法都不会陌生。
1 2 3. 4 5 6 | concat: { 经销:{ src:(“dev / js / header.js”,“dev / js / myplugin.js”,“dev / js / footer.js”), 桌子:“js / scripts.js”, }, }, |
上面的代码需要给出的三个文件作为源文件,并将其组成作为目的地。
这已经是很强大,但如果添加一个新文件呢? 我们需要回来吗? 当然不是,我们可以指定一个整个文件夹的文件连结。
1 2 3. 4 5 6 | concat: { 经销:{ src:“dev / js / * . js””), 桌子:“js / scripts.js’, }, }, |
现在,dev / js文件夹中的任何javascript文件将被合并成一个大文件: js / scripts.js ,好多了!
现在是时候来创建一个任务,因此我们可以将一些文件。
1 | grunt.registerTask (“mergejs”, [“concat”]); |
这不是默认的任务了,所以我们需要在终端中输入它的名字当我们问题 咕哝着说 命令。
1 | 繁重mergejs |
我们已经取得了很大的进步,但还有更多! 现在,当您想要连接或贬低你需要去终端类型适当的命令。 是时候我们看一看 看 命令将为我们做这个。 我们还将学习如何执行mulitple任务,。
我们需要抓住开始实施 grunt-contrib-watch 。 我相信你可以安装它,并将它添加到Gruntfile靠你自己了,所以我先告诉你我用我的测试项目。
1 2 3. 4 5 6 | 看:{ 脚本:{ 文件:[“dev / js / * . js”), 任务:[“concat”,“糟蹋”), }, } |
我命名的一组文件看“脚本”,所以我知道它。 在这个对象我有指定的文件看运行和任务。 在前面的连接示例中,我们齐心协力在dev / js目录中所有的文件。
在缩小的例子中我们按照这个文件。 有意义看dev / js文件夹每当有任何变化和运行这些任务。
正如您可以看到的,多个任务可以被称为容易,通过用逗号分开它们。 他们将按顺序进行,首先连接,那么在这种情况下缩小。 这也可以完成任务组,这是它们存在的原因。
我们现在可以修改默认的任务:
1 | grunt.registerTask (“默认”, [“concat”,“糟蹋”]); |
现在我们有两个选择。 每当你想连接和贬低你的脚本你可以切换到终端和类型 咕哝着说 。 您还可以使用看命令启动看你的文件: 咕哝着说看 。
坐在那里,等待着你去修改这些文件。 一旦你做,它将执行所有任务分配给它,来吧,试一试。
这是更好的,不需要输入。 现在你可以带走你的文件和工作一切都会很好地为你做。
与如何安装和使用插件的基础知识和观察命令是如何工作的,你们都将成为一个自动化成瘾者自己。 有更多比我们讨论的繁重但你自己无法处理。
使用命令 编译SASS , 优化图片 , autoprefixing ,更多的只是一个步骤后我们讨论和阅读语法插件需要。
如果你知道一些特别的用途请在评论中让我们知道,我们总是想听到你如何使用工具如繁重!
热门分享
最新文章
随机推荐
