浅谈gulp前端工程化

灰太狼 2022-06-14 01:13 228阅读 0赞

为什么要做前端工程化？  
1，校验无误后，合并压缩多个js文件  
2，对css文件进行编译（各种css框架，如sass less）  
使用工具：  
用git辅助cmd（不用频繁找文件位置了）  
gulp构建工具进行编译（自行安装）  
插件：代码中有标出（自行去下载）  
注意下载插件的方式（例如gulp-jshint）：  
npm install –save-dev jshint gulp-jshint  
![这里写图片描述][SouthEast]

// 引用插件
    var gulp=require('gulp');//引入gulp
    var hint=require("gulp-jshint");//1，校验js
    var concat=require("gulp-concat");//2，连接所有的js到一个包中的插件
    var uglify=require("gulp-uglify");//3，压缩js文件
    
    var sass=require("gulp-sass");//4，sass插件
    
    var browserSync=require("browser-sync").create();//5，引用浏览器服务插件，承担了http-server的功能，启动服务器
    // 引用插件完
    
    gulp.task("default",['script','style'],function(){ //在js css编译后。。。。
        browserSync.init({
            server:{
                baseDir:'./'//定位到当前文件
            }
        })//启动服务器插件
        /* 当文件有任何改动，用监听方法，直接刷新页面就行，不用一直gulp， 还有一种在每个任务里面的最后面加上：.pipe(browserSync.stream()); 改css不用刷新，但是改js需要刷新，html也得刷新，不让html刷新的api是：browserSync.reload(),使用watch方式去执行 */
        gulp.watch(['./style/**/*.scss'],['style']);
        gulp.watch(['./script/**/*.js'],['script']);
    })
    // 编译css任务
    gulp.task("style",function(){ 
        return gulp.src(['./style/**/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest('./dest'))//把正确的sass文件编译后放到编译文件dest中
        .pipe(browserSync.stream());
    })
    // 编译js任务
    gulp.task("script",function(){ 
        return gulp.src(['./script/**/*.js'])//先找到所有js文件（源文件没经过任何处理的）
        .pipe(hint())
        .pipe(hint.reporter("default"))//输出形式，默认default
        .pipe(hint.reporter("fail"))//输出错误并终止程序（校验）
        .pipe(concat('index.js'))//连接文件
        .pipe(uglify())//压缩文件
        .pipe(gulp.dest('./dest'))//把正确的js文件放到编译文件dest中
        .pipe(browserSync.stream());
    })

index.html引用编译后的文件：

<link href="dest/index.css" rel="stylesheet" type="text/css"/>
    
    <script src="dest/index.js"></script>

运行编译过程(git)：  
$ gulp

[SouthEast]: /images/20220614/3c012343cd524f35877d1d636d5d0fad.png