gulp、webpack、grunt

╰半夏微凉° 2024-04-17 23:40 52阅读 0赞

gulp是基于流的代码构建工具。  
gulp的主要用于:  
搭建web服务器  
使用预处理器Sass，Less  
压缩优化资源，可以压缩JS CSS Html 图片  
自动将更新变化的代码实时显示在浏览器【前端实时化】

使用前先要安装gulp：  
npm install gulp-cli -g：安装 gulp 命令行工具  
npm install gulp -g //全局安装  
npm install gulp –save-dev //本地安装并加入package.json  
检查 gulp 版本：gulp --version

gulp的内置的方法说明：  
gulp.src()：创建一个流，用于从文件系统读取 Vinyl 对象。  
gulp.dest()：创建一个用于将 Vinyl 对象写入到文件系统的流。  
栗子：

const { src, dest } = require('gulp');
    	function copy() {
    	  return src('input/*.js')
    	    .pipe(dest('output/'));
    	}
    	exports.copy = copy;

gulp.task()：创建任务  
gulp.watch():监视文件系统,文件改动时自动处理  
gulp.pipe():管道  
组合任务  
Gulp 提供了两个强大的组合方法： series() 和 parallel()，允许将多个独立的任务组合为一个更大的操作。这两个方法都可以接受任意数目的任务（task）函数或已经组合的操作。series() 和 parallel() 可以互相嵌套至任意深度。

如果需要让任务（task）按顺序执行，请使用 series() 方法。  
对于希望以最大并发来运行的任务（tasks），可以使用 parallel() 方法将它们组合起来。

gulp.task(str,option,fn)  
  str为任务名称,唯一标识任务，option为任务名数组，在此任务执行前先触发的任务，fn为回调函数。  
特别注意option里的任务  
同步:

gulp.task('default', ['clean', 'less', 'images', 'js', 'watch']);

异步：

gulp.task('default', ['clean'], function(){ 
         gulp.start('less', 'images', 'js', 'watch'); 
     });

一般gulp会配置在一个gulpfiles.js的文件里

**webpack** 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

const path = require("path")
    import webpack from 'webpack';
    const HTMLWebpackPlugin = require("html-webpack-plugin")
    module.exports = {
      // 入口: 有并且可以有多个
      entry:{
        // main:["babel-polyfill","./src/main.js"]
        // main:["core-js/fn/promise","./src/main.js"]
        main:["./src/main.js"]
      },
      // 打包环境: 开发 & 生产
      mode:"development",
      // 出口: 有且只能有一个
      output:{
        filename:"[name]-bundle.js",
        path: path.resolve(__dirname,"../dist"),
        publicPath:"/"
      },
      // 本地服务器
      devServer:{
        contentBase:"dist",
        hot:true,
        overlay:true
      },
      // 本地调试工具
      devtool:"source-map",
      module:{
        rules:[
          // js loaders
          {
            test:/\.js$/,
            use:[
              {
                loader:"babel-loader"
              }
            ],
            exclude:/node_modules/
          },
          // css loaders
          {
            test:/\.css$/,
            use:[
              {
                loader:"style-loader"
              },
              {
                loader:"css-loader"
              }
            ]
          },
          // sass loader
          {
            test:/\.sass$/,
            use:[
              {
                loader:"style-loader"
              },
              {
                loader:"css-loader"
              },
              {
                loader:"sass-loader"
              }
            ]
          },
          // stylus loader
          {
            test:/\.styl$/,
            use:[
              {
                loader:"style-loader"
              },
              {
                loader:"css-loader"
              },
              {
                loader:"postcss-loader"
              },
              {
                loader:"stylus-loader"
              }
            ]
          },
          // less loader
          {
            test:/\.less$/,
            use:[
              {
                loader:"style-loader"
              },
              {
                loader:"css-loader"
              },
              {
                loader:"less-loader"
              }
            ]
          },
          // html loaders
          {
            test:/\.html$/,
            use:[
              // {
              //   loader:"file-loader",
              //   options:{
              //     name:"[name].html"
              //   }
              // },
              // {
              //   loader:"extract-loader"
              // },
              {
                loader:"html-loader",
                options:{
                  attrs:["img:src"]
                }
              }
            ]
          },
          // image loader
          {
            test:/\.(jpg|git|png)$/,
            use:[
              {
                loader:"file-loader",
                options:{
                  // name:"images/[name]-[hash:8].[ext]"
                  name:"images/[name].[ext]"
                }
              }
            ]
          }
        ]
      },
      plugins:[
        new webpack.HotModuleReplacementPlugin(),
        new HTMLWebpackPlugin({
          template:"./src/index.html"
        })
      ]
    }

**Grunt** 自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

module.exports = function(grunt) {
    
      grunt.initConfig({
        jshint: {
          files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
          options: {
            globals: {
              jQuery: true
            }
          }
        },
        watch: {
          files: ['<%= jshint.files %>'],
          tasks: ['jshint']
        }
      });
    
      grunt.loadNpmTasks('grunt-contrib-jshint');
      grunt.loadNpmTasks('grunt-contrib-watch');
    
      grunt.registerTask('default', ['jshint']);
    
    };

gulp、webpack、grunt

发表评论取消回复

还没有评论，来说两句吧...

相关阅读