美文网首页饥人谷技术博客
利用命令行替代自动化构建工具完成工作流

利用命令行替代自动化构建工具完成工作流

作者: _刘小c | 来源:发表于2017-07-04 16:28 被阅读0次

前端工作中经常需要使用一些自动化工具来完成自动化构建,最常见的就是css前缀补充,js/css代码压缩等。

其实仅使用命令行即可完成一些自动化工具如:gulp 常做的事,甚至更简单一些。

CSS自动化

完成CSS自动化,需要使用到postcss-cli和 它的插件 autoprefixer

使用命令行,先安装

npm i autoprefixer postcss-cli

添加前缀

也有在线添加css前缀:https://autoprefixer.github.io/

命令行的话,直接用postcss命令

先安装postcss

npm i postcss

为css添加前缀,并保存到build文件夹内

postcss *.css --use autoprefixer -d build/

代码压缩

代码压缩需要先安装,cssnano

npm i cssnano

在根目录下新建一个postcss.config.js 并配置

module.exports = {
    plugins: [
      require('cssnano')({
        preset:'default',
      }),
    ],
};

然后就可以直接使用将代码压缩

postcss index.css

为了让压缩和前缀同时运行,可以进一步配置postcss.config.js

module.exports = {
    plugins: [
        reqyure('autoprefixer'),
        require('cssnano')({
          preset:'default',
        }),
    ],
};

这样就可以先添加前缀再压缩CSS。

postcss *.css -d build/

JS自动化

JS也可以进行代码压缩

npm i uglify-es      //最新版,es支持es6

然后运行以下指令同样将压缩后的js保存在build目录下

uglifyjs index.js > build/index.js

小结

每次自动化后需要reset(删除)build目录,否则下次运行任务会提示文件已存在。

同时,我们可以将这些命令写入package.json。利用script来最大化办公效率。

{
"scripts": {
    "reset": "rm -rf build/; mkdir build",
    "css": "postcss *.css -d build/",
    "js": "uglifyjs index.js > build/index.js",
    "build": "npm run reset && npm run css && npm run js"
}

这样没事直接使用命令行输入:build 就能自动化构建

图片压缩

使用图片压缩工具,能有效降低图片大小,也可以加入自动化流程中。

首先安装:

npm i imagemin-cli

使用命令将制定文件夹下的图片压缩,并存放至build目录下

imagemin images/* --out-dir=build/images

同样可以将图片压缩写入package.json的script中:

 {
   "scripts": {
      "reset": "rm -rf build/; mkdir build",
      "css": "postcss *.css -d build/",
      "js": "uglifyjs index.js > build/index.js",
      "images": "imagemin images/* --out-dir=build/images",   //添加图片压缩脚本
      "build": "npm run reset && npm run css && npm run js && npm run images"
    }
  }

结论

实际工作中,不但需要压缩 css/js/img ,还需要将文件下的所有引用同步保存至新文件夹,以保证新的build文件夹下的文件均能正常使用,通常需要同步引用的有html/json

所以package.json继续完善如下:

{
  "scripts": {
      "start": "static-server",      //用于开启静态服务器,npm i static-server,本文不涉及
      "reset": "rm -rf build/; mkdir build",   //每次重建将删除原文件夹并新建
      "css": "postcss *.css -d build/",      //添加css前缀并压缩
      "js": "uglifyjs index.js > build/index.js",  //压缩js
      "images": "imagemin images/* --out-dir=build/images",  //压缩img
      "static-files": "cp *.html build/ && cp *.json build/", 
      //拷贝json/html至build保证引用
      "build": "npm run reset && npm run static-files && npm run css && npm run js && npm run images"
      //build执行 运行则全部自动构建
    }
}

至此,不需要依赖第三方工具,仅使用命令行就可以完成工作流任务。

同时提一下,将这些安装包写入package.json的devDependencies中,就可以告知包使用者,进一步简化操作方式。

如:

npm i postcss -D   //-D 可以在安装此包的时候同时写入package.json的devDependencies

最终结果如下:

{
  "devDependencies": {    //指出了此工程的所有依赖
      "autoprefixer": "^7.1.1",
      "cssnano": "^3.10.0",
      "imagemin-cli": "^3.0.0",
      "postcss": "^6.0.5",
      "postcss-cli": "^4.1.0",
      "uglify-es": "^3.0.23"
    },
  "scripts": {
      "start": "static-server",      //用于开启静态服务器,npm i static-server,本文不涉及
      "reset": "rm -rf build/; mkdir build",   //每次重建将删除原文件夹并新建
      "css": "postcss *.css -d build/",      //添加css前缀并压缩
      "js": "uglifyjs index.js > build/index.js",  //压缩js
      "images": "imagemin images/* --out-dir=build/images",  //压缩img
      "static-files": "cp *.html build/ && cp *.json build/", 
      //拷贝json/html至build保证引用
      "build": "npm run reset && npm run static-files && npm run css && npm run js && npm run images"
      //build执行 运行则全部自动构建
    }
}

相关文章

  • 利用命令行替代自动化构建工具完成工作流

    前端工作中经常需要使用一些自动化工具来完成自动化构建,最常见的就是css前缀补充,js/css代码压缩等。其实仅使...

  • gulp vs webpack

    gulp是工具链、构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作 构建工具...

  • 5 gulp自动化构建工具

    Gulp自动化构建工具 ->聚焦点:工作流/流操作 ->gulp.task();/src();/dest();/w...

  • gulp和webpack的区别 // less和scss

    gulp是工具链、构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作1.构建工...

  • 新手Gulp的安装和使用

    1.gulp是什么? Gulp是基于node的一个自动化构建工具,开发者可以使用它构建自动化工作流程(前端集成开发...

  • 新手Gulp的安装和使用

    1.gulp是什么? Gulp是基于node的一个自动化构建工具,开发者可以使用它构建自动化工作流程(前端集成开发...

  • gulp

    gulp——用自动化构建工具增强你的工作流程! ## 当下的前端开发 -不再是简单使用html+css+js构建网...

  • 『前端工程化』gulp(gulp3 && gul

    Gulp 什么是Gulp Gulp是基于Node.js的构建工具,我们使用它来集成前端开发环境,来构建自动化工作流...

  • gulp基础-安装、任务、文件处理

    一、什么是gulp(读音:/ɡʌlp/ ) |--官方解释:前端的自动化构建工具,增强你的工作流程。将开发流程...

  • 2018-12-13 gulp

    gulp https://www.gulpjs.com.cn/用自动化构建工具增强你的工作流程! 1、什么是gul...

网友评论

    本文标题:利用命令行替代自动化构建工具完成工作流

    本文链接:https://www.haomeiwen.com/subject/abdxhxtx.html