前端工程化浅析

Posted 2020-10-16

 

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

 

使用工程化开发项目原因：

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

 

 

工程化帮我们：

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

 

 

现有的工程化工具：

grunt、gulp是自动化构建工具，webpack是模块化打包工具，bower、npm是包管理工具

 

gulp使用方式：

基于流的自动化构建工具。

因为gulp运行在nodejs中，所以遵循commonjs模块化规范，gulp使用通过创建和执行任务来完成

关键方法：

     1.gulp.task()创建任务

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

     3.gulp.desk()输出文件

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

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

        

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

 

工程化的实现：

1、建立项目目录

2、在项目中执行npm  init应该有一个package.json文件，标注项目相关信息。

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

4、全局安装gulp : npm install gulp --global

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

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

6、建立gulpfile.js文件，在这里可以发布任务，通过命令行执行任务

。。。

 

 

 

工程化的详细实现

1、热更新服务器

     npm i gulp-webserver -D

2、配置sass开发环境

sass并不能被浏览器直接识别，需要编译成css在引入

sass的底层是ruby，在nodejs中需要使用node-sass工具帮助编译

.sass    .scss

先安装[email protected]

npm install -g [email protected]

npm install [email protected] -D

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

npm install  gulp-sass -D

 

注意：在编译sass时，以保存就报错，在编译就好了

原因：设备优势反应不过来，按下保存按钮时gulp-sass在编译sass时，其他的模块任务已经开始运行

解决：在编译sass的位置包上一个settimeout

 

注意：在sass里应该模块化开发

 

3、合并sass文件

npm  install -D gulp-concat

 

 

4、css兼容处理

在移动端中浏览器内核都是webkit，但是css依然要加前缀，而弹性盒的语法有两个版本，他们基本不同。

 

codepen.io 可以在此在线写代码，做css兼容，找好看效果

gulp-autoprefixer 

 

5、js模块化编译打包

npm i gulp-webpack -D

 

用babel编译es6，用gulp-uglify压缩js，gulp-rename重命名

 

6、dom

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‘])