Gulp automatically build Web front-end programs

This two days a friend on the project encountered a problem, in the operation process, the user in the browser on a form for data submission, the need to introduce new platform interface data business, through the evaluation, the development team immediately modified the relevant background code and part of the front-end script code, through simple testing and quickly online. When it is on-line, the functionality of the client does not change and the state of the performance before the change is the same. Encountered such a problem, the development team was a bit confused, obviously modified the function and deployed but did not let the user use the function, do not know how to start.

Have a certain front-end development experience of friends should know that this is the browser cache Web resources caused by the problem, in response to such practical problems, the project should have its own coping methods. Similar to this demand, also spawned a lot of excellent solutions and excellent front-end building technology framework, compare grunt and gulp.

Technical framework for the front-end technology, many online friends to share their valuable experience and detailed sharing of the summary, such as the Http://www.cnblogs.com/cnblogsfans/p/5093012.html series of articles.

Here is my personal process record for Gulp learning and application, including environment building (Win7 operating system) and preliminary use.

1, install node. js

2. Prepare project files

Create a folder and add the following two script files to the scripts file

3, install Gulp

Navigate to the project file root in cmd and run "NPM Install--save-dev Gulp"

4, install the Gulp-concat plugin that can merge script files in Gulp

Run "NPM install--save-dev gulp-concat" at the CMD project root location

5, add a name to the project root directory named Gulpfile.js, which functions like the makefile file in Docker.

var gulp = require ("Gulp"), var concat = require ("Gulp-concat"), Gulp.task (' Default ', function () {Console.log ('--------- Begin Building----------'), gulp.src (' scripts/*.js '). Pipe (Concat (' allmodule.js ')). Pipe (Gulp.dest (' builded '));
Console.log ('---------End building----------');});

6, Build results

The build result of combining files Moudle1.js and module2.js content in a single file.

Gulp on the plug-in has all kinds of file compression, code inspection, less and sass compilation, etc., can meet the general front-end software development, debugging, construction, deployment and other functional needs.

Summarize

If the development team has the DevOps support Automation platform tools (such as Docker, TFS, Jira, Jenkins and other integrated platform tools) and thinking mode, you can effectively integrate the automation of the front-end in the software development, testing, release and operation of the process, Further enhance the automation capabilities of the team's software processes to improve team efficiency, innovation and productivity.

Gulp automatically build Web front-end programs