Idea Edit Configuration Run!

First of all, the focus of this article is: How to integrate the environment through IntelliJ idea, start the front-end program, like starting a background program, just click on it can run.

First, click on the "Web" as shown above (here is a running name for me, originally "Edit Configurations"), click "Edit Configurations"

The pop-up window is as follows:

If there is no "defaults", you can point to the same.

Second, choose "Gulp.js", the prerequisite is to install GULP, instructions are:

NPM Install--G Gulp Global Installation

NPM Install Gulp Project installation

Gulp--run Boot Command

Right appears

Third, name: whatever name

Gulpfile: The location of the Gulpfile.js in the project

Tasks: no need to fill

Arguments:--run

The following dongdong will come out of their own, do not care.

Four, the point is OK.

Five, certain friends will ask me how Gulp--run came:

1, Package.json:

{"Name": "Geneapps", "Version": "1.0.0", "description": "Geneapps-cloud Computing Platform", "scripts": {" Build ":" Gulp--build "," Dev ":" Gulp--run "}," dependencies ": {" angular ":" ^1.5.8 "," Angular-resource ":
    "~1.5.0", "angular-sanitize": "^1.5.9", "Angular-ui-bootstrap": "^2.3.0", "Angular-ui-router": "~0.2.15", "Animate.css": "^3.5.2", "Bluebird": "^3.4.6", "Bootstrap": "^3.3.7", "Bootstrap-datepicker": "^1.6.4", "b  Ootstrap-sass ":" ^3.3.7 "," Es5-shim ":" ^4.5.9 "," Font-awesome ":" ^4.7.0 "," Html5shiv ":" ^3.7.3 "," jquery ":
    "~1.11.3", "Jquery-slimscroll": "^1.3.8", "Json3": "^3.3.2", "Lodash": "^4.16.2", "moment": "^2.10.0",
    "Simple-line-icons": "^2.4.1"}, "Devdependencies": {"Node-sass": "^3.13.0", "Browser-sync": "^2.16.0", "Extract-text-webpack-plugin": "^1.0.1", "Gulp": "^3.9.1", "Gulp-clean": "^0.3.2", "Gulp-clean-css": "^2.0.13 "," Gulp-concat ":" ^2.6.1 "," Gulp-htmlmin ":" ^3.0.0 "," Gulp-rename ":" ^1.2.2 "," Gulp-sass ":" ^2.3.2 "," gulp-sequence ":" ^0.4.6 "," gulp-uglify ":" ^2.0.0 "," Gulp-webpack ":" ^1.5.0 "," Html-webpack-plugin ":" ^2.24.1 "," Json-server ":" ^0 .8.22 "," minimist ":" ^1.2.0 "}}

2, Gulpfile.js

varGulp = require (' gulp ');varsequence = require (' gulp-sequence ');varClean = require (' Gulp-clean ');vartasks = require ('./bin/gulp.task ');varServer = require ('./bin/gulp.server ');varargv = require (' minimist ') (Process.argv.slice (2));varOptions = {entry: "Src/modules/app.js", Noderoot: "Node_modules", dest: {root: "Build", CSS: "Build/css", Font: "Build/fonts", Webpack: "Build", Template: "Build/templates", Image: " Build/img "}, src: {sass:" Src/sass/*.scss ", Template:" src/templates/**/*.html ", Image: "Src/img/**/*.*", JS: "Src/modules/**/*.js"}, Watch: {sass: "Src/sass/**/*.scss", Templa  TE: "src/templates/**/*.html"}, Task: {sass: ' sass ', vendorcss: ' Vendorcss ', Vendorfont:

' Vendorfont ', Template: ' template ', Image: ' Image ', Webpack: ' Webpack '}; Cleaning up the build directory Gulp.task (' Clean ',function() { returnGULP.SRC (' build/* ', {read:false}). pipe (Clean ());

});
Sass Gulp.task (Options.task.sass, Tasks.sass (options));
Third-party CSS Gulp.task (OPTIONS.TASK.VENDORCSS, Tasks.vendorcss (options));
Third-party font file Gulp.task (Options.task.vendorFont, Tasks.vendorfont (options));
Template file Gulp.task (options.task.template, Tasks.template (options));
Picture file Gulp.task (Options.task.image, Tasks.image (options));
Webpack Packaging Gulp.task (Options.task.webpack, Tasks.webpack (options)); Development Server Task Gulp.task (' Server ', Server (options));varBuild = [Options.task.sass, Options.task.template, Options.task.image, options.task.vendorCss, option S.task.vendorfont];if(Argv.run) {gulp.task (' build ', sequence ("clean", build, [' Server ', Options.task.webpack]);}Else{gulp.task (' build ', sequence (' Clean ', Build, Options.task.webpack)} Gulp.task (' Default ', [' Build '])