还配了摄像

网络大潮和前端社区的旭日初升让今世前端项指标纷纭比 5 年前翻了众多倍,前端专业流中也出现了更加多工程化的环节,比如代码风格检查、自动化测量试验、自动化创设、自动化安顿、服务监察和控制、注重处理等。

6. 变量

通过npm_package_前缀,npm 脚本能够获得package.json里面包车型地铁享有字段。比方,对于地点第2点的package.json,

// view.js

console.log(process.env.npm_package_name); //  npm-scripts-demo ,

console.log(process.env.npm_package_version); // 1.0.0

console.log(process.env.npm_package_scripts_lint); // eslint src/js

运行 npm run viewjs

参考:

干什么选取 npm Scripts 营造项目

npm scripts 使用指南

小编简要介绍

自个儿是王仕军,爱折腾、爱享受的前端老驾车员,实名在英特网生活了 5 年有余,6 年以上前端开垦经验(实际是 8 年,哈哈),4 年重型互连网公司专业经历;掘金队(Denver Nuggets)专栏笔者;熟练(是的,到今天我还不敢说驾驭) JavascriptNode.js,对开采功用和软件品质有极端追求。指标是 Be a Power User of Everything

多谢读到这里,希望本人写的事物对你有用!

4. 处境变量PATH

情况变量($PATH):决定了shell将到怎么目录中查找命令或程序,PATH的值是一多种目录,当运营一个主次时,Linux在这个目录下进行搜索编写翻译链接。通过运营 echo $PATH 查看当前的物色路线。运转npm run env能够列出全部情形变量。

npm 脚本的法规:当实践npm run,就能够自行新建三个 Shell,在那些 Shell 里面实行钦定的台本命令。因而,只假诺 Shell能够运转的通令,就足以写在 npm 脚本里面。

本子试行从前它会将node_modules/.bin/参加到情况变量PATH中,所以在 npm scripts 中得以直接行使那多少个存在于node_modules/.bin/中的可试行文件。试行实现后,再将PATH变量苏醒原样。

可以:

"sass":"node-sass src/style/index.scss src/dest/index.css",

而不用:

"test":"./node_modules/.bin/node-sass src/style/index.scss src/dest/index.css"

运行 npm run sass 来查阅意况变量的扭转。

您会学到什么?

  • 精通使用 npm script 的首要知识要点;
  • 操纵 25 个 npm script 实战技术,章节虽少,可是每一个章节都以减弱的;
  • 获取使用 npm script 和各样小工具消除各类前端工程自动化须求;
  • 得到小编长时间积存和迭代出来的 npm script 集结,直接运用到品种中;

3. 工具

node-sass: 解析scss文件

eslint: 代码检查

uglify:压缩js代码

onchange:监听文件变化

您要希图怎么着?

  • Node.js 运营境况,最棒是 v8.x 以上版本,提出选用 nvm 来安装,Windows 下的客商能够利用 nvm-windows;
  • 能够用来输入和实施命令的终点程序,比方 Mac 下的 iTerm,或者 Windows 下的 cmd;
  • 2 时辰的悠闲时光,读完这本小册,并能自个儿左边手实行,因为纸上得来终觉浅;

5. 钩子

在 npm script 中存在七个钩,pre和post,sass脚本命令的钩正是presass和postsass

"presass": "echo before run sass",

"sass": "node-sass src/style/index.scss src/dest/index.css",

"postsass": "echo after run sass",

npm提供的暗中认可钩子:

prepublish, publish, postpublish:发表模块

preinstall, install, postinstall:安装模块

preuninstall, uninstall, postuninstall:卸载模块

preversion, version, postversion:在利用npm version 修改版本号的时候试行

pretest, test, posttest:执行 npm test 的时候

prestop, stop, poststop:执行 npm stop 的时候

prestart, start, poststart:执行 npm start 的时候

prerestart, restart, postrestart:执行 npm restart 的时候

我们面对怎么着难点?

绝大许多前端程序员的职业流也许都离不开 gulp、grunt、webpack 那样的重量级营造筑工程具,而是或不是能运用自如应用这个工具将再也职分自动化也是程序员素质的基本点展示,小编自个儿也是这一个自动化学工业具的忠贞观者,因为它们确实能帮小编化解难点。但几番横祸之后,你恐怕早就疑似本身一样感受到鲜明的痛点:比方对插件信赖严重(开荒者的自由度受限),插件和底部工具文书档案脱节,调节和测量试验变的更眼花缭乱等,在那一点上,大家并不孤单,社区一度有人对地点的难点作出计算并写了文章:Why I left gulp and grunt for npm scripts。

就作者本人的亲身经历,笔者曾接手维护过使用了 39 个 gulp 插件的种类,因为品种运维较早,部分插件所依附的根底工具版本都相比老,当那几个插件所重视的底子工具进级之后,gulp 插件本身并不曾立异的那么快,小编只能 fork 原旅社去爱戴当中的版本,而当 gulp 宣布了新本子之后,晋级插件更是一场劳累的长久战。

冷清思索下来,上边这种复杂其实并不曾须要,在软件工程里面有个至关重大的原则,正是简单性,越是轻易的事物特别可相信,从可能率论的角度,任何系统环节更多牢固性越差。

小技巧

经过 npm run 来查看全部的 scripts 命令

因此 npm ls --depth 0 列出已安装的 package

透过 npm run env能够列出当前项指标兼具境况变量(通过 env 能够列出系统的具备景况变量)

能够不要夸张的说,那本小册可能是时下社区中最完好的把 npm script 和前端专门的职业流相结合併动用到实在项目中的文字 + 录制版教程了。

在任天由命程度是,你好歹都要使用npm,而同不经常间npm提供了本子功用,所以您在指令行中使用的下令都足以在 npm Scripts 中动用。你能够因而使用npm scripts替代gulp那篇作品来询问npm scripts(相比较gulp那类工具)的补益。

您可以仿造小编的demo来查阅npm-scripts-demo

读者反馈如何

下边是到近年来停止小册搜罗到的局地读者报告,对于每位读者的留言,作者都会认真回复,假设你加了读者调换群,在群里提到的主题素材,小编也会极力解答。

图片 1

图片 2

图片 3

2. package.json配置

{

    "name": "npm-scripts-demo",

    "version": "1.0.0",

    "description": "",

    "main": "index.js",

    "scripts": {

        "presass": "echo before run sass",

        "sass": "node-sass src/style/index.scss src/dest/index.css",

        "postsass": "echo after run sass && echo $PATH",

        "remove" : "rm -rf src/dest",

        "scss": "node-sass --output-style compressed -o src/dist/css src/style",

        "lint": "eslint src/js",

        "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js",

        "view": "echo $npm_package_name",

        "viewjs": "node src/js/view.js"

},

    "devDependencies": {

        "eslint": "^4.12.0",

        "node-sass": "^4.7.2",

        "uglify-js": "^3.2.0"

    },

    "author": "",

    "license": "ISC"

}

笔者们该怎么化解难点?

比较来讲,直接行使 npm 内置的 script 机制已经被十分多开荒者注脚是更加好的取舍,它能减轻乃至撤销上边的痛点:你能够一贯利用海量的 npm 包来成功你的职分、无需在插件文书档案和根基工具文书档案间来回切换,最根本的点,不行使 grunt 之类的构建筑工程具能让您的技艺栈相对更简便易行,而笔者在做工夫选拔是依照的大旨准则是轻便化,轻便才有非常大只怕轻松让别人上手。

动用 npm script 各种基础工具你都得以随手拈来,只要您会利用 npmjs.com 去搜索,或者去 libraries.io 上搜索。

莫不有同学会反问,Talk is cheap, show me the data,上面那张图是最好的表达:

图片 4

更精确的数据是:截止 2017年11月,grunt 插件 6309 个,gulp 插件 3367 个,webpack 插件数量 2174 个,而 npm 包多达 594438 个,并且还在飞速增长

那 npm script 为啥平素不未有在塑造筑工程具中成为主流呢?大概大多数人以为选用npm script 必要很强的授命行功底、或许它非常不够庞大、也许它不能够跨平台。能够很负总责的说,社区腾飞于今,上边包车型地铁担忧都以多余的。

1. npm scripts?

npm scripts 是记录在 package.json 中的 scripts 字段中的一些自定义脚本,使用自定义脚本,客商能够将一部分品种中常用的命令行记录在 package.json中,不供给每回都要敲一回。

{

    // ...

    "scripts": {

        "build": "node build.js"

    }

}

终点运维npm run build 等同于 node build.js

何以更加快更加好的化解问题?

那也是丹佛掘金队(Denver Nuggets)小册《使用 npm script 创设超溜前端工作流》的切入点,作者在那本小册中会用 step-by-step 的方式任课当代前端职业流中的 npm script 用法。即便你是命令行小白,也能轻轻易松跟上,小册会以实际前端项目为底板稳步介绍更加高阶的话题。学完那本小册,你将纯熟使用 npm script 塑造前端工作流要用的各类小工具和技艺。

小册的内容划分为 4 篇:

  • 入门篇:创制和平运动转 npm script,了然和透亮基本套路,分 3 小节;
    • 1.1 创立并运维 npm script 命令
    • 1.2 运营四个 npm script 的各类姿势
    • 1.3 给 npm script 传递参数和增进注释
  • 进级篇:原本 npm script 还足以这么用?分 3 小节,介绍生命周期机制、内置和自定义变量的表明和选取、命令行自动补全等话题;
    • 2.1 使用 npm script 生命周期钩子
    • 2.2 在 npm script 中使用境况变量
    • 2.3 完毕 npm script 命令自动补全
  • 高阶篇:如什么地方理复杂的 npm script?分 3 小节,介绍;
    • 3.1 让 npm script 跨平台宽容
    • 3.2 用 scripty 管理复杂的 npm script
    • 3.3 用 node/shell 脚本代替复杂的 npm script
  • 实战篇:怎么着用 npm script 来帮助前端专门的职业流?分 5 小节;
    • 4.1 监听文件变化并自行运转 npm script
    • 4.2 结合 live-reload 完结活动刷新
    • 4.3 在 git hooks 中运行 npm script
    • 4.4 用 npm script 完成创设流水生产线
    • 4.5 用 npm script 完毕劳务自动化运维

为了方便大家阅读小册时进一步轻巧上手,自身为小册的每种章节都录像了摄像教程(摄像下载地址在小册末尾),想打听本人录制教程风格和质量的同校能够看本身专栏的历史篇章:styled-components、javascript-async-await。录像目录如下:

图片 5

video-toc.png

符合哪些群众体育?

  • 拥抱 无情的推动自动化 开辟思想的技术员,不限前端;
  • 感受到 grunt、gulp 之类工具的笨重和费力,想要更轻量级的缓慢解决方案;
  • 想玩转 npm script,不断打磨自个儿硬本领,升高普通工效的同窗;
  • 甘当因为本身编写小册和录像摄像而付出的心机而请小编喝杯咖啡(19.9元)的同室;

本文由明仕msyz手机版发布于家居装修-蜗牛装饰,转载请注明出处:还配了摄像

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。