Gulp-webpack Simple Application

1. Configure the environment: in the Webstorm console (1) cnpm install--save-dev Gulp (2) cnpm install--save-dev Gulp-webpack

(3) cnpm install Babel-loader babel-core babel-preset-es2017--save-dev

2. Directory structure: (The build folder is automatically generated after all files have been configured in Webstorm console after input gulp)

3.gulpfile File configuration:

1 /**2 * Created by Administrator on 2016/11/16.3  */4 5Const GULP = require ("Gulp");6Const WEBPACK = require ("Gulp-webpack");7 8Gulp.task ("Copy_html_files",function () {9GULP.SRC ("src/**/*.html"). Pipe (Gulp.dest ("Build")));Ten }); One  AGulp.task ("Copy_package_json",function () { -GULP.SRC ("Src/package.json"). Pipe (Gulp.dest ("Build"))); - }); the  -Gulp.task ("Compile_index",function () { -GULP.SRC ("Src/index/index.js"). Pipe (Webpack ({ - output: { +FileName: "Index/index.js" -         }, + module: { A Loaders: [ at                 { -Test:/\.js$/, -Loader: ' Babel ',//' Babel-loader ' is also a valid name to reference - query: { -Presets: [' es2017 '] -                     } in                 } -             ], to         }, + externals: { -Electron: "Require (' electron ')", thePath: "Require (' path ')", *FS: "Require (' FS ')", $URL: "Require (' URL ')"Panax Notoginseng         } -}). Pipe (Gulp.dest ("Build"))); the }); +  AGulp.task ("Copy_main_js",function () { theGULP.SRC ("Src/main.js"). Pipe (Gulp.dest ("Build"))); + }); -  $Gulp.task ("Default", ["Copy_package_json", "Copy_html_files", "Copy_main_js", "Compile_index"]);

4. After the Package.json is configured in the root directory:

  1  {  2  "name": "Application-name"   3  " Version ":" 0.0.1 "  4  "Devdependencies" Span style= "COLOR: #000000" >: {  5  "Babel-core": "^6.18.2"   6  "Babel-loader": "^6.2.7" ,< /span> 7  "babel-preset-es2017": "^6.16.0"    8  "Gulp": "^3.9.1"   9 " Gulp-webpack ":" ^1.5.0 "10  }  11 } 

The Package.json in the 5.SRC directory is designed to accommodate the Electeon configuration:

1 {2   "Scripts": {3     "start": "Electron." 4   }, 5   " Name ":" Application-name ",6   " version ":" 0.0.1 ",7   " main ":" Main.js "8 }

The Main.js file in the 6.SRC directory is also designed to accommodate the electron configuration:

1 /**2 * Created by Administrator on 2016/11/16.3  */4 5const {app, Browserwindow} = require (' electron '))6Const PATH = require (' path ');7Const URL = require (' URL ');8 9 //Keep A global reference of the Window object, if you don ' t, the window wouldTen //Be closed automatically if the JavaScript object is garbage collected. One Let win; A  - functionCreateWindow () { -     //Create the browser window. theWin =NewBrowserwindow ({width:800, height:600}) -  -     varfilepath = Path.join (__dirname, ' index.html '); -  + Console.log (filepath); -  +     //and load the index.html of the app. A     //you need to manually configure the path of the index.html here at Win.loadurl (Url.format ({ -Pathname:path.join (__dirname, "index", ' index.html '), -Protocol: ' File: ', -Slashes:true -     })); -  in     //Open the DevTools. - win.webContents.openDevTools (); to  +     //emitted when the window is closed. -Win.on (' Closed ', () = { the         //dereference The Window object, usually you would store windows *         //in a array if your app supports multi windows, this is the time $         //When you should delete the corresponding element.Panax NotoginsengWin =NULL -     }) the } +  A //This method is called when Electron has finished the //Initialization and is ready to create browser windows. + //Some APIs can only is used after this event occurs. -App.on (' Ready ', CreateWindow); $  $ //Quit When all Windows is closed. -App.on (' window-all-closed ', () = { -     //On MacOS It's common for applications and their menu bar the     //To stay active until the user quits explicitly with CMD + Q -     if(Process.platform!== ' Darwin ') {Wuyi app.quit () the } - }); Wu  -App.on (' Activate ', () = { About     //On MacOS It's common to re-create a Windows in the app when the $     //dock icon is clicked and there am no other windows open. -     if(Win = = =NULL) { - CreateWindow () - } A});

The index.html in index in the 7.SRC catalog introduced the Index.js file

8. When configured, configure the project as NPM:

Gulp-webpack Simple Application