前端工程化讲解 | 易学教程

一、什么叫做前端工程化

在过去前端开发一直没有完善的一些代码处理等工具来辅助开发，而nodejs火起来之后，很多基于node环境的工具诞生之后对前端开发造成了冲击，慢慢的，使用这些工具来完成项目的搭建和开发这样的方式被成为前端工程化

二、为什么使用工程化来开发项目

现在的项目不管从规模还是复杂度上都有很大的提高，所以，如何能快速的搭建环境，以及高效的代码管理，后期处理成为了衡量前端工程师技术的一个标准

三、工程化之后能帮助我们做到什么？

构建环境变得简单和自动化，代码的压缩合并，模块化，抽离都能一步完成，减少了后期处理成本。

四、现有的工程化工具

目前市场上有很多自动化工具供我们选择： grunt、gulp都是自动化构建工具，webpack是模块化打包工具，bower、npm是包管理工具

五、Gulp的使用方式

gulp是一款目前比较流行的基于流的自动化构建工具，因为gulp是运行在nodejs中，所以说也遵循 CommonJS模块化规范，gulp的使用就是通过创建任务和执行任

务来完成

关键方法:

1. gulp.task()创建任务

2. gulp.src()查找资源文件

3. gulp.dest()输出文件

4. gulp.watch()监听文件内容变化

5. .pipe()可以对文件进行处理

gulp提供的只是查找文件，监听文件，处理后输出文件，但是如何处理都不属于gulp的功能范畴

六、工程化的实现

在这里，我们将项目的工程化，与现实中的建筑项目开发来做一个对比；

1. 项目选址，找一块能使用的好地段的地皮准备进行项目的开发

在电脑上某一个地方建立项目目录准备进行开发

2. 进行信息备案：建筑名称，占地，用处，材料，规模等等...

在项目中执行npm init 创建package.json的文件，标注项目的相关信息

3. 找建筑公司承包项目的开发

选择gulp + gulp-webpack + npm 进行项目的开发

4. 建筑公司的工人入驻工地

全局安装gulp ：npm install gulp --global

在项目中安装gulp依赖：npm install gulp --save-dev ( -D )

5. 建筑图纸，材料进入工地

建立开发目录以及依赖等等

6. 对工人根据工种分队，建立完善的任务发布机制（微信群聊）

建立gulpfile.js文件，在这个文件里发布任务，通过命令行来执行这些任务

7.项目完成后......

七、工程化的详细实现

1. 若想要一个热更新服务器

npm i gulp-webserver -D

2. 配置sass开发环境

因为sass并不能被浏览器直接识别，需要进行编译，编译成css后再引入，sass的底层是ruby，在node中我们需要使用node-sass的工具来帮助编译

先安装node-sass@4.0.0

npm install -g node-sass@4.0.0

npm install node-sass@4.0.0 -D

再安装gulp中的编译sass的工具

npm install gulp-sass -D

注意，在编译sass的时候，一保存就报错，在编译就好了，为什么？

原因是设备有的时候反应不过来，按下保存按钮的时候，这个时候gulp-sass编译sass的时候，其他的模块任务已经运行了

解决方法：在编译sass的位置报上一个setTimeout

注意，在sass里进行模块化开发才是王道

3. 合并css文件

因为用sass开发后，本身可以模块后后在一个模块中引入另一个sass模块。最后编译出来的就是完整的css。

但是因为有的时候，一些模块是别人写的，我们不知道怎么引入，只好合并到一起

npm install -D gulp-concat

4. css兼容处理

虽然在移动端中浏览器内核都是webkit，但是我们的css依然要加前缀，再说弹性盒，弹性盒的语法是有两个版本，两个版本的语法基本是完全不一样的

[codepen](codepen.io)是一个神奇的网站，我们可以在线写代码，还可以做css兼容，还可以找一些好看的效果来学习

5. js模块化编译打包

npm install gulp-webpack -D

用babel编译es6 ，用gulp-rename改名字，用gulp-uglify压缩

八、demo

　　　　const gulp = require("gulp")

　　　　const concat = require('gulp-concat')//合并

　　　　const cleanCSS = require('gulp-clean-css');//压缩css

　　　　const autoprefixer = require('gulp-autoprefixer');//css兼容

　　　　const webserver = require("gulp-webserver")//热更新模块

　　　　//热更新服务的任务

　　　　gulp.task('server',function () {

　　　　　　gulp.src('./').

　　　　　　pipe(webserver({

　　　　　　host:"localhost",

　　　　　　port:9000,

　　　　　　livereload :true , //是否热更新

　　　　　　directoryListing :true

　　　　　　}))

　　　　})

　　　　const sass = require('gulp-sass')//处理sass的模块

　　　　gulp.task('sass',function () {//编译sass的任务

　　　　　　// setTimeout(function(){

　　　　　　　　gulp.src('./src/sass/**/*.scss').

　　　　　　　　pipe(sass({outputStyle:'compressed'}).on('error', sass.logError))

　　　　　　　　.pipe(concat('index.css'))

　　　　　　　　// .pipe(cleanCSS({compatibility: 'ie8'}))

　　　　　　　　.pipe(autoprefixer({

　　　　　　　　　　browsers: ['last 2 versions'],

　　　　　　　　　　cascade: false

　　　　　　　　}))

　　　　　　　　.pipe(gulp.dest("./build/css"))

　　　　　　// },200)

})

　　　　//js处理

　　　　const webpack = require('gulp-webpack')

　　　　const uglify = require('gulp-uglify');

　　　　const rename = require('gulp-rename')

　　　　gulp.task("packjs",function(){

　　　　　　gulp.src("./src/js/index.js")

　　　　　　.pipe(webpack({

　　　　　　　　output:{

　　　　　　　　　　filename:'index.js'

　　　　　　　　module:{

　　　　　　　　　　loaders:[

　　　　　　　　　　　　{

　　　　　　　　　　　　　　test:/\.js$/,

　　　　　　　　　　　　　　loader:"babel-loader",

　　　　　　　　　　　　　　query:{

　　　　　　　　　　　　　　　　presets:['es2015']

　　　　　　　　　　　　　　}

　　　　　　　　　　]

　　　　　　　　}

　　　　　　}))

　　　　　　.pipe(uglify())

　　　　　　.pipe(rename({

　　　　　　　　suffix: ".min"

　　　　　　}))

　　　　　　.pipe(gulp.dest('./build/js'))

　　　　})

　　　　//监听sass任务

　　　　gulp.task('watch:sass',function () {

　　　　　　gulp.watch('./src/sass/**/*.scss',['sass'])

　　　　})

　　　　//监听js任务

　　　　gulp.task('watch:js',function () {

　　　　　　gulp.watch('./src/js/**/*.js',['packjs'])

　　　　})

　　　　//默认任务

　　　　gulp.task('default',['sass','watch:sass','packjs','watch:js','server'])

来源：https://www.cnblogs.com/msycat/p/7997960.html

标签

gulp

Sass

前端开发

pipe

css