Gulp-webpack简单应用
1.配置环境: 在 webstorm 的控制台中 (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.目录结构:( build文件夹 是在配置好所有文件后,在webstorm的控制台输入 gulp 后自动生成的)
3.gulpfile文件配置:
/**
* Created by Administrator on 2016/11/16.
*/ const gulp = require("gulp");
const webpack = require("gulp-webpack"); gulp.task("copy_html_files", function () {
gulp.src("src/**/*.html").pipe(gulp.dest("build"));
}); gulp.task("copy_package_json", function () {
gulp.src("src/package.json").pipe(gulp.dest("build"));
}); gulp.task("compile_index", function () {
gulp.src("src/index/index.js").pipe(webpack({
output: {
filename: "index/index.js"
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel', // 'babel-loader' is also a valid name to reference
query: {
presets: ['es2017']
}
}
],
},
externals: {
electron: "require('electron')",
path: "require('path')",
fs: "require('fs')",
url: "require('url')"
}
})).pipe(gulp.dest("build"));
}); gulp.task("copy_main_js", function () {
gulp.src("src/main.js").pipe(gulp.dest("build"));
}); gulp.task("default", ["copy_package_json", "copy_html_files", "copy_main_js", "compile_index"]);
4.根目录下的package.json配置好后:
{
"name": "application-name",
"version": "0.0.1",
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-preset-es2017": "^6.16.0",
"gulp": "^3.9.1",
"gulp-webpack": "^1.5.0"
}
}
5.src 目录下的package.json是为了适应 electeon 的配置:
{
"scripts": {
"start":"electron ."
},
"name": "application-name",
"version": "0.0.1",
"main": "main.js"
}
6.src目录下的 main.js 文件也是为了适应 electron 的配置:
/**
* Created by Administrator on 2016/11/16.
*/ const {app, BrowserWindow} = require('electron')
const path = require('path');
const url = require('url'); // Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win; function createWindow() {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600}) var filepath = path.join(__dirname, 'index.html'); console.log(filepath); // and load the index.html of the app.
//此处需要手动配置 index.html 的路径
win.loadURL(url.format({
pathname: path.join(__dirname, "index", 'index.html'),
protocol: 'file:',
slashes: true
})); // Open the DevTools.
win.webContents.openDevTools(); // Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
} // This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow); // Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
}); app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
});
7.src目录中的index中的 index.html 引入的是 index.js文件
8.配置时,将工程配置为 npm :
Gulp-webpack简单应用的更多相关文章
- webpack gulp grunt 简单介绍
本文主要是讲下webpack的相关知识点,理论比较多,因为webpack的功能非常强大,说到的也基本都是经常用到的. 这三个工具都属于前端自动化的工具,都是第三方的,并且国内很多大型团队也都有自己成熟 ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- gulp+webpack+vue
gulp+webpack+vue 章节目录 1.目标 2.实现 2.1合并库文件 2.2组织业务代码 2.3打包开发代码 2.4使用webpack-dev-server和热替换插件HotModuleR ...
- gulp & webpack整合
为什么需要前端工程化? 前端工程化的意义在于让前端这个行业由野蛮时代进化为正规军时代,近年来很多相关的工具和概念诞生.好奇心日报在进行前端工程化的过程中,主要的挑战在于解决如下问题:✦ 如何管理多个项 ...
- 用gulp+webpack构建多页应用——记一次Node多页应用的构建过程
通过参考网上的一些构建方法,当然也在开发过程中进行了一番实践,最终搭建了一套适用于当前多页应用的构建方案,当然该方案还处于draft版本,会在后续的演进过程中不断的优化. 个人觉得该方案的演进过程相对 ...
- gulp + webpack + sass 学习
笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...
- Gulp.js - 简单、直观的自动化项目构建工具
Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...
- grunt,gulp,webpack前端打包工具的特性
1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_3231263 ...
- nodejs+gulp+webpack基础知识
nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...
- gulp + webpack 构建多页面前端项目
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
随机推荐
- 关于在 C#中无法静态库引用的解决方法
在VS中用C#写了个类库,后面想转成静态库发现没有直接的方法,原来在C++中可以,而C#中不支持. 但是有时候程序引用C#编写的动态库觉得用户体验不好太累赘,想要简单只发一个exe可执行程序给用户就好 ...
- c#高级编程笔记----委托
因为定义委托基本上是定义一个新类,所以可以在定义类的任何相同地方定义委托,也就是说,可以在另一个类的内部定义,也可以在任何类的外部定义,还可以在名称空间中把委托定义为顶层对象.根据定义的可见性,和委托 ...
- shell脚本编写-自动部署及监控
1.编写脚本自动部署反向代理.web.nfs: I.部署nginx反向代理两个web服务,调度算法使用加权轮询 II.所有web服务使用共享存储nfs,保证所有web都对其有读写权限,保证数据一致性: ...
- Shell 研究
清空文件 https://blog.csdn.net/u011192270/article/details/47804951 写入多行内容到文件 vi rewrite.sh, <<EOF ...
- C/C++,java开源数学计算库
有限元分析.数值计算.三维建模.信号处理.性能分析.仿真分析...这些或多或少与我们常用的软件息息相关,假如有一天你只需要这些大型软件系统的某一个很有限的功能,你是不是也要因此再用一用那动辄几个g的软 ...
- vim tips 集锦
删除文件中的空行 :g/^$/d g 表示 global,全文件 ^ 是行开始,$ 是行结束 d 表示删除该 这里只能匹配到没有白空符的空行,假如要删除有空白符的空行,则使用: :g/^\s*$/d ...
- Lua_第17 章 数学库
第17 章 数学库 在这一章中(以下关于标准库的几章中相同)我的主要目的不是对每个函数给出完整地说明,而是告诉你标准库可以提供什么功能.为了可以清楚地说明问题,我可能 会忽略一些小的选项或者行为.基本 ...
- 【leetcode】Jump Game I, II 跳跃游戏一和二
题目: Jump Game I: Given an array of non-negative integers, you are initially positioned at the first ...
- js 怎么传递参数
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...
- 九度OJ 1086:最小花费 (DP)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3960 解决:819 题目描述: 在某条线路上有N个火车站,有三种距离的路程,L1,L2,L3,对应的价格为C1,C2,C3.其对应关系如下 ...