关于前端自动化构建工具

一、简介

　　　之前了解了自动化构建相关工具，然后今天有时间就把学习过程碰到的坑写下来。首先是前端自动化构建三大工具gulpgruntwebpack。其实说是三大工具，但也只是个人主观想法。因为自己常见的并有所了解的就这三个。至于其他的，暂不在讨论范围。

二、gulp、grunt、webpack对比

　　1、Grunt和Gulp属于任务流工具Tast Runner , 而 webpack属于模块打包工具 Bundler。

　　2、Grunt的出现早于Gulp，Gulp是后起之秀。他们的本质都是通过 JavaScript 语法实现了shell script 命令的一些功能。比如利用jshint插件 实现 JavaScript 代码格式检查这一个功能。早期需要手动在命令行中输入 jshint test.js，而 Grunt 则通过文件 Gruntfile.js 进行配置

　　3、 Gulp吸取了Grunt的优点，拥有更简便的写法，通过流（Stream）的概念来简化多任务之间的配置和输出，让任务更加简洁和容易上手。通过配置gulpfile.js文件来实现。

　　4、webpack是后起之秀，它支持了AMD 和 CommonJS 类型，通过loader 机制也可以使用ES6模块格式。还有强大的 code splitting。webpack 是个十分强大的工具，它正在想一个全能型的构建工具发展。

　　5、gulp和grunt是流管理工具，通过一个个task配置执行用户需要的功能，如格式检验，代码压缩等，值得一提的是，经过这两者处理的代码只是局部变量名被替换简化，整体并没有发生改变，还是你的代码。

  　　而webpack则进行了更彻底的打包处理，更加偏向对模块语法规则进行转换。主要任务是突破浏览器的鸿沟，将原本浏览器不能识别的规范和各种各样的静态文件进行分析，压缩，合并，打包，最后生成浏览器支持的代码，因此，webapck打包过后的代码已经

　　　 不是你写的代码了，或许你再去看，已经看不懂啦

作者：果汁凉茶丶
链接：https://www.jianshu.com/p/fe96491ccf56
來源：简书

 

三、工具选择与自我实践

　　1、查阅相关文档之后，选择gulp作为突破口。首先，gulp配置相对其他两个而言稍显简单。

　　2、插件数量虽然不多，但是在不断丰富并满足基本需求。

四、安装

　　1、首先下载安装node.js，安装步骤不再赘述，百度即可。

　　2、全局安装gulp之后最好再局部安装（即项目所在目录）;安装目录百度即可。

　　3、在根目录下运行npm init 生成package.json文件

　　4、在根目录下新建gulpflie.js

　　5、引入插件，注册插件，使用插件

五、一些零散的笔记

var gulp = require("gulp");
var browserSync = require("browser-sync");
var sass = require("gulp-sass");
gulp.task("browserSync",function(){
    browserSync.init({
        server:"app"
    })
    //
})
gulp.task("sass",function(){
    return gulp.src("app/scss/style.scss")
    .pipe(sass())
    .pipe(gulp.dest("app/css"))
})
gulp.task("watch",function(){
    gulp.watch("app/**/*.scss",["browserSync","sass"])
    gulp.watch("app/**/*.scss").on("change",browserSync.reload);
})

以上是利用sass插件和browser-sync插件制作的编译sass并异步刷新的功能

六、需要注意的地方

　　1、nodejs会自动安装gulp最新版本，但是4.0在语法与3.9一下版本有些不同。  安装自定义版本gulp命令：npm install gulp@3.9

　　2、使用插件之前先使用命令安装插件，然后在gulpfile.js引入。之后再定义任务使用。

七、其他参考

　　https://www.cnblogs.com/Tom-yi/p/8036730.html

八、使用browser-sync做pc移动端调试的时候，按照步骤走到打开localhost:3001的设置页面时，不知道为什么没有找到相对应的开关

　　https://segmentfault.com/q/1010000013649934

　　https://blog.csdn.net/u013063153/article/details/52787421

九、后期完善的gulpfile

//通过browser-sync插件，并通过自带watch插件监听sass编译实现热更新
// var browserSync = require("browser-sync");
// gulp.task("browserSync",function(){
//     browserSync.init({
//         server:"app"
//     })
// })
// gulp.task("watch",function(){
//     gulp.watch("app/**/*.scss",["browserSync","sass"])
//     gulp.watch("app/**/*.scss").on("change",browserSync.reload);
// })

//引入html并刷新
// gulp.task("html",function(){
//     gulp.src("app/*.html");
//         .pipe(webServer.reload())
// })

// --------------------------------------------------------------------分割线----------------------------------------------------------------------
//引入
var gulp = require("gulp");
var sass = require("gulp-sass");
var tinypng_nokey = require('gulp-tinypng-nokey');
var webServer = require('gulp-connect');
var rename = require("gulp-rename");
var plumber = require("gulp-plumber");
//var watch = require('gulp-watch');
//定义任务 控制台执行例如：gulp sass

//编译css、压缩等操作
gulp.task("sass",function(){
    //引入源文件
    return gulp.src("app/**/*.scss")
    //执行sass编译
    .pipe(sass())
    //修改文件路径
    .pipe(rename({
        dirname:""
    }))
    //执行输出
    .pipe(gulp.dest("app/css1"))
    .pipe(webServer.reload())
})

//丑化、压缩js等操作，但我这里因为没处理所以只是简单的复制
gulp.task("js",function(){
    //引入源文件
    return gulp.src("app/**/*.js")
    //修改文件路径
    .pipe(rename({
        dirname:"",
        basename:"main"
    }))
    //执行输出
    .pipe(gulp.dest("app/js1"))
    .pipe(webServer.reload())
})
function handler (err){
    console.log('Less Error!', err.message);
    this.emit('end');
}
//压缩html等操作但我这里因为是测试，所以只是简单的复制没有做处理
gulp.task("html",function(){
    return gulp.src("app/**/*.html")
    .pipe(gulp.dest("app"))
    .on("error",handler)
    .pipe(webServer.reload())
})
//监听
gulp.task("watch",function(){
    gulp.watch("app/**/*.scss",["sass"])
    gulp.watch("app/**/*.js",["js"])
    gulp.watch("app/**/*.html",["html"])
})
gulp.task("connect",function(){
    webServer.server({
        root:"./app",
        port: 80,
        host: 'jiangqi.dev',
        livereload: true,
    });
})
gulp.task("default",["sass","connect","watch"])