JavaScript自动化构建工具入门----grunt、gulp、webpack

蛮荒时代的程序员：

做项目的时候，会有大量的js 大量的css 需要合并压缩，大量时间需要用到合并压缩

在前端开发中会出现很多重复性无意义的劳动

自动化时代的程序员：

希望一切都可以自动完成

安装常用插件、压缩插件、合并插件等。用插件实现功能无限扩展

简单介绍三种工具

grunt 是js任务管理工具（自动化构建工具） -- Grunt官网戳这里

优势：出来早社区成熟插件全

缺点：配置复杂效率低（cpu占用率高）

-------------------------------------------------------------------------

gulp 基于流的自动化构建工具 -- Gulp官网戳这里

优点：配置简单效率高流式工作（一个任务的输出作为另一个任务的输入）优点正好是grunt缺点

缺点：出现晚插件少

-------------------------------------------------------------------------

webpack 模块打包机 -- webpack官网戳这里

优点：模块化

缺点：配置复杂

安装node.js及npm

grunt、gulp、webpack这三种自动化构建工具都依赖node.js环境，所以我们需要先安装node -- node官网戳这里

node.js 不仅是服务器端js运行环境还有大工具包(npm)，前端用npm构建前端的开发环境，为了实现自动化构建及项目管理

node.js 安装教程戳这里或者移步度娘

//查看node版本

node -v

//查看npm版本

npm -v

node.js 包分类:

1.全局包:全局环境下使用，可以在命令行任何目录下使用（-g）在所有项目都用的情况下

2.本地包:本地工程使用的包某个项目需要用

安装全局包cnpm

由于npm提供的包是在国外的服务器上，下载速度不能保证。

所以实际使用中可以使用淘宝提供的，cnpm国内镜像（10分钟更新）,下载速度快。

在网络状态不好的情况下使用cnpm

安装步骤:

//1.关闭npmssl严格认证

npmconfig set strict-ssl false

//2.安装cnpm   -g全局包

npm install -g cnpm --registry-https://registry.npm.taobao.org/

grunt

grunt构建大体步骤：

在你的工程中，安装grunt本地安装 > 创建各种目录 less js min buid > 配置Gruntfile.js,grunt的配置文件 > ok

实际开发中每个工程中 grunt版本不一样，想在所有目录中都能直接执行grunt命令

解决方法：

只全局注册grunt命令CLI（不安装对应的全局包，优势：在任何目录下都可以输入grunt命令，但不会有任何效果）

然后在各个工程下安装本地包

grunt构建具体步骤：

//安装全局grunt命令CLI 在任何目录下都可以使用grunt命令只不过无法执行

//

npm install -g grunt-cli

//创建工程目录

mkdir 目录名

//切换到当前目录

cd  目录名

//初始化工程

npm init

//安装本地grunt安装包

//目的：多个版本可以在电脑上共存

npm install grunt --save-dev

//创建Gruntfile.js文件，用来配置或定义任务（task）并加载Grunt插件

//下面单独说 Gruntfile.js文件 的配置

//安装各种grunt插件    --参考方官

 grunt-contrib-less       less编译

 grunt-contrib-cssmin  css压缩

 grunt-contrib-uglify    js压缩

 grunt-contrib-concat   合并

 grunt-contrib-watch    监控

//执行任务task

grunt

关于Gruntfile.js文件配置：

Gruntfile.js文件配置需要和文件目录相结合，下面是个模板的文件tree ：

│  Gruntfile.js

│  package.json

│

├─node_modules

│

└─src

    ├─concat

    ├─css

    │  └─min

    ├─js

    │  └─min

    └─less

下面是Gruntfile.js文件配置：

module.exports = function(grunt) {

  // Project configuration.

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    less:{

      development:{

        files:[{

          expand:true,

          cwd:'src/less',

          src:['*.less'],

          dest:'src/css',

          ext:'.css'

         }]

       }

      },

      cssmin:{

      options: {

        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'

      },

      static_mappings:{

        files:[

            {

              expand:true,

              cwd:'src/css',

              src:'*.css',

              dest:'src/css/min',

              ext:'.min.css'

            }

        ]

      }

    },

     uglify: {

      options: {

        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'

      },

      static_mappings:{

        files:[

            {

              expand:true,

              cwd:'src/js',

              src:'*.js',

              dest:'src/js/min',

              ext:'.min.js'

            }

        ]

      }

    },

     concat:{

      //压缩合并的 js 和css

      distjs:{

        src:['src/js/min/*.js'],

        dest:'src/concat/all.js'

      },

      distcss:{

        src:['src/css/min/*.css'],

        dest:'src/concat/all.css'

      }

    },

    watch:{

      //监控文件变化并执行相应任务

      files:['src/**/*.*'],

      tasks:['less','cssmin','uglify','concat']

    }

  });

  // 加载包含 "less" 任务的插件,less编译成css。

  grunt.loadNpmTasks('grunt-contrib-less');

  grunt.loadNpmTasks('grunt-contrib-cssmin');

  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['less','cssmin','uglify','concat','watch']);

};

gulp

//创建工程目录

mkdir 目录名

//切换到当前目录

cd  目录名

//初始化工程进行配置文件

npm init

//安装gulp

//注册全局 gulp

  npm install –g gulp

//安装本地gulp

  npm install gulp --save-dev

//创建grunt配置文件gulpfile.js   粘过去

//创建build 和 src原文件（css js less在 js 文件夹内创建min文件）

//安装插件    自带watch

  npm install gulp-less --save-dev

  npm install gulp-concat --save-dev  （js  css都合并）

  npm install gulp-uglify --save-dev

  npm install gulp-minify-css --save-dev

//执行

gulp

webpack

//全局安装webpack

npm install webpack -g

//在项目中安装 webpack

// 初始化 package.json,  根据提示填写 package.json 的相关信息

npm init

// 将 webpack 依赖添加到package.json

npm install webpack --save-dev

//Develop Server 工具 （可选）

npm install webpack-dev-server --save-dev

巴特西

JavaScript自动化构建工具入门----grunt、gulp、webpack

简单介绍三种工具

安装node.js及npm

grunt

gulp

webpack

最新文章

热门文章