2019亚洲杯有关 npm script 我勾勒了本掘金小册,还放了视频。有关 grunt — 自动化构建工具的奇技淫巧。

好毫无夸张之说,这本小册可能是目前社区中极完全的把 npm script
和前端工作流相结合并采取到实际项目面临的亲笔 + 视频版教程了。

故而想写关于前端自动化工具的文章由以下几只原因:

  1. 自动化构建工具对前端开发的要害:高效、减少重复性操作、各种强大插件的支持。
  1. 构建工具的左手使用有自然之血本,其中为闹好多坑踩,前端在控制html/js/css三剑客的而,还索要了解node.js、npm包管理器、构建工具的安排、语法糖以及插件的运,也只要学会当构建工具的用日趋复杂庞大之时刻怎么优雅中之团队代码,减少在利用工具的当儿起bug的几率。
  2. 行事屡遭遇见有grunt相关的常用实例与奇技淫巧可以将来品玩、解读,有助于重新迅捷直达亲手并定制一模拟强大的自动化工作法。
  3. 同类的构建工具如gulp、webpack(严格意义上它应该是模块管理工具,但它依旧可以做一些构建的工作),甚至是宣称可以摒弃grunt与gulp的npm
    scripts,它们每起各的可取之处,刷新了自身对构建工具的认。而在我看来,与该争论只孰好谁坏,还非若用上一个谈得来道顺手的、更贴合项目要求的工具库。

互联网大潮和前端社区的蓬勃发展让现代前端项目的复杂比 5
年前译了森倍,前端工作流中为油然而生了逾多工程化的环节,比如代码风格检查、自动化测试、自动化构建、自动化部署、服务监控、依赖管理等于。

自动化构建工具 — grunt

事先说下以尚未落地这些工具之前写前端代码的有痛点:

  • “css写得好困难啊,那些可复用的样式能免可知在一个变量或函数里一直调用啊”
  • “样式里还要记得写及配合不同浏览器的前缀,ctrl+C/V手好累”
  • “更改代码后历次都设依照F5来刷新浏览器,如果一旦开展多大装备的调试,每台设备还设手动刷新下,想想都觉得心累~”
  • “代码写了后一旦借工具手动合并、压缩最后还要协调又拷贝到产品目录下,每次宣布还设拓展在还的操作…”
  • “太好了,代码合并后本页面才出一个script标签了,大幅度压缩了要数,但是可引入了其余页面才见面采用到的代码,能无克拆分及其分别要之page
    view里啊…”
  • etc…

痛点实在太多,不胜枚举,小点的类别这么手动折腾下无危害大雅,但是到了大中型的品位仍然这么徒手操作,实在不敢想象。为了吃前者的办事不那么干燥,各路英雄纷纷支招,在node的光环照下,js的构建工具应运而生,逐渐变成前端生态下必不可少的如出一辙圈。自动化的构建工具就使让你当编制前端代码的时光针对反复重复
枯燥无聊的工作 say no。

咱面临什么问题?

绝大多数前端工程师的工作流可能都距离不起头 gulp、grunt、webpack
这样的重量级构建工具,而是否能够运用自如应用这些家伙将再次任务自动化也是工程师素质的重点体现,我我也是这些自动化工具的忠于职守粉丝,因为它们确实会协助自己解决问题。但几乎胡磨难后,你可能早就像我平感受及明确的痛点:比如对准插件依赖严重(开发者的自由度受限),插件与底工具文档脱节,调试变的重复杂等,在及时点达成,我们连无孤,社区都有人对上面的问题作出总结并写了章:Why
I left gulp and grunt for npm
scripts。

虽我要好之亲身经历,我就接手维护了用了 39 只 gulp
插件的品类,因为品种启动于早,部分插件所依靠的基本功工具版本都较一直,当这些插件所因之基础工具升级之后,gulp
插件本身并没创新的那么尽快,我不得不 fork 原仓库去保护内部的版本,而当
gulp 发布了新本子之后,升级插件更是同场艰苦的持久战。

冷清思考下来,上面这种复杂其实并无必要,在软件工程中有个基本点之规范,就是简单性,越是简单的东西越来越可靠,从概率论的角度,任何系统环节更是多稳定性越差。

About Grunt

前扯了那么多聊,赶紧介绍今天底栋梁之材吧。Grunt,(说实话第一眼看到这个单词我竟然想到的是魔兽争霸里我兽族的大G~)
为什么要挑用grunt来作为首选的构建工具为,首先要以个人于熟悉吧,也是为此到之率先单构建框架,其次借用下官方说之引进由:

Grunt生态系统非常庞大,并且直接当增长。由于具备数量大幅度的插件而供应选择,因此,你可以动用Grunt自动就其余事,并且花费最少的代价。如果找不至您所待的插件,那就算融洽动手创造一个Grunt插件,然后用那发布暨npm上吧。
—- from grunt
官网介绍

正确,截止到目前为止grunt的插件多少已经达到5,500多个,拥有了这些插件就是好于有了一如既往管瑞士军刀,正所谓工欲善其事必先利其器,有关grunt的中心安装、配置、注册任务、etc..就无在这多举行牵线,详情可参照官网的飞入门指南,让咱看下插件TOP100里,grunt是哪吃我们的枪炮越来越犀利无比的。

我们该怎么解决问题?

相比而言,直接下 npm 内置的 script
机制就让众多开发者证明是还好的抉择,它能减轻甚至免去上面的痛点:你可一直动用海量的
npm
包来好而的天职、不需在插件文档和基本功工具文档间来回切换,最要害的点,不采用
grunt
之类的构建工具能被你的技术栈相对更简约,而自我在举行技术选择是遵照的着力尺度是简单化,简单才发或容易被别人达到亲手。

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

恐怕发同学会反问,Talk is cheap, show me the data,下面这张图是无比好之证明:

2019亚洲杯 1

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

那么 npm script 为什么没有没有于构建工具被化主流呢?可能大部分口当使用
npm script
需要很强之命行功底、或者它不够强大、或者其不克超越平台。可以充分靠总责之说,社区发展至今,上面的顾虑都是剩下的。

Grunt的着力套装

grunt自家利器:(grunt官方维护的插件)

包名称 说明
contrib-watch 监视文件的变化,可以指定发生变化时执行的任务
contrib-clean 清楚指定目录下的文件
contrib-jshint js语法规范提示,可以将规范写入配置文件,对不符合规范的代码予以提示
contrib-copy 拷贝文件到指定目录
contrib-uglify 压缩指定的js代码
contrib-concat 合并指定的js or css代码
contrib-cssmin 压缩指定的css代码
contrib-less 将less文件编译为css
contrib-htmlmin 压缩指定的html代码
contrib-imagemin 压缩指定的图片

家常必备神器:(常用之老三正值插件,配合官方插件效果更精)

包名称 说明
postcss css预处理工具,可以实现less or scss or stylus的css预处理器效果,也可以借助其强大的auto-prefix插件来为css代码自动添加兼容性浏览器厂商前缀
babel ES6语法转为ES5 js转换器
sync 类似contrib-copy,但只是拷贝那些被更改过的文件
webpack 强大的模块管理工具,其极具特色的loader功能可以让你在js代码里引入几乎任何类型文件
jsdoc 通过写遵循约定好的语法格式的注释而自动生成文档的grunt插件
sails-linker 将css or js(一个或多个)文件自动插入到页面的指定位置
assets-linker 类似sails-linker,但其配置语法更为简洁
browser-sync 一个支持在多个设备间同步测试与调试的轻量版http开发服务器
time-grunt 可以直观的看到每个grunt task的耗时,可以有效的优化构建工具
grunt-cdn 指定cdn路径,为css、js资源添加cdn路径
load-grunt-configs 可以将注册好的各个grunt task拆分到单独的文件里,在tasks数目比较大的时候能更方便组织与管理
load-grunt-tasks 自动将各个task载入到grunt.loadNpmTasks中,节省代码量

争重新快还好之解决问题?

立即为是掘金小册《使用 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。视频目录如下:

2019亚洲杯 2

video-toc.png

grunt全家桶的运用状况

以斯,假得你就控制如何设置grunt、配置package.json文件、使用grunt插件与登记grunt
task等同样层层基本操作,如果还是无太亮要猛戳
官方介绍。紧接上面介绍的十几缓慢常用的grunt插件,我思打种类之简单种植模式(开发和制品)里详细的列出它们的用状况,但在此之前,有必要从一个基础之路例子说起,它的目录架构大体长这么:

├── your project
│   ├── Gruntfile.js
│   ├── package.json
│   ├── grunt
│   │   ├── watch.js
│   │   ├── clean.js
│   │   ├── ...
│   ├── assets
│   │   ├── js
│   │   │   ├── index.js
│   │   │   ├── ...
│   │   ├── less
│   │   │   ├── index.less
│   │   │   ├── ...
│   ├── www
│   │   ├── js
│   │   │   ├── index.js
│   │   │   ├── ...
│   │   ├── css
│   │   │   ├── index.css
│   │   │   ├── ...
│   ├── build
|   |   ├── min
│   │   |   ├── js
│   │   │   |   ├── index.js
│   │   │   |   ├── ...
│   │   |   ├── css
│   │   │   |   ├── index.css
│   │   │   |   ├── ...

内部想特别说明的凡,在官网介绍的 Gruntfile.js 文件被,grunt
独插件的布与task的载入都是看似下面的章程开的:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);

};

旋即间单独是引入了一个职责(uglify)的插件。想象一下,如果发生几十单插件写入,Gruntfile.js
可就没有那好看咯。为了能够单独拆分每个插件到不同文件,分开管理,这里就是得引入
load-grunt-configsload-grunt-tasks
插件,它们各自实现grunt任务拆分及独文件及机动加载包含相应之grunt任务。在它的支援下代码量将大幅度的滑坡,并且大的加强grunt各任务的可维护性。若对比官方的写法,现在的代码可以是相仿这样的雅:

module.exports = fucntion(grunt){
    var options = {
        config : {
            src: "grunt/*.js"
        }
    };

    var configs = require('load-grunt-configs')(grunt, options);
    grunt.initConfig(configs);

    // Load grunt tasks automatically
    require('load-grunt-tasks')(grunt);
}

用分别的grunt任务写到独的js文件里,以 watch task 为条例,像这样:

module.exports.tasks = {
    watch: {
        js: {
            files: [
                'assets/js/**/*.js',
                'routes/**/*.js'
            ],
            tasks: ['copy:dev'],
            options: {
                livereload: true
            }
        },
        less: {
            files: ['assets/styles/**/*.less'],
            tasks: ['less:dev', 'postcss'],
            options: {
                livereload: true
            }
        },
        view: {
            files: ['templates/**/*'],
            options: {
                livereload: true
            }
        }
    }
};

拿这些文件都位于 grunt 目录下,再于 load-grunt-configs 的 options
配置里指定好grunt目录位置,就可轻松实现grunt任务写副单独文件。而经过
load-grunt-tasks,我们仅需要一行代码:

// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);

纵使好取代如下 n 行!

grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('grunt-sizediff');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-styl');
grunt.loadNpmTasks('grunt-php');
grunt.loadNpmTasks('grunt-eslint');
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-bower-requirejs');
...

而其他一个方可以 Gruntfile.js 中相当以的插件 —
time-grunt,它可以非常直观的输出每个grunt
task的耗时以便你可本着有项task做好构建时间的优化,如下所示:

2019亚洲杯 3

Paste_Image.png

切合啊群体?

  • 拥抱 无情的推动自动化 开发理念的工程师,不限前端;
  • 感受及 grunt、gulp 之类工具的笨重和紧,想如果重轻量级的解决方案;
  • 顾念耍转 npm script,不断打磨自己硬技能,提高普通工作效率的同窗;
  • 愿意以自修小册和录制视频使付出的心血而要自己喝杯咖啡(19.9冠)的同学;
当开发模式下行使grunt

支出模式下之grunt任务紧要不外乎源码预编译、代码修饰、代码规范检查、代码tag的自动注入等,这些似乎为你安排了平等拿全能的瑞士军刀般的感受了可解决前提到的众多痛点,结合grunt全家桶,下面一一介绍如何布置好同一拟适用于开发环境下的自动化流程:

首先回到之前的类别目录,可以见到个别发assets、www、build三个饱含了接近文件之目,

  • assets 用于存放项目前端代码的源码
  • www
    里噙了编译、修饰了的、可供应本地调试服务器上的网页直接访问的代码和静态资源
  • build
    则是带有了产品模式下之所有打包了之代码和资源,用于在cdn服务下

用这么划分是为了吃grunt的任务以及分工更为明确,也便宜简单种模式下之自由自在切换与管理。

跻身正题,下面列有底凡同效仿开模式下常用到的天职列表:

[
    'clean',
    'less',
    'postcss',
    'jshint',
    'copy',
    'asset-linker',
    'browserSync',
    'watch'
]

上述任务变为自然语言就是:

  • 第一清空目标目录,确保下次再次实践grunt任务时清空上次任务变的文书,写副一个到底的目录下
  • 将less(css预编译语言,此处为得是scss、stylus)编译成css
  • 修饰编译好的css(例如简化后底css、通过auto-prefix添加过兼容性前缀的css)
  • 检测js代码的规范性,是否出修有误,是否足够规范
  • 拿处理好之代码拷贝到目标目录(例如www、build)
  • 机关添加link、script标签及html或模板文件下
  • 检测指定目录下之文书,如有另外修改,则自动刷新浏览器,修改效果所表现就所得

紧接下去,我们唯有待将立即有些排任务注册到grunt dev这个令下,每个任务按排列的先后顺序依次执行:

grunt.registerTask('dev', [
    'clean:dev',
    'less',
    'postcss',
    'jshint',
    'copy:dev',
    'asset-linker:linkCssDev',
    'asset-linker:linkJsDev',
    'browserSync',
    'watch'
]);

PS:大部分grunt任务都是支持多线程的,即每个grunt任务下可以同时运行多个子任务,也可以单独只运行某个子任务,像'clean:dev',就运行了clean下的dev子任务。因此这里可以根据环境来分为dev与build

以还直观的垂询grunt任务的子任务,举个栗子就吓啊:

module.exports.tasks = {
    clean: {
        dev: ['www'],
        build: ['build-res']
    }
};

流淌:当我们于terminal输入grunt clean常,默认会执行clean下之所有子任务:dev与build

每当面的例子里透过registerTask注册了之职责集群,我们如果在终点输入grunt dev,剩下的从便付给工具自行处理即可

您晤面模仿到啊?

  • 知晓使 npm script 的基本点知识要;
  • 操纵 25 单 npm script 实战技能,章节虽不见,但是每个章节都是缩短的;
  • 取得使用 npm script 和各种小器搞定各种前端工程自动化需求;
  • 获取本人老累积与迭代出来的 npm script 集合,直接用到路被;
当活模式下用grunt

在我看来,产品模式比较开发模式显得更严谨精简。开发模式讲究的凡开发者可以高速的调节以及追踪自己的代码和代码变更发生的所呈现即所得的效果,为底是重复便捷、更便民的完结功能点之付出与测试。而活模式则要求原在开发模式下之代码更不见出现错误、更粗之体积(文件大小)更适应网络传播,不仅如此,产品模式还需考虑到每次宣布版的时段,通过参加代码的版本号,来保证版本更新的平对接,而连贯下,就一步步来介绍如何给grunt为咱处理好就所有:

先奉有一致卖产品模式下之tasks list:

grunt.registerTask('build', [
    'clean:dev',
    'less',
    'postcss',
    'jshint',
    'copy:dev',
    'asset-linker:linkCssDev',
    'asset-linker:linkJsDev',
    'cdn',
    'concat',
    'uglify',
    'cssmin',
    'asset-linker:linkCssProd',
    'asset-linker:linkJsProd',
    'clean:build',
    'copy:build'
    ]);

得窥见立即卖列表基本包括了支出模式下的任务,为是我们可以拿立即片共有的task单独登记及一个叫作compileAssets里:

grunt.registerTask('compileAssets', [
    'clean:dev',
    'less',
    'postcss',
    'jshint',
    'copy:dev',
    'asset-linker:linkCssDev',
    'asset-linker:linkJsDev'
]);

grunt.registerTask('dev', [
    'compileAssets',
    'browserSync',
    'watch'
]);

grunt.registerTask('build', [
    'compileAssets',
    'cdn',
    'concat',
    'uglify',
    'cssmin',
    'asset-linker:linkCssProd',
    'asset-linker:linkJsProd',
    'clean:build',
    'copy:build'
]);

你只要未雨绸缪什么?

  • Node.js
    运行环境,最好是 v8.x 以上版本,建议用
    nvm
    来安装,Windows 下的用户可以使用
    nvm-windows;
  • 得为此来输入和执行命令的极程序,比如 Mac 下的
    iTerm,或者
    Windows 下的 cmd;
  • 2
    小时的空闲时光,读了就仍小册,并会友好左手实践,因为纸上得来算觉浅;
添加版本号

强烈,每个门类被的package.json都发出一个version的字段来表明项目的版本号,而我辈只要召开的就是是管这个版本号添加到有关的任务中:

系任务

  • cdn
  • asset-linker
  • copy

有关添加版本号的位置,我们得拿版本号添加到文件的末尾处,例如index.1.0.0.js,但是仔细想生,发布版时,为了能够担保新老本子的文件可以而且保留到丝达,一定会面世一个文书夹下出众多个带本子号的文书(当您保存的版本号比较多的早晚),这样充分扎眼不便利整理,为夫最神之取舍是管版本号放到根目录下,例如http://your-web-site/1.0.1/index.js,如此一来一个本子就是一个目,既好看而便宜版本管理,想删掉其中一个版本,只要将全体目录除去掉即可。

读者举报如何

脚是至目前为止小册收集到的片段读者反馈,对于每位读者的留言,我都见面认真回复,如果你加以了读者交流群,在群里提到的题材,我吗会全力解答。

2019亚洲杯 4

2019亚洲杯 5

2019亚洲杯 6

gulp 与 npm scripts

本就首文章就想介绍grunt的情节,但既然大家都是自动化构建工具,也尽管只能将及时俩贩卖搬下聊聊。又以前一阵子读到平首《我胡放弃Gulp与Grunt,转投npm
scripts》的译文,可谓很起来眼界,茅塞顿开,醍醐灌顶,心邻神会,如打春风,不明觉厉…
既然还写到及时了就是概括介绍下两者吧

作者简介

我是王仕军,爱折腾、爱享受的前端老司机,实名在网上生活了 5 年有余,6
年以上前端开发经验(实际是 8 年,哈哈),4
年大型互联网企业办事更;掘金专栏作者;熟知(是的,到现在自己还无敢说会)
JavascriptNode.js,对出效率以及软件质量发生极其追求。目标是
Be a Power User of Everything

谢读到此地,希望我写的物对你发因此!

gulp

gulp给自家无比要命之感触就是:

  • 配备代码更精简、更直观
  • 冲node.js的streams流工作方式,使该拍卖任务速度再快

gulp允许你管源文件灌入到管道外,期间可以配备一密密麻麻插件对管道外之文本相继处理,最后输出及目标位置。像是工厂里之流程一样,gulp直接拿上一个流水线任务到位的output作为下一个流水线任务之input,这虽象征相比grunt而言,我们不待以每个grunt任务里指定这个职责的input与output,这样就节约成千上万代码,说再度啰嗦也媲美不过一个裸体的事例摆在您的眼前:

Grunt

sass: {
  dist: {
    options: {
      style: 'expanded'
    },
    files: {
      'dist/assets/css/main.css': 'src/styles/main.scss',
    }
  }
},

autoprefixer: {
  dist: {
    options: {
      browsers: [
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
      ]
    },
    src: 'dist/assets/css/main.css',
    dest: 'dist/assets/css/main.css'
  }
},

grunt.registerTask('styles', ['sass', 'autoprefixer']);

于我们看下同样的部署于Gulp下是怎落实之:

Gulp

gulp.task('sass', function() {
  return sass('src/styles/main.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
});

产生麻痹有雷同栽眼前一亮的发!这着实会让洋洋grunt的老玩家会毅然决定跳到gulp圈里。有关Gulp的布置和入门教程,可以参照这首特别深的入门文章,以上之代码例子吗是援引这篇好文(好学生要注明摘要出处,尊重版权)
Getting started with
gulp

npm scripts

说实话,看罢那篇《我干吗放弃Gulp与Grunt,转投npm
scripts》,给自家尽极端极端像之感想是,就如听到一个大神说,编辑器我只所以Vim,容我拜三产。当然啦,总的来说npm
scripts大法很好特别强大,也需要自然的成本才能够练就,就像文中所说的比方利用npm
scipts可能还待学会一些命令行的吩咐与操作,这重复如是高等玩家游戏的玩耍,一下post出部分文中涉及的该强的处在:

npm scripts本身其实是格外强的。它提供了因约定的pre与post钩子:

{
    name: "npm-scripts-example",
    version: "1.0.0",
    description: "npm scripts example",
    scripts: {
        prebuild: "echo I run before the build script",
        build: "cross-env NODE_ENV=production webpack",
        postbuild: "echo I run after the build script"
    }
}

另外,还足以经过以一个本子中调用另一个底本来对特别之问题展开分解:

{
  "name": "npm-scripts-example",
  "version": "1.0.0",
  "description": "npm scripts example",
  "scripts": {
    "clean": "rimraf ./dist && mkdir dist",
    "prebuild": "npm run clean",
    "build": "cross-env NODE_ENV=production webpack"
  }
}

比方一个命很复杂,那还得调用一个独的文书:

{
  "name": "npm-scripts-example",
  "version": "1.0.0",
  "description": "npm scripts example",
  "scripts": {
    "build": "node build.js"
  }
}

总结

学会以合适的工具来缓解问题一定会是一样桩好快人心的转业,也会受工作换得重复幽默、更富有可玩性。文中涉及的老三栽自动化构建工具基本是前者工程化工作被必要的内需掌握的除js、css、html外的做事技巧。grunt有那个大的插件在私自支持,可以经大量整合来支持更为复杂的构建工作。gulp更合乎小若美,快而精,less
is
more的轨道,github上收获广大的点赞(比grunt多好多!),算是后起之秀。而npm
scripts则退了同等叠不必要之泛,且未需要像grunt和gulp要拄和那个插件作者的保护,直接通过npm的一声令下即可完成大部分构建工作,为自动化构建流程提供了同样栽新的思路,有同样种植返璞归真的意思。所以,具体实在要摘啊一样种植作为工作主打的家伙,还是那么句话,就用而看顺手的百般好哪~

相关文章