Gulp和Webpack

Gulp

    gulp.js简单来说就是一种基于流的,代码优于配置的新一代构建工具

安装

    gulp基于nodejs,必须在node环境下配置,npm安装较慢,推荐使用cnpm(淘宝镜像)

    1.cnpm install -g gulp  全局安装gulp

    2.cnpm install --save-dev gulp

    3.cnpm install gulp-jshint --save-dev  安装gulp-jshint

    4.创建gulpfile.js

    5.gulp lint 最后执行命令

Webpack

    webpack是一个前端资源加载打包工具,将根据模块的依赖关系进行静态分析将这些模块按照指定的规则生成对应的静态资源

安装

    webpack基于nodejs,这一点和gulp是一样的,必须在node环境下

    1.cnpm install webpack -g    全局安装webpack

    2.mkdir app  创建一个目录app

    3.在app目录下创建one.js   document.write("Hello World")

    4.在app目录下添加index.html文件  动态添加script标签 引入webpack配置文件

    5.webpack one.js bundle.js   打包

Gulp和Webpck区别

    Gulp强调的是前端开发的工作流程,通过配置一系列的tesk,让gulp执行这些task,从而构建整个项目的开发流程

    Webpack是一个前端模块化方案,它更侧重的使模块打包

你可能感兴趣的:(Gulp和Webpack)