Question

gulp+webpack怎么实现前端模块化

Answer 1

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成
javascript/coffee/sass/less/html/image/css
等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

**当然个人还是喜欢webpack的模块化优秀

废话不多说现在开始gulp之旅

初始化项目(此处已经认为node环境已经安装)

建立文件夹 名字自己随便取 比如 gulpText，然后输入以下命令
$ cd gulpText
$ mkdir images //建立存放图片文件夹
$ mkdir src // 存放 js 以及css
$ mkdir index.html //主页
$ mkdir gulpfile.js //编写gulp 任务文件
$ mkdir mock //mock数据

然后输入以下命令 然后一路点下去生成json文件
$npm init

打开json文件看到这样的

1474889102536.png

全局安装gulp以便我们运行gulp进行打包等操作
$npm install gulp -g

如果感觉npm安装比较慢可以切换至cnpm下载，代码如下
$npm install cnpm -g

安装gulp包，方便我们引用gulp
$npm install gulp

成功截图

1474889517162.png

编写gulp任务

引入 gulp
//引入gulp
var gulp = require('gulp');

拷贝Index.html
//copyhtml
gulp.task('copy-index',function () {
gulp.src('./index.html')
.pipe(gulp.dest('./build'));
})

执行命令
$ gulp copy-index

1474890843877.png]( http://upload-images.jianshu.io/upload_images/2905209-c00d640651bde279.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )

1474890828271.png

拷贝images
//copy images
gulp.task('copy-images',function () {
gulp.src('./images**/*')
.pipe(gulp.dest('./build/'));
})

执行命令
$ gulp copy-iamges

1474891076408.png

1474891039689.png

css预处理

现在我们在src目录里创建文件styles放我们的scss代码，需要把scss代码编译到/build/prd/styles/下
$ cd src
$ mkdir styles
$ cd styles
$ touch app.scss
$ touch common.scss

app.scss项目代码
@charset "UTF-8";
@import "./common.scss";
body{
background-color: $base-color;
color: #000;
font-size: 20px;
font-weight: 800;
}
html{
width: 100%;
height: 100%;
}
html{
width: 100%;
height: 100%;
}
.lsds{
width: 100px;
height: 100px;
}

common.scss代码
$base-color:yellow;

安装css预编译包
$ npm install gulp-sass //sass编辑包
$ npm install gulp-minify-css'); //css压缩包
//引入css预处理模块
var sass= require('gulp-sass');
//引入css压缩模块
var minifyCSS = require('gulp-minify-css');
//css预处理

var cssFiles=[
'./src/styles/app.scss'
];
gulp.task('scss',function () {
gulp.src(cssFiles)
.pipe(sass().on('error',sass.logError))
.pipe(minifyCSS())
.pipe(gulp.dest('./build/prd/styles/'))
})

编辑scss
$ gulp scss

开启服务

安装server包
$ npm install gulp-webserver
//引入gulp-webserver 模块
var server = require('gulp-webserver');
gulp.task('server',function () {
gulp.src('./')
.pipe(server({
host:'127.0.0.1', //ip
port:80, //端口
directoryListing:{
enable:true,
path:'./'
},
livereload:true,
}));
})