gulp的使用教程

来源：互联网发布：中国js 12.7mm狙击步枪编辑：程序博客网时间：2024/05/22 11:30

gulp是一个前端自动化构建工具，通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

全局安装

npm install --global gulp

作为项目的开发依赖(devDependencies)安装

npm install --save-dev gulp

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

var gulp = require('gulp');gulp.task('default', function() {  // 将你的默认的任务代码放在这});

运行 `gulp`

gulp

实验

我们使用gulp-uglify来压缩js文件，减少文件大小

在刚才建立的项目里安装 gulp-uplify 插件

npm install gulp-uglify --save-dev

再安装一个合并文件的插件 gulp-concat

npm install gulp-concat --save-dev

修改上面的 glupfile.js

var gulp = require('gulp'),uglify = require('gulp-uglify'),concat = require('gulp-concat');//建立一个名为jsmin的任务gulp.task('jsmin',function(){// 压缩src目录下(**表示子目录)的所有.js文件，// 压缩test/test.js文件，// 不包括src目录（**子目录）下的test1.js和test2.js// 作为下一个任务的依赖，我们返回这个执行流，这样就可以在本任务执行完后执行下一个任务return gulp.src(['src/**/*.js','test/test.js','!src/**/{test1,test2}.js']) //多个文件以数组形式传入.pipe(uglify()) //使用相应的工具.pipe(gulp.dest('dist/js')) //执行压缩后保存的文件夹});//建立一个名为testConcat的任务,在jsmin任务执行完后执行gulp.task('testConcat',['jsmin'],function(){gulp.src('dist/js/**/*.js').pipe(concat('all.js')) //合并之后的文件名.pipe(gulp.dest('dist/js2')) //合并之后保存的路径})//建立一个默认执行的任务，这个任务顺序执行上面创建的N个任务gulp.task('default',['testConcat'])

命令行里运行 gulp 命令，就发现dist/js2/all.js 合并压缩了之前指定的文件，上面的例子本可以在一个任务里完成，我是为了演示多任务依赖而分成了两个任务。

全局安装Rollup

npm install -g rollup

打包命令

rollup src/index.js -o  bundle.js -f cjs

###javascript 调用方式###

新建package.json文件

npm init

安装依赖

打开package.json文件，增加依赖项

"devDependencies": {    "babel-core": "^6.22.1",    "babel-preset-es2015-rollup": "^3.0.0",    "rollup": "^0.41.4",    "rollup-plugin-babel": "^2.7.1",    "rollup-plugin-commonjs": "^7.0.0",    "rollup-plugin-node-resolve": "^2.0.0",    "rollup-plugin-uglify": "^1.0.1"  }

命令行运行

npm install

编写打包的代码

建一个build.js文件，内容如下

var rollup = require('rollup');var babel = require('rollup-plugin-babel');var uglify = require('rollup-plugin-uglify');var npm = require('rollup-plugin-node-resolve');var commonjs = require('rollup-plugin-commonjs');rollup.rollup({    entry: 'src/index.js', //打包入口文件    plugins: [        npm({ jsnext: true, main: true }),        uglify(), //压缩代码        commonjs(), //支持CommonJS模块语法        babel({  //babel配置            exclude: 'node_modules/**',            presets: [ "es2015-rollup" ]        })    ]}).then(function(bundle) {    bundle.write({     // output format - 'amd', 'cjs', 'es6', 'iife', 'umd'       // amd – 使用像requirejs一样的银木块定义       // cjs – CommonJS，适用于node和browserify / Webpack       // es6 (default) – 保持ES6的格式       // iife – 使用于<script> 标签引用的方式       // umd – 适用于CommonJs和AMD风格通用模式        format: 'cjs',  //指定要打包成什么格式        dest: 'dist/main.js' //编译完的文件需要被存放的路径    });});

打包

node build.js

安装命令

npm install webpack -g

使用webpack

npm init #会生成package.json文件npm install webpack --save-dev #将webpack增加到package.json文件中

配置文件

根目录下新建webpack.config.js

module.exports = {//页面入口文件配置entry:{index:'./src/index.js'},//编译输出配置output:{filename:'bundle.js'}}

根目录下新建 index.html ,内容如下

<!DOCTYPE html><html><head><title></title></head><body><script src="bundle.js"></script></body></html>

命令行运行

webpack

就可以把 src/index.js 的内容打包输出到 bundle.js ，其他主要参数有：

webpack --config xxx.js #使用另一份配置文件来打包webpack --watch  #监听变动并自动打包webpack -p  #压缩混淆脚本webpack -d #生成map映射文件，告知哪些模块被最终打包到哪里了

###安装webpack-dev-server###

在全局环境中安装 webpack-dev-server

npm install webpack-dev-server -g

在项目根目录下执行命令：

webpack-dev-server

打开浏览器 http://localhost:8080/index.html 就可以看到输出了

###安装Babel加载器###

babel可以翻译es6到es5，使用下面命令安装babel-loader

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

配置webpack.config.js,添加babel-loader引导器,在module.exports添加module：

module.exports = {//页面入口文件配置entry:{index:'./src/index.js'},//编译输出配置output:{filename:'bundle.js'},module:{//模块加载器loaders:[{test:/\.js$/,loaders:['babel-loader?presets[]=es2015'],exclude:/node_modules/}]}}

运行 webpack-dev-server 命令发现支持es6了

###CSS加载器###

在webpack里，CSS同样可以模块化，使用import导入，因此我们不再使用 link 标签来引用 CSS，而是通过 webpack 的 style-loader 及 css-loader。前者将 css 文件以

标签插入

头部，后者负责解读、加载 CSS 文件。

安装CSS相关的加载器

npm install style-loader css-loader --save-dev

配置webpack.config.js文件

module:{//模块加载器loaders:[{test:/\.js$/,loaders:['babel-loader?presets[]=es2015'],exclude:/node_modules/},{test:/\.css$/,loaders:['style','css']}]},

###autoprefixer###

我们在写 CSS 时，按 CSS 规范写，构建时利用 autoprefixer 可以输出 -webkit、-moz 这样的浏览器前缀，webpack 同样是通过 loader 提供该功能。

安装 autoprefixer-loader

npm install autoprefixer-loader --save-dev

配置 webpack.config.js

module:{//模块加载器loaders:[{test:/\.js$/,loaders:['babel-loader?presets[]=es2015'],exclude:/node_modules/},{test:/\.css$/,loaders:['style-loader','css-loader','autoprefixer-loader']}]},

重启webpack-dev-server，发现可以为css添加浏览器前缀了。

###代码压缩###

webpack自带了一个压缩插件 UglifyJsPlugin ,只需要在配置文件中引入即可。

plugins:[new webpack.optimize.UglifyJsPlugin({compress:{warnings:false}})]

加入了这个插件后，编译的速度会明显变慢，所有一般只在生产环境中启用。

安装

npm init #生成package.jsonnpm install --save-dev webpack-stream vinyl-named #vinyl-named用来保持输入和输出的文件名相同, 否则会自动生成一个hashnpm install --save-dev gulp #安装gulpnpm install babel-loader babel-core babel-preset-es2015 --save-dev #安装babeltouch gulpfile.js  #创建gulp配置文件touch webpack.config.js #创建webpack配置文件

配置gulpfile.js

var gulp = require('gulp');var webpack = require('webpack-stream');var named = require('vinyl-named');var webpackConfig = require('./webpack.config.js');//定义一个webpack任务gulp.task('webpack',function(){return gulp.src('./src/index.js') //目标文件.pipe(named())  //vinyl-named用来保持输入和输出的文件名相同, 否则会自动生成一个hash..pipe(webpack(webpackConfig)) //调用webpack来处理流.pipe(gulp.dest('./dist/')) //处理完成后保存的目录})//定义一个默认任务gulp.task('default',['webpack']); //定义一个默认gulp任务，让它运行webpack任务

配置webpack.config.js

module.exports = {watch:true,devtool:'source-map',resolve:{extensions:['','.js']},module:{loaders:[{test:/\.js$/,loader:'babel-loader',query:{presets:['es2015']}}]}}

注意：用webpack-stream不需要配置entry和output

运行任务

在src目录下新建index.js主入口文件，内容如下

import {sum,square,variable,MyClass} from './import';console.log(square(5));var cred={    name:'hello world',    enrollmentNo:11115078}var x = new MyClass(cred);console.log(x.getName());

index.js文件引入了import.js的文件，内容如下

var sum = (a, b = 6)=>(a + b);var square = (b)=> {    "use strict";    return b * b;};var variable = 8;class MyClass{    constructor(credentials){        this.name = credentials.name;        this.enrollmentNo = credentials.enrollmentNo    }    getName(){        return this.name;    }}export {sum,square,variable, MyClass};

现在运行：

gulp

gulp已经使用webpack监测了index.js文件的改变，每当index.js有改变的时候，会重新打包生成dist/index.js

0 0

gulp的使用教程

全局安装

作为项目的开发依赖(devDependencies)安装

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

运行 `gulp`

实验

相关资料

全局安装Rollup

打包命令

新建package.json文件

安装依赖

编写打包的代码

打包

相关资料

安装命令

使用webpack

配置文件

相关资料

安装

配置gulpfile.js

配置webpack.config.js

运行任务

gulp的使用教程

全局安装

作为项目的开发依赖(devDependencies)安装

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

运行 gulp

实验

相关资料

全局安装Rollup

打包命令

新建package.json文件

安装依赖

编写打包的代码

打包

相关资料

安装命令

使用webpack

配置文件

相关资料

安装

配置gulpfile.js

配置webpack.config.js

运行任务

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

运行 `gulp`