IDEA 编辑配置运行

               

首先本文讲的重点是：如何通过 IntelliJ IDEA集成环境， 启动前端程序，像启动后台程序一样，只需点击就可以运行了。

一、点击如上图的"web"（这里是我起的一个运行的名字，本来是"Edit Configurations"），点击"Edit Configurations"

弹出窗口如下：

如果没有"defaults"，可以点也是一样的。

二、选择"Gulp.js"，前提是需要安装Gulp，指令是：

npm install --g gulp  全局安装

npm install gulp   项目安装

gulp --run     启动指令

右边出现

三、name：随便取个名字

       Gulpfile：项目中的gulpfile.js的位置

       Tasks：不用填

       Arguments：--run

       下面的东东都会自己出来，不用管。

四、点就可以了。

五、肯定有朋友会问我的gulp --run是怎么来的：

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",    "bootstrap-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

var gulp        = require('gulp');var sequence    = require('gulp-sequence');var clean       = require('gulp-clean');var tasks       = require('./bin/gulp.task');var server      = require('./bin/gulp.server');var argv        = require('minimist')(process.argv.slice(2));var options = {    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",        template: "src/templates/**/*.html"    },    task: {        sass: 'sass',        vendorCss: 'vendorCss',        vendorFont: 'vendorFont',        template: 'template',        image: 'image',        webpack: 'webpack'    }};// 清理build目录gulp.task('clean', function() {    return gulp.src('build/*', {read:false}).pipe(clean());});// sassgulp.task(options.task.sass, tasks.sass(options));// 第三方cssgulp.task(options.task.vendorCss, tasks.vendorCss(options));// 第三方字体文件gulp.task(options.task.vendorFont, tasks.vendorFont(options));// 模板文件gulp.task(options.task.template, tasks.template(options));// 图片文件gulp.task(options.task.image, tasks.image(options));// webpack 打包gulp.task(options.task.webpack, tasks.webpack(options));// 开发服务器任务gulp.task('server', server(options));var build = [    options.task.sass,    options.task.template,    options.task.image,    options.task.vendorCss,    options.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'])

           

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow