前端自动化 shell 脚本命令 与 shell-node 脚本命令 简单使用 之 es6 转译
(背景: 先用 babel 转译 es6 再 用 browserify 打包 模块化文件,来解决浏览器不支持模块化 )
(Browserify是一个让node模块可以用在浏览器中的神奇工具)
今天折腾了一上午,对于前端好多自动化管理的命令用起来,步骤甚多,故想写一个脚本文件,将项目所需要执行到命令 都 写在一个脚本文件中,在命令行 只需写一个命令即 完成所有事情。
配置的环境: node + git
1.第一步:在项目根目录下 新建 package.json 配置文件
{
"name": "shell-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"es": "babel src/js -d build",
"browserify": "browserify build/index.js > bundle.js",
"build": "npm run es && npm run browserify"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.0.0",
"babel-core": "^6.23.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.22.0"
}
}
("这些脚本可以是行内bash命令,或者也可以指向可执行的命令行文件。你还可以在脚本内引用其他npm脚本");
一:shell 脚本 :
文件名:test.sh 位置:项目根目录
#!/bin/bash
#the first program
echo -e "\e[1;34m hello shell \e[0m"
npm run es && npm run browserify
shell 脚本运行 : bash test.sh
二:shell-node 脚本
注:用 js 语法写的 命令行 脚本
文件名:hello.sh 位置:项目根目录
#!/usr/bin/env node
console.log('hello world!');
.....
在项目根目录 打开 git bash ,可在 package.json 中 添加 这样一段 bin 代码:
"bin":{
"hello": "./hello.sh"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"es": "babel src/js -d build",
"browserify": "browserify build/index.js > bundle.js",
"build": "npm run es && npm run browserify"
},
命令行 输入 , npm link 可以全局使用, 使用 时 ,在 命令行 直接 输入 hello 即可 执行 此 脚本文件。
<h5>移除此 全局命令 :</h5>在此脚本文件的根目录 打开 git bash 命令行 输入: npm remove -g
三:'onchange 插件 监视 文件变化 自动执行 脚本的合并任务'
package.json 配置 如下:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"es": "babel src/js -d build",
"browserify": "browserify build/index.js > bundle.js",
"build": "npm run es && npm run browserify",
"watch": "onchange src/js/*.js -- npm run build"
},
"devDependencies": {
"onchange": "^3.2.1"
}
相关文章部分内容:
变更监控
至此,我们的任务不断的需要对文件做一些变更,我们不断的需要切回命令行去运行相应的任务。针对这个问题,我们可以添加一个任务来监听文件变更,让文件在变更的时候自动执行这些任务。这里我推荐使用onchange插件,安装方法如下:
npm i -D onchange
让我们来给CSS和JavaScript设置监控任务:
"scripts": {
...
"watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",
"watch:js": "onchange 'src/js/*.js' -- npm run build:js",
}
这些任务可以分解如下:onchange需要你传参想要监控的文件路径(字符串),这里我们传的是SCSS和JS源文件,我们想要运行的命令跟在--之后,这个命令当路径内的文件发生增删改的时候就会被立即执行。
让我们再添加一个监控命令来完成我们的npm scripts构建过程。
再添加一个包,parallelshell:
npm i -D parallelshell
再次给scriopts对象添加一个新任务:
"scripts": {
...
"watch:all": "parallelshell 'npm run serve' 'npm run watch:css' 'npm run watch:js'"
}
parallelshell支持多个参数字符串,它会给npm run传多个任务用于执行。
写在最后 :
开发环境里 将 jQuery 通过 npm 包管理工具下载,需要用到的文件顶部将其 引入 es6 引入 使用 :
import "babel-polyfill";
import $ from "jquery";
import {firstName, lastName, year} from './profile'; $('h1').css({"color":"red"});
.....
package.json 最终 事例:
{
"name": "shell-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "",
"license": "ISC",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"es": "babel src/js -d build",
"browserify": "browserify build/index.js > bundle.js",
"build": "npm run es && npm run browserify",
"watch": "onchange src/js/*.js -- npm run build"
},
"devDependencies": {
"babel-cli": "^6.0.0",
"babel-core": "^6.23.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.22.0",
"browserify": "^14.1.0",
"jquery": "^3.1.1",
"onchange": "^3.2.1"
}
}
.babelrc 内容 事例:
{
"presets": [
"es2015"
],
"plugins": []
}
最后 通过 上文 所阐述的 方法 将其 使用,提高 开发效率 : 用 babel 转译 再 用 browserify 将 js 打包 成 一个 js 文件 ,最终 html 引入 使用 。
前端自动化 shell 脚本命令 与 shell-node 脚本命令 简单使用 之 es6 转译的更多相关文章
- Nodejs随笔(二):像可执行shell脚本一样,运行node 脚本!
在每次编写nodejs脚本的时候,只需在程序的开头加上如下代码(写过shell脚本的人应该很熟悉): #!/usr/local/bin/node 同时,修改文件权限为可执行: mesogene@mes ...
- shell脚本介绍、shell脚本结构和执行、date命令用法、shell脚本中的变量
7月11日任务 20.1 shell脚本介绍20.2 shell脚本结构和执行20.3 date命令用法20.4 shell脚本中的变量 20.1 shell脚本介绍 1.shell脚本语言是linu ...
- Linux centosVMware shell脚本介绍、shell脚本结构和执行、date命令用法、shell脚本中的变量
一. shell脚本介绍 shell是一种脚本语言 aming_linux blog.lishiming.net 可以使用逻辑判断.循环等语法 可以自定义函数 shell是系统命令的集合 shell脚 ...
- Linux常用命令及shell脚本
一. 用户管理(添加用户.切换用户.删除用户) ~ ...
- 如何在java程序中调用linux命令或者shell脚本
转自:http://blog.sina.com.cn/s/blog_6433391301019bpn.html 在java程序中如何调用linux的命令?如何调用shell脚本呢? 这里不得不提到ja ...
- 【Shell脚本学习8】Shell特殊变量:Shell $0, $#, $*, $@, $?, $$和命令行参数
前面已经讲到,变量名只能包含数字.字母和下划线,因为某些包含其他字符的变量有特殊含义,这样的变量被称为特殊变量. 例如,$ 表示当前Shell进程的ID,即pid,看下面的代码: $echo $$ 运 ...
- 自动化部署-从maven到shell脚本到jenkins
Java代码自动部署 [ ①Java代码自动部署-总结简介] 代码部署是每一个软件开发项目组都会有的一个流程,也是从开发环节到发布功能必不可少的环节.对于Java开发者来说,Java代码的发布部署也是 ...
- mysql常用备份命令和shell备份脚本
备份多个数据库可以使用如下命令:mysqldump -uroot -p123456 --databases test1 test2 test3 > /home/test/dump.sql; 恢复 ...
- centos shell编程5 LANMP一键安装脚本 lamp sed lnmp 变量和字符串比较不能用-eq cat > /usr/local/apache2/htdocs/index.php <<EOF重定向 shell的变量和函数命名不能有横杠 平台可以用arch命令,获取是i686还是x86_64 curl 下载 第三十九节课
centos shell编程5 LANMP一键安装脚本 lamp sed lnmp 变量和字符串比较不能用-eq cat > /usr/local/apache2/htdocs/ind ...
随机推荐
- SQL Server如何用SQL实现一批字符串的全部组合
在SQL Server中,如何用SQL去实现得到一批字符串的全部组合呢?这个是同事在实际需求当中遇到的一个问题,他的具体需求如下所示: 传入参数格式为'1,2,3,224,15,6' 'A,BC, ...
- peewee基本操作
本文将简单的介绍Peewee,一览它的主要特点,主要涉及到: 模型定义 存储数据 检索数据 注意:如果你偏爱稍微高级一点的教程, peewee建立类似twitter应用 是一篇结合Flask框架与pe ...
- JavaWeb入门笔记
Java web笔记 一.HTTP协议 HTTP(超文本传输协议),它是一种主流B/S架构中应用的通信协议.具有以下特点: 1.无状态 服务端不会记录客户端每次提交的请求,服务器一旦相应客户端之后,就 ...
- web前端(12)—— 页面布局2
本篇博文,主要就讲定位的问题,也就是页面布局里最重要的,本篇博文不出意外的话,也是css的最后一篇博文了 定位,position属性 定位有三种: 相对定位 绝对定位 固定定位 相对定位,positi ...
- c/c++ 标准库 map multimap元素访问
标准库 map multimap元素访问 一,map,unordered_map下标操作 下标操作种类 功能描述 c[k] 返回关键字为k的元素:如果k不在c中,添加一个关键字为k的元素,并对其初始化 ...
- Linux学习历程——Centos 7 ps命令基础
一.ps命令介绍 ps命令是Process Status的缩写,用于查看系统进程状态,ps命令输出值非常多,通常结合管道符使用. 二.实例 1.我们直接输入ps命令,不加任何参数. 可以看到默认输出4 ...
- python简单的监控脚本-利用socket、psutil阻止远程主机运行特定程序
python简单的监控脚本-利用socket.psutil阻止远程主机运行特定程序 psutil是一个跨平台的库(http://code.google.com/p/psutil/),能够轻松的实现获取 ...
- Tomcat优化配置
1.环境: 系统:Windows.Linux Tomcat版本:9 2.编码与性能调优 server.xml文件: <Connector port="8080" connec ...
- TCP/IP协议族(笔记)
1.HTTP HTTPS DCHP ICMP SMTP IMAP MIME POP PPTP 协议族 tcp/ip 是基于tcp和ip这两个最初的协议之上的不同的通信协议的大集合 TCP/IP不是一 ...
- Vue学习之路5-v-model指令
1. 指令释义 v-model在表单控件或者组件上创建双向绑定,本质上是负责监听用户的输入事件(onchange,onkeyup,onkeydown等,具体是哪个,还请查阅官方底层实现文档)以更新数据 ...