gulp、webpack、grunt

77 阅读 0 评论 51 点赞

我是靠谱客的博主谨慎楼房，最近开发中收集的这篇文章主要介绍gulp、webpack、grunt，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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的文件里

var gulp = require('gulp'),
browserSync = require('browser-sync').create(),
uglify = require('gulp-uglify'), //压缩js代码
minifycss = require('gulp-minify-css'), //压缩css代码
rename = require('gulp-rename'), //重命名
clen = require('gulp-clean'); //清理档案
//静态服务器
gulp.task('server', function() {
browserSync.init({
//服务器配置
server: {
baseDir: "./"
}
});
//监控文件变化,保存时自动刷新浏览器.
gulp.watch("*.html").on('change', browserSync.reload);
gulp.watch("dist/js/*.js", ['js-watch']);
gulp.watch("dist/css/*.css", ['css']);
});
//处理css代码的任务
gulp.task('css',['clean'],function(){
return gulp.src('dist/css/*.css')
.pipe(minifycss())
.pipe(rename('index.min.css'))
.pipe(gulp.dest('src/css'))
.pipe(browserSync.stream()); //css代码变化时刷新的写法1
//pipe(browserSync.reload({stream:true}))//写法2
});
//js代码的处理
gulp.task('js',['clean'],function(){
return gulp.src('dist/js/*.js')
.pipe(uglify())
.pipe(rename('index.min.js'))
.pipe(gulp.dest('src/js'));
});
//监视js代码的变化
gulp.task('js-watch', ['js'], browserSync.reload);
//gulp clean:
gulp.task('clean',function(){
return gulp.src(['src/js','src/css'],{read:false}).pipe(clean());
});
//配置默认的任务
gulp.task('default',['server'],function(done){
done();
});

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']);
};