几个前端自动化工具（一）bower，grunt，gulp，jspm，karmam，webpack

前端有很多包管理工具，除了常见的webpack外还有bower，grunt，gulp，jspm，karma，这里就走马观花的都测试一遍

1 Bower https://bower.io/

使用方法：

安装bower：npm install bower

使用bower安装包： install jquery --save

维护一个bower.json，格式如下：

{
  "name": "example",
  "version": "0.0.1",
  "dependencies": {
    "jquery": "~2.1.3"
  },
  "private": true
}

2 GRUNT http://gruntjs.com/

安装grunt：npm install -g grunt-cli

使用grunt：直接执行grunt

维护一个gruntfile.js

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.initConfig({
        jshint: {
            files: ['Gruntfile.js', 'src/main/javascript/*.js','src/test/javascript/*.js']
        }
    });
    grunt.registerTask('default', ['jshint']);
};

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/main/javascript/square.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        }
    });

    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // Default task(s).
    grunt.registerTask('default', ['uglify']);

};

这个配置文件会吧square的js打包成一个example.js

grunt有很多task插件，可以参考：http://www.gruntjs.net/plugins

3 GULP https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

安装：tnpm install -g glup

执行方法：gulp

gulpfile的格式

var gulp = require('gulp');

gulp.task('default', function() {
  console.log('gulp runs as expected');
});

表示执行的时候打印一段文字

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('default', function () {
  gulp.src('src/main/javascript/square.js')
      .pipe(uglify())
      .pipe(gulp.dest('build'))
});

表示取打包一个文件

gulp的其他插件列表 http://gulpjs.com/plugins/

4 jspm http://jspm.io/

安装：tnpm install -g jspm

使用jspm安装依赖：jspm install jquery

对应的config文件如下：

System.config({
  defaultJSExtensions: true,
  transpiler: "traceur",
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  map: {
    "jquery": "npm:jquery@3.1.0",
    "traceur": "github:jmcriffey/bower-traceur@0.0.88",
    "traceur-runtime": "github:jmcriffey/bower-traceur-runtime@0.0.88",
    "github:jspm/nodelibs-assert@0.1.0": {
      "assert": "npm:assert@1.4.1"
    },
    "github:jspm/nodelibs-buffer@0.1.0": {
      "buffer": "npm:buffer@3.6.0"
    },
    "github:jspm/nodelibs-process@0.1.2": {
      "process": "npm:process@0.11.5"
    },
    "github:jspm/nodelibs-util@0.1.0": {
      "util": "npm:util@0.10.3"
    },
    "github:jspm/nodelibs-vm@0.1.0": {
      "vm-browserify": "npm:vm-browserify@0.0.4"
    },
    "npm:assert@1.4.1": {
      "assert": "github:jspm/nodelibs-assert@0.1.0",
      "buffer": "github:jspm/nodelibs-buffer@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "util": "npm:util@0.10.3"
    },
    "npm:buffer@3.6.0": {
      "base64-js": "npm:base64-js@0.0.8",
      "child_process": "github:jspm/nodelibs-child_process@0.1.0",
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "ieee754": "npm:ieee754@1.1.6",
      "isarray": "npm:isarray@1.0.0",
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:inherits@2.0.1": {
      "util": "github:jspm/nodelibs-util@0.1.0"
    },
    "npm:jquery@3.1.0": {
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:process@0.11.5": {
      "assert": "github:jspm/nodelibs-assert@0.1.0",
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "vm": "github:jspm/nodelibs-vm@0.1.0"
    },
    "npm:util@0.10.3": {
      "inherits": "npm:inherits@2.0.1",
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:vm-browserify@0.0.4": {
      "indexof": "npm:indexof@0.0.1"
    }
  }
});

5 karma https://github.com/karma-runner/karma

karma可以理解成一个测试工具

安装：tnpm install -g karma-cli

执行方法：karma start src/test/javascript/karma.conf.js

config文件：

module.exports = function(config) {
    config.set({
        basePath: '../../..',
        frameworks: ['jasmine'],
        files: [
            'src/main/javascript/*.js',
            'src/test/javascript/*.js'
        ],
        exclude: ['src/test/javascript/karma.conf*.js'],
        reporters: ['progress'],
        port: 9876,
        logLevel: config.LOG_INFO,
        browsers: ['PhantomJS'],
        singleRun: false,
        autoWatch: true,
        plugins: [
            'karma-jasmine',
            'karma-phantomjs-launcher'
        ]
    });
};

6 webpack https://github.com/webpack

webpack是一个模块资源加载器，其中js，css，img都可以理解为一个一个资源，这些都是用不同loader进行加载的，webpack下不同的loader可以参考 http://webpack.github.io/docs/list-of-loaders.html

比如一个bableloader就可以如下定义

module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel', // 'babel-loader' is also a legal name to reference
      query: {
        presets: ['es2015']
      }
    }
  ]
}

css和图片的加载器

module: {
    loaders: [
      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // inline base64 URLs for <=8k images, direct URLs for the rest
    ]
  }

resolve这个配置用来解析扩展文件中的别名

resolve: {
  alias: {
    'oneui': path.join(__dirname, 'node_modules', '@ali/oneui'),
    'react': path.join(__dirname, 'node_modules', 'react'),
    'components': path.join(__dirname, './src/components'),
    'layouts': path.join(__dirname, './src/layouts'),
    'utils': path.join(__dirname, './src/utils'),
    'views': path.join(__dirname, './src/views'),
    'styles': path.join(__dirname, './src/styles'),
  },
  extensions: ['', '.js', '.jsx', '.scss', '.css', '.json'],
},

可以用以下命令查看webpack的报错信息

webpack --display-error-details

output下这个publicpath可以用来替换cdn，可以在静态页面里直接应用对应的路径，比如<script type="text/javascript" src="/static/vendors.js"></script>

output: {
  path: path.resolve(__dirname, 'build'),
  filename: '[name].js',
  publicPath: '/static/',
},

代码热替换：

这里使用的是webpack-dev-server，所以启动的时候使用webpack-dev-server --hot --quiet 这个命令即可，然后访问呢http://localhost:8080/webpack-dev-server/ 即可获取对应的功能

webpackdevserver的文档可以参考：http://webpack.github.io/docs/webpack-dev-server.html

react的热部署

这里可以使用react-hot-loader这个神器 http://gaearon.github.io/react-hot-loader/getstarted/

配置加载器为：test: /\.jsx?$/, include: [path.resolve(__dirname, 'src/main/webapp'), fs.realpathSync('./node_modules/@ali/oneui')], loaders: ['react-hot', 'babel'],

使用插件：new webpack.HotModuleReplacementPlugin(),

另外还需要更改下入口文件 entry: [ 'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port 'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors './scripts/index' // Your appʼs entry point ]

后台开发如何加载热部署的前台文件

1 更改publicpath为publicPath: 'http://localhost:8080/build/',

2 后端页面引用的脚本如下就能动态加载对应的文件了

<link rel="stylesheet" href="http://localhost:8080/build/style.css"/>
<script src="http://localhost:8080/build/vendors.js"></script>
<script src="http://localhost:8080/build/app.js"></script>

3 发布线上的时候更改参数为--output-public-path /build/

总体的packagejson的发布脚本如下

"mydaily":".\\node_modules\\\\.bin\\webpack-dev-server --config webpack.config.js --hot --inline",
"mybuild":".\\node_modules\\\\.bin\\webpack --config webpack.config.js --output-public-path /build/",
"myclean": ".\\node_modules\\\\.bin\\rimraf  .\\src\\main\\webapp\\build",

文档参考：

http://webpack.github.io/docs/

https://github.com/petehunt/webpack-howto

http://zhaoda.net/webpack-handbook/index.html

来源：oschina

链接：https://my.oschina.net/u/195637/blog/725102

标签

Webpack