Movatterモバイル変換


[0]ホーム

URL:


codecamp

Atom Atom 内运行 gulp 的实现方法

Atom 内运行 gulp 的实现方法

效果图

atom 编辑器内置一个 gulp 执行面板;

左边是探测到 gulpfile 的队列任务,单机即可运行,右边就是执行的状态预览。

本人只实现了三个面板,因为现在不用 grunt 了,可以汇总错误信息。

功能实现

单纯的 gulp 面板只依赖两个插件

  • bottom-dock
  • gulp-manager package

两者缺一不可;

bottom-dock 不仅仅可以实现 gulp 面板,还能实现 todo[很实用的功能],还有 grunt 队列也能实现;

这些功能都是同一个封装好的插件。

面板快捷键

三个面板有些快捷键是公用的,有些是专用的,可以看下。

Bottom-dock 快捷键

  • ctrl-k ctrl-t: 是否显示面板
  • ctrl-k ctrl-r: 刷新窗口
  • ctrl-k ctrl-c: 关闭窗口

GULP 面板快捷键

  • ctrl-k ctrl-t: 是否显示面板
  • ctrl-k ctrl-g: 创建一个新的 gulp 面板
  • ctrl-k ctrl-r: 刷新窗口
  • ctrl-k ctrl-c: 关闭窗口

TODO 面板快捷键

  • ctrl-k ctrl-t: 是否显示面板
  • ctrl-k ctrl-r: 刷新窗口
  • ctrl-k ctrl-c: 关闭窗口
  • ctrl-k ctrl-m: 添加面板
Atom atom-minify(CSS/JS压缩神器)
Atom Atom 代码输入震动效果
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录
Atom 简介
Atom 基础
Atom 插件主题推荐
Atom 自定义按键绑定
Atom 保存与预览功能
Atom config.cson 基础教程
Atom Emmet 实例教程
Atom 分屏操作
Atom 实用侧边栏插件
Atom CSScomb 增强版
Atom 编辑器实时预览 HTML 页面
Atom Sync-setttings(插件-备份神器)
Atom JS 代码智能提示补全
Atom JQ 代码片段补全
Atom JS 代码片段补全
Atom 深入自定义快捷键
Atom atom-minify(CSS/JS压缩神器)
Atom Atom 内运行 gulp 的实现方法
Atom Atom 代码输入震动效果

ATOM版本更新

关闭

MIP.setData({'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false},'pageFontSize' : getCookie('pageFontSize') || 20});MIP.watch('pageTheme', function(newValue){setCookie('pageTheme', JSON.stringify(newValue))});MIP.watch('pageFontSize', function(newValue){setCookie('pageFontSize', newValue)});function setCookie(name, value){var days = 1;var exp = new Date();exp.setTime(exp.getTime() + days*24*60*60*1000);document.cookie = name + '=' + value + ';expires=' + exp.toUTCString();}function getCookie(name){var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null;}
[8]ページ先頭

©2009-2025 Movatter.jp