gulp+webpack配置

Posted 2020-10-26 相心

转自：https://www.jianshu.com/p/2549c793bb27

gulp

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。
gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

**当然个人还是喜欢webpack的模块化优秀

废话不多说现在开始gulp之旅

初始化项目(此处已经认为node环境已经安装)

建立文件夹 名字自己随便取 比如 gulpText，然后输入以下命令

$ cd  gulpText
$ mkdir images    //建立存放图片文件夹
$ mkdir src       //  存放 js 以及css
$ mkdir index.html   //主页
$ mkdir gulpfile.js       //编写gulp 任务文件
$ mkdir mock       //mock数据

然后输入以下命令 然后一路点下去生成json文件

 $npm init

打开json文件看到这样的

 

1474889102536.png

全局安装gulp以便我们运行gulp进行打包等操作

$npm install gulp -g

如果感觉npm安装比较慢可以切换至cnpm下载，代码如下

$npm install cnpm -g

安装gulp包，方便我们引用gulp

$npm install gulp

成功截图

 

1474889517162.png

 

编写gulp任务

引入 gulp

//引入gulp
var gulp  = require(‘gulp‘);

拷贝Index.html

//copyhtml
gulp.task(‘copy-index‘,function () {
    gulp.src(‘./index.html‘)
    .pipe(gulp.dest(‘./build‘));
})

执行命令

  $ gulp copy-index

1474890843877.png](//upload-images.jianshu.io/upload_images/2905209-c00d640651bde279.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

 

1474890828271.png

 

拷贝images

//copy images
gulp.task(‘copy-images‘,function () {
    gulp.src(‘./images**/*‘)
    .pipe(gulp.dest(‘./build/‘));
})

执行命令

  $ gulp copy-iamges

 

1474891076408.png

 

1474891039689.png

css预处理

现在我们在src目录里创建文件styles放我们的scss代码，需要把scss代码编译到/build/prd/styles/下

$ cd src
$ mkdir styles
$ cd styles
$ touch app.scss
$ touch common.scss

app.scss项目代码

@charset "UTF-8";
@import "./common.scss";
body{
    background-color: $base-color;
    color: #000;
    font-size: 20px;
    font-weight: 800;
}
html{
    width: 100%;
    height: 100%;
}
html{
    width: 100%;
    height: 100%;
}
.lsds{
    width: 100px;
    height: 100px;
}

common.scss代码

$base-color:yellow;

安装css预编译包

$ npm install gulp-sass   //sass编辑包
$ npm install gulp-minify-css‘);  //css压缩包

//引入css预处理模块
var  sass= require(‘gulp-sass‘);
//引入css压缩模块
var  minifyCSS  = require(‘gulp-minify-css‘);
//css预处理

var  cssFiles=[
    ‘./src/styles/app.scss‘
];
gulp.task(‘scss‘,function () {
    gulp.src(cssFiles)
    .pipe(sass().on(‘error‘,sass.logError))
    .pipe(minifyCSS())      
    .pipe(gulp.dest(‘./build/prd/styles/‘))
})

编辑scss

$ gulp scss

开启服务

安装server包

 $ npm install gulp-webserver

//引入gulp-webserver 模块
var server = require(‘gulp-webserver‘);
gulp.task(‘server‘,function () {
     gulp.src(‘./‘)
     .pipe(server({
         host:‘127.0.0.1‘,   //ip
         port:80,    //端口
         directoryListing:{
             enable:true,
             path:‘./‘
         },
         livereload:true,
     }));
})

开启服务指令

 $ gulp server

然后就可以访问 127.0.0.1了

添加watch

//侦测文件变化， 执行相应的任务
gulp.task(‘watch‘,function () {
    gulp.watch(‘./index.html‘,[‘copy-index‘]);
    gulp.watch(‘./images/**/*‘,[‘copy-images‘]);
    gulp.watch(‘./src/styles/*.{scss,css}‘,[‘scss‘,‘min‘]);  //去掉min
  //    gulp.watch(‘./src/scripts/*.js‘,[‘packjs‘,‘min‘])  //这行先 在配置js编译后使用的
})
//第一个参数代表监听的文件  第二个参数是执行的任务

//配置default 任务，执行任务队列

gulp.task(‘default‘,[‘watch‘,‘server‘],function () {
    console.log(‘任务队列执行完毕‘);
})

配置webpack

安装模块

$ npm install vinyl-named
$ npm install gulp-webpack
$ npm install gulp-uglify

//引入js 模块化工具gulp-webpack,  获取js文件模块 vinyl-named,js压缩模块
var named = require(‘vinyl-named‘);
var webpack = require(‘gulp-webpack‘);
var uglify = require(‘gulp-uglify‘);


var jsFiles = [
    ‘./src/scripts/app.js‘
];
gulp.task(‘packjs‘,function () {
    gulp.src(jsFiles)
    .pipe(named())
    .pipe(webpack({
        output:{
            filename:‘[name].js‘
        },
        module:{
            loaders:[
                {
                    test:/\.js$/,
                    loader:‘imports?define=>false‘
                }
            ]
        }
    }))
    .pipe(uglify().on(‘error‘,function (err) {
         console.log(‘\x07‘,err.linerNumber,err.message);
         return this.end();
    }))
    .pipe(gulp.dest(‘./build/prd/scripts/‘))
})

mock数据

在服务模块中添加整个服务代码为

gulp.task(‘server‘,function () {
     gulp.src(‘./‘)
     .pipe(server({
         host:‘127.0.0.1‘,
         port:80,
         directoryListing:{
             enable:true,  
             path:‘./‘
         },
         livereload:true,  //热更新
        //  mock 数据
   middleware:function(req,res,next){
         var urlObj =url.parse(req.url,true);   //req.url是整个url  urlObj是请求的信息集合体
         switch(urlObj.pathname){
             case ‘/api/orders‘:
                res.setHeader(‘Comtent-Type‘,‘application/json‘);  // //返回体的格式
               fs.readFile(‘./mock/list.json‘,function(err,data){  //读取文件
                     if(err){
                         res.send(‘读取文件错误‘);      //错误返回                     }
                     res.end(data);   //返回json数据
                 });
                 return;
                 case ‘/api/users‘:
                 return;
                 case ‘/api/cart‘:
                 return;
         }
         next();
     }
     }));
})

版本控制

升级插件

 $ npm install gulp-rev
 $ npm install gulp-rev-collector
 $ npm install gulp-sequence

//引入fs  url模块
var fs = require(‘fs‘);
var url = require(‘url‘);


//引入 rev revCollector 模块  提供控制版本号的功能
var rev = require(‘gulp-rev‘);
var revCollector= require(‘gulp-rev-collector‘);

//引入gulp-sequence模块
var sequence = require(‘gulp-sequence‘);

//版本号控制
var cssDistFile = [
    ‘./build/prd/styles/app.css‘
];
var jsDistFile = [
    ‘./build/prd/scripts/app.js‘
];
gulp.task(‘ver‘,function(){
     gulp.src(cssDistFile)  //执行的文件路径
     .pipe(rev())   //生成版本号
     .pipe(gulp.dest(‘./build/prd/styles/‘))   拷贝了一份app.css
     .pipe(rev.manifest()) //*生成如下的这种格式的json文件{"app.js": "app-8232057589.js"}
     .pipe(gulp.dest(‘./build/ver/styles/‘))  //拷贝这个文件到指定地方
     gulp.src(jsDistFile)
    .pipe(rev())
    .pipe(gulp.dest(‘./build/prd/scripts/‘))
    .pipe(rev.manifest())
    .pipe(gulp.dest(‘./build/ver/scripts/‘))
});
gulp.task(‘html‘,function(){
    gulp.src([‘./build/ver/**/*‘,‘./build/*.*‘])
    .pipe(revCollector())
    .pipe(gulp.dest(‘./build‘));

});
gulp.task(‘min‘,sequence(‘copy-index‘,‘ver‘,‘html‘));  //sequence串行执行 并行使用[]