回复：从零开始的爆速编码生活

1 年 ago
逸, 科
3 minutes

实践篇：重生从零开始的超速编码生活（前端实践篇）

我将分享为了提高编码速度而最近所做的事情。即使对于初学者，也会从零开始搭建环境，一直到进行爆速编码的一系列流程。

在Mac OSX上进行构建是前提条件。
在示例中，我们将使用Brackets创建浏览器端和服务器（NodeJS）的简易模拟，
但我认为这在创建其他web应用程序时也会很有用。

    • 開発環境（Bracketsエディター）インストール

 

    • Bracketsカスタマイズ（プラグイン、キーマッピング、半透明化）

 

    • NodeJSインストール

 

    • Bowerインストール

 

    • gulpインストール

 

    サンプル作成

引入开发环境（Brackets编辑器）。

Adobe所开发的编辑器轻巧且插件丰富。
提到Adobe会让人联想到收费，但这款编辑器是免费开源的。
易于自定义，适合开发网络应用程序。
此外，还可以在鼠标悬停在HTML颜色代码上时进行颜色可视化，
还有显示鼠标悬停在图像URL上时的图像预览功能。
当然，还提供了代码自动补全功能。

请从以下链接进行安装：http://brackets.io/

brackets.png

基本操作 – Basic operation

经常在编辑时使用的快捷键：
Cmd+X：剪切行、剪切选定部分
Cmd+C：复制行、复制选定部分
Cmd+V：粘贴
Cmd+/：注释
Alt+→：按词向右移动
Alt+←：按词向左移动
Cmd+↑：上移行
Cmd+↓：下移行
Cmd+Enter：添加下一行

还有其他很多选择
详细信息请参考以下内容
备忘单

自定义括号（插件、键位映射、半透明化）

插件

你可以通过括号右侧的方块图标来添加插件。

plugin.png
plugininstall.png

为了加快编码速度，在这里引入可以使用的插件。
请通过以下关键字进行搜索并安装。

    • Tabs – Custom Working

 

    • SideBar Plus

 

    • Brackets Snippets(by edc)

 

    • Beautify

 

    • Themes for Brackets

 

    Overscroll

选项卡 – 定制工作

将允许通过选项卡切换多个文件。

tabs.png

侧边栏增强

你可以通过编码来隐藏侧边栏。
取消“显示侧边栏”的勾选。
另外，选中“高亮活动行”、“行号”和“折行”会使得编码更加方便。

sidebar.png

当处于非显示状态时，您可以点击左侧区域来重新显示。

out.gif

括号片段（由edc提供）

这次的重点可谓毫不夸张。
事先注册好与简短单词相对应的程序，
在输入简短单词时，可以通过按下Tab键展开（补全）。

安装Snippets插件后，点击右侧的电灯泡图标。

snippetspanel.png

点击”New”按钮，可以添加Snippets。
触发器：用于调用Text的触发器。
描述：触发器的说明。
范围：适用的文件扩展名。
文本：展开的内容。

当您进行注册时，在输入过程中会出现选项供您选择，并且可以通过使用Tab键进行展开。

snippetsdemo.png
${1},${2}

当按下Tab键时，光标会移动到指定位置。

${1:link}

当展开时，预先放入了一个名为“链接”的模板，这样局部编辑更加容易。

这个插件还有自身Snippets文件的导出与导入功能，
通过导入导出的yml文件，可以在其他的Brackets中使用。
我已经上传了我使用的Snippets文件，
如果需要的话，请随意使用。

snippets.png

美化

如果在菜单栏中的“编辑”→“保存时进行美化”选项处勾选上，可以将意图整理好。
顺便提一下，勾选上“自动闭合括号”也会更方便。

beautify.png

括号的主题

在菜单栏中，你可以通过选择“显示”→“主题”来更改Brackets的外观（皮肤）。

theme.png

建议在稍后安装半透明工具Afloat之前，将背景颜色从默认的白色改为黑色。

themeblack.png

超出滚动

可以超过文件末尾进行滚动。

overscroll.png

這也可以用於背後畫面的確認，當它部分透明化時。

其他插件

由于还有其他多种可用的插件，请参考下文的 Brackets 推荐扩展集和解释。

按键映射 shè)

可以为括号本身分配快捷键，并进行扩展。
菜单栏中选择“调试”→“打开用户键位图”。

keymap.png

由于默认情况下没有添加屏幕分割的快捷方式，因此请进行以下设置，以便提高工作效率。

{
    "documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
    "overrides": {
        "Cmd-Shift-T": "cmd.splitViewNone",
        "Cmd-T": "cmd.splitViewVertical",
        "Alt-T": "cmd.splitViewHorizontal"
    }
}
    • Cmd+Shift+T→画面分割解除

 

    • Cmd+T→画面縦分割

 

    Alt+T→画面横分割

半透明化 – huà

我相信很多人认为MacBook Air等电脑的屏幕太小。
使用Afloat工具可以将窗口设为半透明。
在gulp部分，安装一个可以在编辑保存时自动刷新浏览器的模块，
这样一起使用的话，您可以在编码的同时即时查看背后的浏览器画面。

Afloat的下载
http://mac.majorgeeks.com/mg/getmirror/afloat,1.html

Afloat下载链接：
http://mac.majorgeeks.com/mg/getmirror/afloat,1.html

Afloat.png

安装完成后，关闭要透明化的Brackets，并重新打开它。
在菜单栏选择「窗口」→「透明度」→「增加透明度」来实现半透明化。

transparency.png

安装自制软件

这是Mac OS X的软件包管理工具。
在安装原生软件时非常方便。
（如imagemagick、ffmpeg等）
由于这次需要git，因此我们先安装git。

spotlight.png

安装HomeBrew

$ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装Git

$brew install git

安装Node.js

NodeJS 是一个可以用 JavaScript 编写服务器端程序的环境。
它在后端使用一个名为 V8 的引擎进行解释和执行。
由于 NodeJS 的版本更新较快，
考虑到未来，最好通过 NodeJS 的版本管理工具来安装。
有一个名为 nvm 的 NodeJS 版本管理工具，我们将进行安装。

不用理会安装

$git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
$. ~/.nvm/nvm.sh

为了在每次开机时执行~/.nvm/nvm.sh脚本，需要在~/.bashrc文件中添加以下内容，以便自动加载。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

安装NodeJS。

$nvm install v4.3.2
$nvm use v4.3.2

由于NodeJS具有一个强大的NodeJS包安装工具npm，因此可以通过npm安装各种NodeJS模块。
由于bower和gulp也是NodeJS模块，因此也可以通过npm安装。

让我们尝试创建一个NodeJS服务器。

require('http').createServer(function (req, res) {

    res.writeHead(200, {
        "Content-Type": "text/html"
    });
    res.end('Hello World');

}).listen(3000);

你可以使用以下命令来启动。

$node app.js

请尝试通过浏览器访问 http://localhost:3000。

我們也順便安裝一下Nodemon。
Nodemon 是一個當伺服器端程式有更動時，能夠重新啟動 NodeJS 的工具。

安装Nodemon

$npm install -g nodemon

使用Nodemon来启动NodeJS的命令如下。

$sudo nodemon app.js
nodemon

安装 Bower

bower是一个用于安装浏览器端JavaScript库包的工具。您可以使用它来下载诸如jQuery、AngularJS、BootStrap等浏览器端JavaScript库。

安装bower

$npm install -g bower

下载jQuery

$bower install jquery

bower_components文件夹会被创建并下载jQuery。
下载位置通常是在bower_components/{库名称}/dist/（库）.js这个格式中。

安装gulp

称为任务执行器，可以通过编写脚本来自动化琐事处理。（即批处理）

安装gulp

$npm install -g gulp

如果使用browser-sync模块，您可以在保存文件时自动重新加载浏览器，这将大大提高编码效率。

将gulp任务写入gulpfile.js中。
以下是一个示例，它将在资源文件更改时自动重新加载浏览器的gulpfile。

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    reload = browserSync.reload,
    nodemon = require('gulp-nodemon');

gulp.task('nodemon', function (cb) {
    var called = false;

    return nodemon({
            script: 'app.js',
            ext: 'js html css less', // 監視するファイルの拡張子
            ignore: ['node_modules'] // 監視しないファイル
        })
        .on('start', function () {
            // サーバー起動時
            if (!called) {
                called = true;
                cb();
            }
        })
        .on('restart', function () {
            // サーバー再起動時
            setTimeout(function () {
                reload();
            }, 500);
        });
});

gulp.task('browser-sync', ['nodemon'], function () {
    browserSync.init(null, {
        proxy: 'http://localhost:3000',
        port: 7000
    });
});

gulp.task('default', ['browser-sync'], function () {
    // クライアント側のwatchタスクを記述

});

安装gulp相关模块

$npm install gulp
$npm install gulp-nodemon
$npm install browser-sync

运行gulp

$gulp

虽然这次没有使用gulp.watch模块，但你可以通过使用其他模块来监视文件的变化，例如在CSS或JS修改时进行minify处理。

样本

让我们来尝试一下之前最快的编码方式。从零开始，创建一个从服务器返回JSON数据的简单示例。这是演示的源代码。

客户端方。

<!DOCTYPE html>
<html>

<head>
    <title>爆速コーディング</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">


    <script>
        window.onload = function (e) {
            // init
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "http://localhost:3000/api", true);
            xhr.onload = function (e) {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        console.log(xhr.responseText);
                        var body = document.querySelector("body");
                        var div = document.createElement("div");
                        div.innerHTML = xhr.responseText;
                        body.appendChild(div);
                    } else {
                        console.error(xhr.statusText);
                    }
                }
            };
            xhr.onerror = function (e) {
                console.error(xhr.statusText);
            };
            xhr.send(null);


        };
    </script>

</head>

<body>
    <!-- tag -->

</body>

</html>

服务器端

var html = require('fs').readFileSync('index.html');
require('http').createServer(function (req, res) {
    var header = {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Method": "GET",
        "Access-Control-Allow-Headers": "Content-Type"
    };

    if (req.url.indexOf('/api') != -1) {
        header["Content-Type"] = "application/json";
        res.writeHead(200, header);
        res.end(JSON.stringify({
            msg: "爆速コーディング"
        }));
    } else {
        header["Content-Type"] = "text/html";
        res.writeHead(200, header);
        res.end(html);
    }

}).listen(3000);

示威活动

コーディング

可以使用以下命令下载并启动样本组件。

$git clone https://github.com/teradonburi/coding
$npm install
$gulp
✖
广告
将在 10 秒后关闭
bannerAds