This article explores extending Jenkins' capabilities to analyze frontend assets (CSS and JavaScript) within PHP projects. Previous articles covered Jenkins setup and initial build analysis.

Key Takeaways:

• Jenkins leverages plugins like CSSLint and JSHint to analyze CSS and JavaScript, respectively. These plugins, installed on the Jenkins server, examine code for violations, visualized in a violations graph.
• Integrating CSSLint and JSHint requires modifying the project's build.xml (adding targets) and configuring Jenkins to recognize the generated reports. Detailed violation information is accessible via a dedicated violations page.
• The Task Scanner plugin identifies open tasks (e.g., TODO comments) within the codebase. Configurable for specific directories, files, and task priority levels, results are shown on the project view and an "open tasks" section.
• Jenkins acts as an orchestrator, combining reports from various tools to provide comprehensive project insights. Its extensive plugin ecosystem supports diverse needs, including SCSS linting and non-PHP projects (Android, iOS).

CSSLint Integration:

To analyze CSS, CSSLint is employed. After installing via sudo npm install -g csslint, the build.xml is updated with a new target:

<target name="csslint" description="Run the CSSLint tool on CSS files">
  <fileset dir="${basedir}/src" id="cssfiles.raw">
    <include name="**/*.css"/>
  </fileset>
  <pathconvert pathsep=" " property="cssfiles.clean" refid="cssfiles.raw"/>
  <exec executable="csslint" output="${basedir}/build/logs/csslint.xml">
    <arg line="--warnings=box-model,floats --errors=ids,important --format=lint-xml ${cssfiles.clean}"/>
  </exec>
</target>

This target is then added as a dependency to the main build target. Jenkins' project configuration ("Configure" -> "Report violations") requires adding the csslint.xml report file. The severity levels (sun, cloudy, stormy) are configurable to reflect the number of violations. The violations graph and details page provide visual summaries and specific issue locations.

JavaScript (JSHint) Validation:

JSHint (a more actively maintained fork of JSLint) validates JavaScript code. Install with sudo npm install -g jshint. A similar jshint target is added to build.xml, using the jslint reporter:

<target name="jshint" description="Run the JSHint tool on JavaScript files">
  <fileset dir="${basedir}/src" id="jsfiles.raw">
    <include name="**/*.js"/>
  </fileset>
  <pathconvert pathsep=" " property="jsfiles.clean" refid="jsfiles.raw"/>
  <exec executable="jshint" output="${basedir}/build/logs/jshint.xml">
    <arg line="--reporter=jslint ${jsfiles.clean}"/>
  </exec>
</target>

Jenkins configuration is updated similarly to CSSLint, pointing to the jshint.xml report. Results are displayed in the violations graph and details page.

Open Task Tracking (Task Scanner Plugin):

The Task Scanner plugin helps manage outstanding tasks marked in the code (e.g., TODO, FIXME). After installation, configure it within Jenkins' project settings ("Configure" -> "Add post-build action" -> "Scan workspace for open tasks"). Specify directories, files, priority keywords, and case sensitivity. Results are shown in a graph and a dedicated "open tasks" section.

Conclusion:

Jenkins' power stems from its ability to integrate various tools. This article showcases only a fraction of its capabilities, highlighting its adaptability and extensibility through plugins. The possibilities extend far beyond the tools discussed here.

(The Frequently Asked Questions section is omitted for brevity, as it's largely unrelated to the core topic of frontend asset analysis within the context of the provided text.)

The above is the detailed content of More Useful Jenkins Plugins for PHP Projects. For more information, please follow other related articles on the PHP Chinese website!