Gulp-webpack Engineering Realization of electron

Reference website:

Https://www.npmjs.com/package/babel-loader

Https://www.npmjs.com/package/gulp

Https://www.npmjs.com/package/gulp-webpack

Create a new Folder

Installing Gulp

Installing Gulp-webpack

Create a Gulpfile file

and write

1 /**2 * Created by Administrator on 2016/11/16.3  */4Const GULP = require ("Gulp");5Const WEBPACK = require ("Gulp-webpack");6 7Gulp.task ("copy_html",function () {8GULP.SRC ("src/*.html"). Pipe (Gulp.dest ("Build")));9 });Ten  OneGulp.task ("Copy_package",function () { AGULP.SRC ("Src/package.json"). Pipe (Gulp.dest ("Build"))); - }); -  theGulp.task ("Com_js",function () { -GULP.SRC ("Src/index.js"). Pipe (Webpack ({ - output: { -FileName: "Index.js" +         }, - module: { + Loaders: [ A                 { atTest:/\.js$/, -Loader: ' Babel ',//' Babel-loader ' is also a valid name to reference - query: { -Presets: [' es2017 '] -                     } -                 } in             ] -         }, to externals: { +Electron: "Require (' electron ')",  -Path: "Require (' path ')", theURL: "Require (' URL ')" *         } $}). Pipe (Gulp.dest ("Build")));Panax Notoginseng }); -  theGulp.task ("Copy_main",function () { +GULP.SRC ("Main.js"). Pipe (Gulp.dest ("Build"))); A }); the  +Gulp.task ("Default", ["copy_html", "Copy_package", "Com_js", "Copy_main"]);

Installing Babel

Now look at the directory structure

Description, the purpose is to put the src file and the Main.js file into the build folder by compiling

Main.js Code

1 /**2 * Created by Administrator on 2016/11/16.3  */4const {app, Browserwindow} = require (' electron '))5Const PATH = require (' path ');6Const URL = require (' URL ');7 8 //Keep A global reference of the Window object, if you don ' t, the window would9 //Be closed automatically if the JavaScript object is garbage collected.Ten Let win; One  A functionCreateWindow () { -     //Create the browser window. -Win =NewBrowserwindow ({width:800, height:600}) the  -     varfilepath = Path.join (__dirname, ' index.html '); -  - Console.log (filepath); +  -     //and load the index.html of the app. + Win.loadurl (Url.format ({ APathname:path.join (__dirname, ' index.html ')), atProtocol: ' File: ', -Slashes:true -     })); -  -     //Open the DevTools. - win.webContents.openDevTools (); in  -     //emitted when the window is closed. toWin.on (' Closed ', () = { +         //dereference The Window object, usually you would store windows -         //in a array if your app supports multi windows, this is the time the         //When you should delete the corresponding element. *Win =NULL $     })Panax Notoginseng } -  the //This method is called when Electron has finished + //Initialization and is ready to create browser windows. A //Some APIs can only is used after this event occurs. theApp.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 -     //To stay active until the user quits explicitly with CMD + Q -     if(Process.platform!== ' Darwin ') { the app.quit () -     }Wuyi }); the  -App.on (' Activate ', () = { Wu     //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. About     if(Win = = =NULL) { $ CreateWindow () -     } -});

The contents of the Packjson file under src:

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

Console input

Compiling the file gulp (under the main file)

Open the build file CD build

Run the electron.

Results

The last note: After compiling the gulp, it is possible to have the can not find module, the solution, install the missing modules.

Gulp-webpack Engineering Realization of electron