Easy-webflow NPM

easy-webflow

使用gulp + webpack搭建前端工作流

Install

npm install easy-webflow --save-dev

Usage

创建gulpfile.js文件

// gulpfile.js
require('easy-webflow');

创建配置文件webflow.config.js，可配置项参考npm包内的config/index.js 和 gulpfile.js/default-config.js 也可以选择不执行默认的任务，加载 gulpfile.js/lib 目录下的工具方法执行自定义任务，下面是一个自定义任务的例子（监听文件变动，执行编辑、上传ftp等任务）

// webflow.config.js
const path = require('path');
const _ = require('lodash');
const { Server, browserSync } = require('easy-webflow/gulpfile.js/lib/server');
const { sftp } = require('easy-webflow/gulpfile.js/lib/sftp');
const { sass } = require('easy-webflow/gulpfile.js/lib/sass');
const { jsmin } = require('easy-webflow/gulpfile.js/lib/webpack');

const handle = (_path, config) => {
  const exname = path.extname(_path);

  switch (exname) {
    case '.scss':
      sass(_path, 'www/css', {
        src: {
          base: 'www/sass'
        }
      });
      break;

    case '.js':
      jsmin(_path, 'www/dest', {
        src: {
          base: 'www/js'
        }
      });
      break;

    default:
      break;
  }

  sftp(_path, config.sftp);
};

const base = {
  useDefault: false,
  host: 'abc.com',
  port: 80,
  sftp: {
    host: '127.0.0.1',
    user: 'root',
    pass: '',
    port: 22,
    remotePath: '/root/abc'
  },
  browsersync: {
    files: [
      'www/**/*',
      'abc/**/*'
    ],
    server: {
      baseDir: './'
    },
    notProxyUrls: [
      '/www'
    ]
  },
  before (config, cb) {
    const server = new Server(config);
    server.init();
    cb();
  },
  watch: {
    globs: [
      'www/**/*',
      'abc/**/*'
    ],
    cb (watcher, config) {
      watcher.on('add', (path) => {
        console.log('添加文件', path);
        handle(path, config);
      });

      watcher.on('unlink', (path) => {
        console.log('删除文件', path);
      });

      watcher.on('change', (path) => {
        console.log('更改文件', path);
        handle(path, config);
      });
    }
  } 
}

const config = {
  development: _.merge(base, {

  }),
  production: _.merge(base, {
    
  })
};

module.exports = config;

在package.json文件的scripts添加以下代码，使用--config指定自定义配置文件地址

"dev": "cross-env NODE_ENV=development gulp --config webflow.config.js",
"prod": "cross-env NODE_ENV=production gulp --config webflow.config.js"

开发环境（默认任务行为）

启动开发服务，监听sass、es6并刷新浏览器

npm run dev

生产环境（默认任务行为）

将所有资源打包压缩优化后到dist目录，dist目录作为发布在生产环境资源

npm run prod

特点

sass => css
es6|7 => js
typescript => js
css stylelint
js lint，不支持自定义配置（未测试包使用有没有问题）
html lint(暂无)
开发服务器、自动重载、动态插入样式 Browsersync
根据配置文件启动开发服务或者构建生产环境资源
禁用默认任务，执行自定义任务，比如监控文件改变执行编译或者上传ftp

目录结构

|-- app 源代码目录
  |-- public 前端资源目录
    |-- css sass输出目录，sprite.css为雪碧图css
    |-- fonts 字体
    |-- images 图片资源
    |-- js es6+编译后输出目录
    |-- lib 第三方css\js等不能使用npm管理的包
    |-- scripts es6源码，每个文件对应输出一个js文件（存在重复模块包装代码）
    |-- styles 样式文件目录，不以下划线开头输出一个单独的文件
  |-- router 后端路由
  |-- views 后端视图（pug）
  |-- app.js 入口文件
  |-- config.js 后端配置文件
|-- config gulp自定义配置文件
|-- gulpfile.js gulp任务目录
  |-- lib gulp任务共用方法
  |-- tasks 具体任务（default.js默认任务依赖其他任务，故改名为z_开头以保证最后加载）
  |-- default-config.js 默认使用的配置，和config文件夹的配置合并传给任务
  |-- index.js gulp入口文件

|-- dist 构建后的代码目录，用于生产环境（前后端），目录结构同app一样