Gulp は必要ないかもしれません、Grunt ?_html/css_WEB-ITnose

私はプロジェクトで npm スクリプトを 6 か月間使用してきました。私は以前から Gulp と Grunt を使用しており、タスクをより効率的にし、多くの面倒なタスクを自動的に処理してくれるのでとても役に立ちました。 しかし、自分のコードではなく、ツールと戦っているように感じるようになりました。

Grunt、Gulp、Broccoli、Brunch およびその他のツールでは、タスクがルールに準拠する必要があり、各ツールを理解するには時間がかかります。コードの複雑さが増すと、これらのツールの処理により多くのエネルギーを費やす必要があります。

これらのビルド ツールが依存するプラグインは、コマンド ライン ツールのレイヤーでラップされており、コア ツールの外側に抽象化レイヤーが追加されています。これは、隠れた危険がある可能性があることも意味します。

私は次の 3 つの問題に何度も遭遇しました

• 必要なプラグインがこのツールで利用できない場合は、非常に不運です (自分でプラグインを作成しない限り)
• 使用しようとしているプラ​​グイン必要なプラグインをラップします。別のツールの古いバージョンを使用すると、機能とドキュメントに一貫性がなくなります。
• エラーは常に適切に処理されるわけではありません。プラグインが間違っている場合、エラーがスローされない可能性があり、デバッグ方法がわからないため、非常に苦労することになります。

しかし、覚えておいてください

私が言いたいのは、現在使用しているビルド ツールに非常に満足しており、望むものを提供できるのであれば、そのまま使用し続けることができます。 npm スクリプトの重要性がますます高まっているからといって、すぐに変える必要があるわけではありません。ツールを学ぶのではなく、プログラムを書くことに重点を置きます。あなたもツールと格闘していると感じているのであれば、npm スクリプトを使ってみることをお勧めします

本当に npm スクリプトを使い始めたい場合は、読み続けてください。多くの例が表示されます。出発点として npm-build-boilerplate を構築しました。はじめましょう！

npm スクリプトを書いています

私たちは全員 package.json ファイルに多くの時間を費やしました。依存関係とスクリプトはすべてここにあります。これは私のボイラープレート プロジェクトの package.json の合理化されたバージョンです

rree

私たちのスクリプトは script の下に記述され、devDependency にはプロジェクトの依存関係が保存されます。始める前に、このプロジェクトの構造を見ていきたいと思います。

プロジェクトの構造

SCSS => CSS

私は SCSS の大ファンなので、SCSS を紹介するのが待ちきれませんあなたへ。このタスクを実行するには、node-sass を使用します。

{  "name": "npm-build-boilerplate",  "version": "1.0.0",  "scripts": {    ...  },  "devDependencies": {    ...  }}

上記のコマンドを使用して、node-sass をインストールすると、package.json の devDependency に表示されるので、他の人がそれを実行したい場合に便利です。コーディングするのがはるかに便利になります。インストールが完了したら、それを使用してみましょう:

npm install --save-dev node-sass

このコマンド行は次のことを行います。 CSS を作成し、それを dist/css の下に置きます。ちなみに、私のために圧縮してください

しかし、偉いリーダーは通常、スクリプトに「それを実行してください」と指示します。リーダーは次のスローガンを叫ぶだけで済みます:

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

このようにして、大きなリーダー (あなた) は Sass をコンパイルするタスクを完了しました (冗談です)。

次の部分では、上記のように npm スクリプトをいつでも作成できます

scss をコマンドに置き換えるだけです。

ご覧のとおり、多くのコマンド ライン ツールでは、多数のオプションから選択する必要があります。たとえば、以下は、node-sass オプションの構成です:

"scripts": {  "scss": "node-sass --output-style compressed -o dist/css src/scss"}

Autoprefix CSS with PostCSS

ここで、Autoprefixer と PostCSS を使用してプレフィックスを自動的に追加し、複数のモジュールをインストールできます。同時に:

npm run scss

PostCSS はデフォルトでは何もせず、Autoprefixer などのプラグインに依存しているため、2 つのモジュールをインストールしました。

ここで、両方のツールを devDependency に追加し、スクリプト オブジェクトに別のタスクを追加します。

"scripts": {  "scss": "node-sass --output-style nested --indent-type tab --indent-width 4 -o dist/css src/scss"}

このタスクでは、postcss では autoprefixer を使用して、すべての CSS を dist/css/* の下に置くことができます。ファイルは次のとおりです。

npm install --save-dev postcss-cli autoprefixer

同様に、postcss-cli、autoprefixer にも多くのオプションがあります

JavaScript のリンティング

適切なプログラミング スタイルと標準を維持することが保証されますLint は、eslint を使用できるかどうかを自動的にチェックするのに役立ちます

もう一度、今回はショートカットを使用してパッケージをインストールします:

"scripts": {  ...  "autoprefixer": "postcss -u autoprefixer -r dist/css/*"}

以下と同じ

"autoprefixer": "postcss -u autoprefixer --autoprefixer.browsers '> 5%, ie 9' -r dist/css/*"

安装完，我们使用 eslint 设置一些执行我们代码的基本规则，执行下面代码进入指引：

eslint --init

我建议你选择”Answer questions about your style” 并且回答它问的问题，这会生成一个新的文件在你的项目根部。

再次丰富 scripts 对象：

"scripts": {  ...  "lint": "eslint src/js"}

这13个字符的命令会查找在 src/js 下的所有js文件，并根据配置重新执行一遍。另外你会被 这些配置逼疯的。

Uglifying JavaScript files

接下来是合并压缩 JavaScript文件，我们选择 uglify-js来做：

npm i -D uglify-js

然后再次配置 package.json :

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

值得一提的是 npm scripts 本质上是命令行的别名，这意味着你可以在 scripts 中使用标准命令行代码，这里用到了 mkdir 和 &&

前半部分， mkdir -p dist/js的意思是如果（-p）不存在这样的目录结构，则创建一个新的执行成功之后（&&） 再执行后半部分 uglifyjs src/js/*.js -m -o dist/js/app.js"这部分是告诉 uglifyjs 使用 “mangle” (-m) 命令，应用在 src/js的所有js 上，并产出到 dist/js/app.js。

让我们再丰富下 uglify , 创建一个 compress 版本的 dist/js/app.js（使用 -c ）

"scripts": {  ...  "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js && uglifyjs src/js/*.js -m -c -o dist/js/app.min.js"}

Compressing Images

接下来看看压缩图片。根据 httparchive.org, 前1000 个热门网站的页面大小是 1.9mb ,而其中图片就占了 1.1mb ,所以页面提速的首要因素是压缩图片体积。

安装 imagemin-cli

npm i -D imagemin-cli

Imagemin 几乎可以压缩所有类型的图片，包括 GIF，JPG，SVG。你可以传递一个文件夹路径，然后它会处理其中的所有图片：

"scripts": {  ...  "imagemin": "imagemin src/images dist/images -p",}

这个任务是压缩所有在 src/images下的图片，并把结果输出到 dist/images。-p 的意思是 尽量创建 “progressive” 的图片。

SVG Sprites

近几年 SVG 越来越受欢迎，因为它几乎兼容所有设备，可以用 CSS 调整，视觉效果良好。然而很多 SVG 编辑器会残留多余和不必要的代码。我们使用 svgo来移除。

你可以把压缩 SVG 和拼接精灵图放在一块，拼接精灵图我们使用 svg-sprite-generator

npm i -D svgo svg-sprite-generator

现在你应该很熟悉这种模式了吧。

"scripts": {  ...  "icons": "svgo -f src/images/icons && mkdir -p dist/images && svg-sprite-generate -d src/images/icons -o dist/images/icons.svg"}

icons 这个任务做了三件事，传递了一个文件夹路径（-f）给 svgo， 然后如果没有(-p) dist/images这个文件夹则创建一个，接着就拼接精灵图，结果保存到（-d） src/images/icons， 产出(-o)叫做 dist/images/icons.svg

Serve and Automatically Inject Changes with BrowserSync

最后一个问题是 BrowserSync，他可以帮我们做的是：开启一个本地服务器，自动更新文件，自动在浏览器中同步点击，滚动效果。

npm i -D browser-sync

"scripts": {  ...  "serve": "browser-sync start --server --files 'dist/css/*.css, dist/js/*.js'"}

这个任务打开一个本地服务（—server），以当前路径作为根目录，—files 参数告诉 Browsersync 监听 dist下的所有css 和 js文件，一有更新，马上自动刷新页面。

Grouping tasks

有了上面的代码，我们现在能够：

• 编译 SCSS 并且自动添加前缀
• 检查并压缩 JavaScript
• 压缩图片
• 将一个 SVG 文件夹转成一张 SVG 精灵图
• 创建一个本地服务器，并实时自动刷新浏览器

Combining CSS tasks

我们可以把 CSS 相关的任务合并在一起：

"scripts": {  ...  "build:css": "npm run scss && npm run autoprefixer"}

当你执行 npm run build:css ，它会在执行 scss 任务成功之后在执行 autoprefixer 。其他任务也类似，我们也可以这样做

"scripts": {  ...  "build:js": "npm run lint && npm run uglify",  "build:images": "npm run imagemin && npm run icons",  "build:all": "npm run build:css && npm run build:js && npm run build:images"}

Watching for changes

我们现在还需要监听文件的变动，并自动执行相应的任务，我推荐使用 onchange，安装：

npm i -D onchange

添加任务：

"scripts": {  ...  "watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",  "watch:js": "onchange 'src/js/*.js' -- npm run build:js",}

任务是给 onchange 传递一个需要监听的文件路径，我们需要 onchange 自动执行的命令则放在 — 后面。

Let’s add one more watch command to finish off our npm scripts build process.

安装多一个 package， parallelshell

npm i -D parallelshell

再一次，添加新的任务到 scripts 对象上：

"scripts": {  ...  "watch:all": "parallelshell 'npm run serve' 'npm run watch:css' 'npm run watch:js'"}

parallelshell 允许我们同时执行多个任务，为什么不使用 && 呢?

因为 && 的执行顺序必须是前面的执行完了才轮到后面的任务，但是 watch 类型的任务永远不会完成啊~

现在 watch:all 任务开启服务器，并监听代码，一旦有变动，马上刷新浏览器 perfect!

Other useful tasks

npm 有很多 其他任务。我们再写一个总的启动任务：

"scripts": {  ...  "postinstall": "npm run watch:all"}

npm install 之后就执行一下 postinstall 吧，这在团队开发中是很好的体验，克隆你代码的人执行 npm install 然后 马上 watch: all

Wrap Up

噢，我们做到了（终于翻译完了，好长的文章。。。），希望看完这篇文章你能学会使用 npm scripts

对了，我把代码都放在 npm-build-boilerplate上了，欢迎交流。

译者的废话

最近看到关于 npm scripts 的字眼比较多，然后就找了篇文章翻译。

• 使用gulp生成sprites图片和样式表
• Gulp新手入门教程
• 我为何放弃Gulp与Grunt，转投npm scripts（上）