前端工具webpack和gulp

来源：互联网发布：竞拍源码编辑：程序博客网时间：2024/06/07 22:29

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

#安装webpacknpm 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');//引入angularconst 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-devnpm 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/'));});

参考

WebPack 简明学习教程

0 0

前端工具webpack和gulp

1.app/index.js

2.index.html

3.修改app/index.js

4.保存依赖包信息

5.编辑webpack.config.js

6.编辑page.html

7.预处理loader

webpack-dev-server开发服务器

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

1.全局安装gulp

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

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

添加一个gulpfile.js的文件

一些常用的gulp插件

参考