• 前端project师养成记:开发环境搭建(Sublime Text必备插件推荐)


    为了让自己更像一个前端project师,决定从开发环境開始武装自己。

    本文将介绍前段project师开发的一些利器的安装步骤,主要包含了:

    1.Node.js的安装

    2.Grunt的安装及经常使用插件

    3.Sublime Text的安装及必备插件


    一.Node.js的安装

    Node.js就是一堆前端project师捧红的,所以装上这个嘛,主要不是自己须要使用Node.js而是一堆工具对他的依赖。

    Windows下安装步骤非常easy:

    1.去到http://nodejs.org/下载最新的安装包,安装。

    2.在CMD下执行。node和npm看看是否能执行成功,假设不行就检查下PATH的设置。

    3.有个很好用的东西值得全局安装anywhere,能够在不论什么文件夹启动一个web服务,手机调试页面必备。

    二.Grunt的安装

    Grunt是眼下用的比較多的构建工具,写Java的都知道Maven,这玩意儿就是Javascript界的Maven。

    里面有各种插件很有用。

    1.在CMD下执行:npm install -g grunt-cli

    2.试下能不能在CMD下执行:grunt。可能会报错,没关系由于没有配置文件。

    正常的一个项目构建的流程一般是先在代码根文件夹以下。创建了package.json和Gruntfile.js,之后先执行npm install然后再执行grunt就能够完毕项目的构建了。


    以下介绍一些前端经常使用的Grunt插件:

    grunt-cli 这个就是命令行

    grunt-contrib-clean 这个用于build前的清理工作

    grunt-contrib-concat 这个用于拼接文件

    grunt-contrib-copy 这个用于复制文件

    grunt-contrib-cssmin 这个用于压缩css

    grunt-contrib-uglify 这个用于压缩js

    grunt-contrib-htmlmin 这个用于压缩html

    能够看下我的开源项目Tiny-Alert基本上展示了一个最简单的配置。https://coding.net/u/shootyou/p/Tiny-Alert/git


    三.Sublime Text的安装及必备插件

    没用Sublime之前以为这黑不拉几的玩意儿有啥好玩的。自己用了才知道,这玩意儿真不是用来装逼的,用熟了至少提高前端project师一倍的效率,写程序那叫一个快。


    1.安装Sublime Text 3: http://www.sublimetext.com/3

    2.破解什么的自行补脑

    3.安装package control

    import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

    打开sublime text 3。按ctrl+`或者菜单View > Show Console打开命令窗体,粘贴以上代码并回车就可以。

    然后就開始幸福生活了,Ctrl+Shift+P唤起。这个玩意儿是万能的,你想要啥都在这输入下即可了。输入:Install,选择Install Package,然后输入以下插件的名字搜索即可了。


    必备插件:

    AutoFileName:自己主动补全文件名称

    Emmet:神器啊,花10分钟学学语法,让你提升10倍编码速度:http://blog.wpjam.com/m/emmet-grammar/

    Go-To-Css-Declaration:跳转到css的定义处

    JsFormat:格式化js代码

    Tag:貌似是能够补全和格式化html标签

    Themr:主题选择

    Autoprefixer:自己主动加入浏览器兼容前缀

    CodeFormatter:代码格式化

    ConvertToUTF8:解决中文编码问题

    SublimeLinter:代码提示高亮

    Terminal:唤起终端控制台


  • 相关阅读:
    Vue.js 2.x笔记:安装与起步(1)
    EntityFramework Core笔记:保存数据(4)
    EntityFramework Core笔记:查询数据(3)
    EntityFramework Core笔记:表结构及数据基本操作(2)
    EntityFramework Core笔记:入门(1)
    ASP.NET MVC系列:web.config中ConnectionString aspnet_iis加密与AppSettings独立文件
    EntityFramework优化:第一次启动优化
    EntityFramework优化:查询性能
    EntityFramework优化:查询WITH(NOLOCK)
    SpringCloud学习笔记:熔断器Hystrix(5)
  • 原文地址:https://www.cnblogs.com/gavanwanggw/p/7073008.html
Copyright © 2020-2023  润新知