浅谈前端自动化构建（摘抄）

青旅半醒 2022-01-05 16:51 274阅读 0赞

## 前言 ##

现在的前端开发已经不再仅仅只是静态网页的开发了，日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂，更加的不易于管理，模块化开发和预处理框架把项目分成若干个小模块，增加了最后发布的困难，没有一个统一的标准，让前端的项目结构千奇百怪。前端自动化构建在整个项目开发中越来越重要。

我们首先来回想一下之前我们是如何来开始做一个项目的。

① 首先要确定这个项目要使用什么样的技术来实现，然后开始规划我们的项目目录，接着就要往项目增加第三方库依赖，比如：

拷贝 CSS库（Yui Reset | bootstrap）JS库（Requiet.js | Seajs | jQuery | jQuery插件 ） 进相应目录（拷贝 N个文件，花费N分钟）

② 然后，进行编码

编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 …………

③ 编码完成，进行语法检查，文件合并和压缩

1.  HTML去掉注析、换行符 - HtmlMin
2.  CSS文件压缩合并 – CssMinify
3.  JS代码风格检查 – JsHint
4.  JS代码压缩 – Uglyfy
5.  image压缩 - imagemin

整个过程都在重复无用繁琐的工具...

渐渐的，一些自动化构建工具出现了，人们开始使用例如Bower、Gulp、Grunt、node、yeoman等等工具来构建一个本地的开发环境。自动化构建已经成了前端开发的趋势，所以学好自动化构建也就是为自己的开发打下了良好的基础。

## ![1073915-20170223212624304-1530963910.png][] ##

## 1.[Grunt][] ##

前端自动化小工具，基于任务的命令行构建工具

**开始使用Grunt**

通过阅读官方文档可以知道更多详细内容，下面只是总结一下，自己使用Grunt的一个实例，便于日后使用，可以按照这个套路进行~

### 安装 grunt-cli ###

1.  1. 自备node环境(>0.8.0), npm包管理
2.  2. 卸载旧版本grunt（<0.4.0） (没装过请忽略)
    
        npm uninstall grunt -g
3.  安装grunt-cli
    
        npm install grunt-cli -g

**开始使用Grunt构建项目**

一般需要在你的项目中添加两份文件：`package.json` 和 `Gruntfile`。

然后，写好下面的gruntfile.js文件的格式

![复制代码][copycode.gif]

module.exports = function(grunt) {
    　　// 项目配置.
    　　grunt.initConfig({
    　　　　// 定义Grunt任务
     　});
    
     　// 加载能够提供"uglify"任务的插件。
    　　grunt.loadNpmTasks('grunt插件'); 
    
    　　// Default task(s).
    　　grunt.registerTask('default', ['任务名']); 
    }

![复制代码][copycode.gif]

下面是我的一个 gruntfile.js文件

![复制代码][copycode.gif]

1 module.exports = function (grunt) {
     2   grunt.initConfig({
     3     watch: {
     4       ejs: {
     5         files: ['views/**'],
     6         options: {
     7           livereload: true,
     8         },
     9       },
    10       js: {
    11         files: ['public/js/**', 'models/**/*.js', 'schemas/**/*.js'],
    12         options: {
    13           livereload: true, //文件更新时重新启动服务
    14         },
    15       },
    16     },
    17     nodemon: {
    18       dev: {
    19         file: './bin/www' //根据自己的实际修改
    20       }
    21     },
    22     concurrent: { // 同时执行nodemon和watch任务
    23       target: {
    24         tasks: ['nodemon', 'watch'],
    25         options: {
    26           logConcurrentOutput: true
    27         }
    28       }
    29     }
    30   });
    31 
    32   // 加载包含 “watch","concurrent","nodemon"任务的插件
    33   grunt.loadNpmTasks('grunt-contrib-watch')
    34   grunt.loadNpmTasks('grunt-concurrent')
    35   grunt.loadNpmTasks('grunt-nodemon');
    36 
    37   grunt.option('force', true)
    38  // 默认执行的任务列表
    39   grunt.registerTask('default', ['concurrent'])
    40 }

![复制代码][copycode.gif]

最后，执行命令

1.  将命令行的当前目录转到项目的根目录下。
2.  执行 npm install 命令安装项目依赖的库。
3.  执行  grunt 命令。

**小结** Grunt的基本使用也就如上所示，比较简单，更多可以参考Grunt的插件库，比如 contrib-jshint js代码检查等插件的使用

**2 . [Gulp ][Gulp]**

**　**　 gulp是基于Nodejs的自动任务运行器，它能自动化地完成javascript/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

使用Gulp的优势就是利用流的方式进行文件的处理，使用管道（pipe）思想，前一级的输出，直接变成后一级的输入，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。Gulp去除了中间文件，只将最后的输出写入磁盘，整个过程因此变得更快。

使用Gulp,可以避免浏览器缓存机制，性能优化（文件合并，减少http请求；文件压缩）以及效率提升（自动添加CSS3前缀；代码分析检查）

![1073915-20170223222557991-442961736.png][]

**gulp的安装及基本使用**

**　　　　1. 全局安装 gulp：**

$ npm install --global gulp

#### 　　　　2. 作为项目的开发依赖（devDependencies）安装： ####

$ npm install --save-dev gulp

#### 　　　　3. 在项目根目录下创建一个名为 `gulpfile.js` 的文件： ####

var gulp = require('gulp');
    
    gulp.task('default', function() {
      // 将你的默认的任务代码放在这
    });

#### 　　　　4. 运行 gulp： ####

$ gulp

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

**gulp的插件使用**

同Grunt一般，gulp也有插件库，具体有兴趣开发gulp插件的，可以看看 [http://www.gulpjs.com.cn/docs/writing-a-plugin/][http_www.gulpjs.com.cn_docs_writing-a-plugin]

下面是我的一个 gulpfile.js文件，就此进行分析

![复制代码][copycode.gif]

'use strict'
    
    const gulp = require('gulp')； //将gulp插件包含进来 
    
    //在文件改动时候运行 mocha 测试用例
    const mocha = require('gulp-mocha'),
      gutil = require('gulp-util'),
      jshint = require('gulp-jshint'), //js代码校验
      uglify = require('gulp-uglify'), //压缩 js文件
      minifyCSS = require('gulp-minify-css'),//压缩css
      concat = require('gulp-concat'), //合并文件
      notify = require('gulp-notify'),
      cache = require('gulp-cache'),
      rename = require('gulp-rename'), //重命名文件 
      livereload = require('gulp-livereload'),
      imagemin = require('gulp-imagemin');//优化图片;
    
    
    const srcPath = {
      script: './src/scripts/',
      style: './src/styles/',
      tempalte: './src/tempaltes/'
    };
    
    const destPath = {
      style: './dist/styles/',
      script: './dist/scripts/',
      base: './dist/'
    };
    
    // ==========================
    // 获取目录src/test/../的js文件进行代码检验，然后和main.js合并，进行压缩，最后复制到dist/scripts目录下。
    // ==========================
    function packjs() {
      return gulp.src(srcPath.script)
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('dist/scripts'))
        .pipe(rename({
          suffix: '.min'
        }))
        .pipe(uglify())) //仅在生产环境时候进行压缩
        .pipe(gulp.dest(destPath.script))
        .pipe(notify({
          message: 'Scripts task complete'
        }));
    }
    
    
    gulp.task('js', () => packjs());

![复制代码][copycode.gif]

命令行执行

$ gulp js

更多内容 查看 gulp 官方文档api

**3 . [webpack][]**

Webpack是一个模块打包的工具，它的作用是把互相依赖的模块处理成静态资源。

**webpack 的安装及基本使用**

**　　　　1. 全局安装 webpack ：**

$ npm install webpack -g

#### 　　　　2. 作为项目的开发依赖（devDependencies）安装： ####

$ npm install --save-dev webpack

#### 　　　　3. 创建一个名为 webpack.config.js 的配置文件： ####

![复制代码][copycode.gif]

module.exports = {
    　　　// 入口文件
            entry : "./entry.js",
            // 打包输出文件
            output : {
                path : __dirname,
                filename : "bundle.js"
            }
    };

![复制代码][copycode.gif]

命令行执行 如下命令，即可将 **`./main.js`**作为入口打包**`bundle.js`**:

$ webpack

**webpack的进阶使用 之 加载器**

![复制代码][copycode.gif]

module.exports = {
    　　　　　// 入口文件
            entry : "./entry.js",
            // 打包输出文件
            output : {
                path : __dirname,
                filename : "bundle.js"
            },
            module : {
                loaders :［
                    {test : /\.css$/,loader:"style!css"}，
                     {test: /\.js$/,loader: 'babel',
    　　　　　　　　　　　　　　　　　　　　include: [path.join(projectRoot, 'src')],
    　　　　　　　　　　　　　　　　　　　　exclude: /node_modules/}］
            }
        };

![复制代码][copycode.gif]

这个例子使用 **加载器** ，何谓加载器?加载器是对你的应用的源文件进行转换的工具。

不同类型的文件有不同的加载器，比如jsx,es6要用到babel-loader,

加载css要用到css-loader,加载html要用到html-loader，以及 vue-loader，css-loader 等等.

所有的loader都放在module下面的loaders里边.通常有以下内容：

1.  test:是对该类文件的正则表达式，用来判断采用这个loader的条件
2.  exclude是排除的目录,比如node\_modules中的文件，通常都是编译好的js，可以直接加载，因此为了优化打包速度，可以排除。作为优化手段它不是必须的
3.  loader: 加载器的名称，每一个加载器都有属于它自己的用法，具体要参考官方说明
4.  query: 传递给加载器的附加参数或配置信息，有些也可以通过在根目录下生成特殊的文件来单独配置，比如.babelrc

**　** 以上只是稍微讲了webpack的基础使用，更多使用方法 可以查看官方文档

**小结**

**　　**前端工程自动化方案更新很快， 学习这些工具，是为了减轻重复劳动，提高效率。选择适合自己的方案，而不是在追寻技术的路上迷失了方向。

附：大佬原文地址[https://www.cnblogs.com/kasmine/p/6436131.html][https_www.cnblogs.com_kasmine_p_6436131.html]。

转载于:https://www.cnblogs.com/ruoyaozhan/p/10859336.html

[1073915-20170223212624304-1530963910.png]: /images/20211228/60d76a10223642c4bd94b36b438cf342.png
[Grunt]: http://www.gruntjs.net/
[copycode.gif]: /images/20211228/f33358ba002545649f6cf61c98b9542b.png
[Gulp]: http://www.gulpjs.com.cn/
[1073915-20170223222557991-442961736.png]: /images/20211228/5ae767cb279b4a1fa3e91acc02a1edcb.png
[http_www.gulpjs.com.cn_docs_writing-a-plugin]: http://www.gulpjs.com.cn/docs/writing-a-plugin/
[webpack]: https://chenyiqiao.gitbooks.io/webpack/content/
[https_www.cnblogs.com_kasmine_p_6436131.html]: https://www.cnblogs.com/kasmine/p/6436131.html