前端工具webpack和gulp

最新推荐文章于 2025-04-01 11:31:28 发布

原创最新推荐文章于 2025-04-01 11:31:28 发布 · 984 阅读

1 ·

CC 4.0 BY-SA版权

node.js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍Webpack和Gulp的基本使用方法，包括安装配置、模块化处理、依赖管理和自动化任务等，帮助开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Webpack以CommonJS规范在本地对js进行模块化处理打包,可以通过不同的loader来对其他格式的文件进行处理.
这里写图片描述

#安装webpack
npm install webpack -g
#自动生成一个package.json文件
npm init
#将webpack增加到package.json文件中
npm install webpack --save-dev
#如果想要安装开发工具
npm install webpack-dev-server --save-dev

1.`app/index.js`

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

2.index.html

<html>
  <head>
    <title>webpack 2 demo</title>
    <script src="js/angular.js"></script>
  </head>
  <body>
    <script src="app/index.js"></script>
  </body>
</html>

项目依赖angular.js,webpack会自动分析依赖，然后编译，这样bundle.js就是你想要的东西了。

3.修改`app/index.js`

const angular = require('angular');//引入angular
const ngModule = angular.module('app',[]);//定义一个angular模块
const _ = require('lodash');

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

4.保存依赖包信息

npm install angular --save-dev
npm install lodash --save-dev

5.编辑`webpack.config.js`

每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js

const path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist')
  }
}

这里写图片描述

6.编辑`page.html`

<html ng-app>
    <head>
    </head>
    <body>
      <script src="dist/bundle.js"></script>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || 'World'}}!
    </body>
</html>

7.预处理loader

npm install babel-core babel-loader --save-dev

const path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist')
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015'
      },
    ]
  }
}

webpack-dev-server开发服务器

webpack-dev-server --progress --color

`Gulp` 就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。

1.全局安装`gulp`

npm install -g gulp

2.作为项目的开发依赖`devDependencies`安装：

npm install gulp --save-dev

gulp.src(globs[, options])
#globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)
gulp.dest(path[, options])
#path为写入文件的路径
gulp.task(name[, deps], fn)
#name 为任务名
#deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。
#fn 为任务函数，我们把任务要执行的代码都写在里面。

3.在项目根目录下创建一个名为 `gulpfile.js` 的文件

添加一个`gulpfile.js`的文件

var gulp = require('gulp');

gulp.task('default',function(){
  gulp.src('js/angular.js')
      .pipe(gulp.dest('js/dist'));

    console.log('hello world');
});

一些常用的`gulp`插件

gulp-rename 重命名
gulp-uglify js文件压缩
gulp-minify-css css文件压缩
gulp-jshint js代码检查

const jshint = require('gulp-jshint');
const gulp   = require('gulp');

gulp.task('lint', function() {
  return gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

gulp-concat 文件合并

var concat = require('gulp-concat');

gulp.task('scripts', function() {
  return gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});