前端工程化讲解

1、什么叫作前端工程化

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

2、为何使用工程化来开发项目

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

3、工程化以后能帮助咱们作到什么？

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

4、现有的工程化工具

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

5、Gulp的使用方式

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

务来完成

关键方法:

      1. gulp.task()建立任务

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

      3. gulp.dest()输出文件

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

      5. .pipe()能够对文件进行处理

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

6、工程化的实现

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

       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.项目完成后......

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压缩

8、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'])