zoukankan      html  css  js  c++  java
  • 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") %> */
    '
          },
          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") %> */
    '
          },
          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
  • 相关阅读:
    day_01 python基础 基本数据类型 if条件
    计算多边形周长和面积
    我研究出来的属性查询,贴自己的代码,请大家指教
    配置sde
    如何编辑SDE数据库(转载)
    ArcSED连接方式
    不同窗体传递数据
    sde stuff
    ArcSED
    不显示查询问题的解决(太完美了,新建一个图层,表示查询结果)
  • 原文地址:https://www.cnblogs.com/weven/p/7544606.html
Copyright © 2011-2022 走看看