1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
'use strict';
var Generator = require('yeoman-generator');
var chalk = require('chalk');
var yosay = require('yosay');

module.exports = Generator.extend({

  // 交互输入选项
  prompting: function () {
    
    // 启动画面文字
    this.log(yosay(
      'Welcome to the legendary ' + chalk.red('generator-itcast-webapp') + ' generator!'
    ));

    // 是非询问
    var prompts = [{
      type: 'confirm',
      name: 'someAnswer',
      message: 'Would you like to enable this option?',
      default: true
    }];

    // 保存交互输入信息
    return this.prompt(prompts).then(function (props) {
      // To access props later use this.props.someAnswer;
      this.props = props;
    }.bind(this));
  },

  // 写操作
  writing: function () {
    // 支持模板
    this.fs.copy(
      this.templatePath('dummyfile.txt'),
      this.destinationPath('dummyfile.txt')
    );
  },

  // 最后安装依赖项目
  install: function () {
    this.installDependencies();
  }
});

1
2
3
4
5
6
7
var gulp = require('gulp');
var webserver = require('gulp-webserver');
 
gulp.task('webserver', function() {
  var server = gls.static('release/dist', 8080);
  server.start();
});

1
2
3
4
5
[14:31:06] Using gulpfile ~/gulpfile.js
[14:31:06] Starting 'webserver'...
[14:31:06] Finished 'webserver' after 10 ms
livereload[tiny-lr] listening on 35729 ...
folder "release/dist" serving at http://localhost:8080

1
2
3
4
5
var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

1
2
3
[13:26:37] Using gulpfile ~/Documents/test/gulp-test/gulpfile.js
[13:26:37] Starting 'default'...
[13:26:37] Finished 'default' after 67 μs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var gulp = require('gulp'),  
browserify = require('browserify'),//这里用不上，管理js依赖的
source = require('vinyl-source-stream'),//同样这里用不上，和上面那个一起的
uglify = require('gulp-uglify'),//混淆js
clean = require('gulp-clean'),//清理文件
notify = require('gulp-notify'),//加控制台文字描述用的
buffer = require('vinyl-buffer'),
less = require('gulp-less'),//转换less用的
autoprefixer = require('gulp-autoprefixer'),//增加私有变量前缀
minifycss = require('gulp-minify-css'),//压缩
concat = require('gulp-concat'),//合并
fileinclude = require('gulp-file-include'),// include 文件用
template = require('gulp-template'),//替换变量以及动态html用
rename = require('gulp-rename'),//重命名
webserver = require('gulp-webserver'),//一个简单的server，用python的SimpleHttpServer会锁文件夹
imagemin = require('gulp-imagemin'),//图片压缩
gulpif  = require('gulp-if'),//if判断，用来区别生产环境还是开发环境的
rev  = require('gulp-rev'),//加MD5后缀
revReplace = require('gulp-rev-replace'),//替换引用的加了md5后缀的文件名，修改过，用来加cdn前缀
addsrc = require('gulp-add-src'),//pipeline中途添加文件夹，这里没有用到
del = require('del'),//也是个删除··· 
vinylPaths = require('vinyl-paths'),//操作pipe中文件路径的，加md5的时候用到了
runSequence = require('run-sequence');//控制task顺序

1
2
3
4
5
6
7
8
    var webpack = require('webpack');

    ...

    plugins: [
        new webpack.BannerPlugin("Copyright Flying Unicorns inc.")//在这个数组中new一个就可以了
    ],

1
npm install --save-dev html-webpack-plugin

1
2
3
4
5
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        })
    ],

1
2
3
4
    plugins: [
        ...,
        new webpack.HotModuleReplacementPlugin()//热加载插件
    ],

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
    "presets": [
        "es2015",
        "react"
    ],
    "env": {
        "development": {
            "plugins": [
                [
                    "react-transform",
                    {
                        "transforms": [
                            {
                                "transform": "react-transform-hmr",
                                "imports": [
                                    "react"
                                ],
                                "locals": [
                                    "module"
                                ]
                            }
                        ]
                    }
                ]
            ]
        }
    }
}

1
2
3
4
5
6
    ....
    output: {
        path: __dirname + "/release",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    },
    ...

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack-dev-server --progress",
    "release": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"
  },
  "author": "Cássio Zen",
  "license": "ISC",
  "devDependencies": {...},
  "dependencies": {...}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, {Component} from 'react'
import config from './config.json';

class Greeter extends Component{
  render() {
    return (
      <div>
        {config.greetText}
      </div>
    );
  }
}

export default Greeter

1
2
3
4
5
import React from 'react';
import {render} from 'react-dom';
import Greeter from './greeter';

render(<Greeter />, document.getElementById('root'));

1
2
3
4
//.babelrc
{
  "presets": ["react", "es2015"]
}

1
2
3
4
5
6
7
import React from 'react';
import {render} from 'react-dom';
import Greeter from './greeter';

import './main.css';//使用require导入css文件

render(<Greeter />, document.getElementById('root'));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/build",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    },

    module: {
        loaders: [
            {
                test: /\.json$/,
                loader: "json-loader"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'//在webpack的module部分的loaders里进行配置即可
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader?modules',
                    'postcss-loader'
                ]
            }
        ]
    },

    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        compress: true,
        port: 9000
    }
}

1
2
3
4
5
6
7
8
    {
        test: /\.css$/,
        loaders: [
            'style-loader',
            'css-loader?modules',
            'postcss-loader'
        ]
    }

1
2
3
4
5
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

1
2
3
4
5
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

1
2
var greeter = require('./greeter.js');
document.getElementById('root').appendChild(greeter());

1
2
3
4
5
6
7
module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

1
document.write('It works.')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// 全局窗口对象
let win

function createWindow () {

  // 创建浏览器窗口对象
  win = new BrowserWindow({width: 800, height: 600})

  // 读取index.html 为首页
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // 打开调试工具，发布的时候请关闭
  win.webContents.openDevTools()

  // 关闭 - 消息处理
  win.on('closed', () => {
    
    // 关闭不必要的资源占用（内存、流）
    win = null
  })
}

// 首次启动环境加载完成 - 消息处理
app.on('ready', createWindow)

// 当所有的窗口被关闭 - 消息处理
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()
  }
})