gulp 与 maven

2015-01-07

背景

  项目前端使用gulp作为工作流构建系统,一直默默的在背后支撑着文件变动监控,打包压缩,图像优化等一些任务,在开发阶段,它出色的完成自己的使命。可是,项目终归有一天是要上线的,上线之后免不了更新版本,问题就随着而来了。我们项目是用java作为服务器端开发语言,用maven作为包管理工具,在发布版本的时候,打包成war包。以前常规的开发方式,开发中和线上前端资源的是一样的,直接用maven package打成war包就行。我来之后,当然要改变这种局面,线上的资源一定是要经过优化的,所以就引进了gulpsass等一系列提升开发效率的工具,到上线的时候,运行一下npmgulp的命令,就可以构建线上资源。

  问题就出在运行npmgulp的命令,以前开发完从svn拉个版本出来直接运行maven package就打包了,现在要在这个步骤之前要先执行一下npm installgulp build这两个命令。在有些人看来这也许没什么,不就多了二个步骤嘛,但是当构建频繁的时候,手动输入这两个命令也是烦人的嘛,本着DRY的原则,决心要归一。

使用 maven plugins

  在经过一番搜寻之后,发现了exec-maven-plugin,这款插件用来执行一些在命令行里执行的命令。你只需去了解maven的生命周期,在合适的周期执行恰当的命令就行,以下配置是跟我我们项目情况配的,仅供参考。

吐个槽,windows真是让人操进了心。切记exec-maven-plugin版本要用最新版的,不然在windows下会出问题。别问我为什么,我就是因为在自己的mac上整完了以为就行,不顾广大用 windows 而处于水深火热中的同事,等到在他们机器上运行的时候,没反应过来,后来找了好久才发现是版本问题,囧!

<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.3.2</version>
<executions>
  <execution>
    <id>NPM package install</id>
    <phase>prepare-package</phase>
    <goals>
      <goal>exec</goal>
    </goals>
    <configuration>
      <executable>npm</executable>
      <workingDirectory>src/main/webapp/</workingDirectory>
      <arguments>
        <argument>
          install
        </argument>
      </arguments>
    </configuration>
  </execution>
  <execution>
    <id>Gulp task run</id>
    <phase>package</phase>
    <goals>
      <goal>exec</goal>
    </goals>
    <configuration>
      <executable>gulp</executable>
      <workingDirectory>src/main/webapp/</workingDirectory>
      <arguments>
        <argument>
          build
        </argument>
      </arguments>
    </configuration>
  </execution>
</executions>
</plugin>

再奉献一点存货

  因为在执行npm install的时候会把node_moduels都下载到项目目录里来,打war包的时候会把node_modules这个文件夹也包括进来,有时候这个文件夹大得相当客观,要把node_modules排除在外,就要用到另外一款插件maven-war-plugin,看以下配置,注意webappDirectory的写法。

<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>2.5</version>
<configuration>
  <webappDirectory>${project.build.directory}/${project.build.finalName}</webappDirectory>
  <warSourceExcludes>node_modules/</warSourceExcludes>
</configuration>
</plugin>

中文,中英字符两端对齐的方法

在表单布局中经常需要处理字符对齐的情况,本文探索如何实现中文字符,中英混合支付两端对齐的方法 Continue reading

event.target 和 event.currentTarget 的区别

Published on January 20, 2015

sass 中 @include 与 @extend 的区别

Published on January 19, 2015