gulp+webpack配置
来源:互联网 发布:武侠之数据悍匪笔趣阁 编辑:程序博客网 时间:2024/05/18 03:35
gulp+webpack配置
首先介绍一下gulp和webpack
gulp
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。
gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。
webpack
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
**当然个人还是喜欢webpack的模块化优秀
废话不多说现在开始gulp之旅
初始化项目(此处已经认为node环境已经安装)
建立文件夹 名字自己随便取 比如 gulpText,然后输入以下命令
$ cd gulpText $ mkdir images //建立存放图片文件夹 $ mkdir src // 存放 js 以及css $ mkdir index.html //主页 $ mkdir gulpfile.js //编写gulp 任务文件 $ mkdir mock //mock数据
然后输入以下命令 然后一路点下去生成json文件
$npm init
打开json文件看到这样的
1474889102536.png
全局安装gulp以便我们运行gulp进行打包等操作
$npm install gulp -g
如果感觉npm安装比较慢可以切换至cnpm下载,代码如下
$npm install cnpm -g
安装gulp包,方便我们引用gulp
$npm install gulp
成功截图
1474889517162.png
编写gulp任务
引入 gulp
//引入gulpvar gulp = require('gulp');
拷贝Index.html
//copyhtmlgulp.task('copy-index',function () { gulp.src('./index.html') .pipe(gulp.dest('./build'));})
执行命令
$ gulp copy-index
1474890843877.png]( http://upload-images.jianshu.io/upload_images/2905209-c00d640651bde279.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )
1474890828271.png
拷贝images
//copy imagesgulp.task('copy-images',function () { gulp.src('./images**/*') .pipe(gulp.dest('./build/'));})
执行命令
$ gulp copy-iamges
1474891076408.png
1474891039689.png
css预处理
现在我们在src目录里创建文件styles放我们的scss代码,需要把scss代码编译到/build/prd/styles/下
$ cd src$ mkdir styles$ cd styles$ touch app.scss$ touch common.scss
app.scss项目代码
@charset "UTF-8";@import "./common.scss";body{ background-color: $base-color; color: #000; font-size: 20px; font-weight: 800;}html{ width: 100%; height: 100%;}html{ width: 100%; height: 100%;}.lsds{ width: 100px; height: 100px;}
common.scss代码
$base-color:yellow;
安装css预编译包
$ npm install gulp-sass //sass编辑包$ npm install gulp-minify-css'); //css压缩包
//引入css预处理模块var sass= require('gulp-sass');//引入css压缩模块var minifyCSS = require('gulp-minify-css');//css预处理var cssFiles=[ './src/styles/app.scss'];gulp.task('scss',function () { gulp.src(cssFiles) .pipe(sass().on('error',sass.logError)) .pipe(minifyCSS()) .pipe(gulp.dest('./build/prd/styles/'))})
编辑scss
$ gulp scss
开启服务
安装server包
$ npm install gulp-webserver
//引入gulp-webserver 模块var server = require('gulp-webserver');gulp.task('server',function () { gulp.src('./') .pipe(server({ host:'127.0.0.1', //ip port:80, //端口 directoryListing:{ enable:true, path:'./' }, livereload:true, }));})
开启服务指令
$ gulp server
然后就可以访问 127.0.0.1了
添加watch
//侦测文件变化, 执行相应的任务gulp.task('watch',function () { gulp.watch('./index.html',['copy-index']); gulp.watch('./images/**/*',['copy-images']); gulp.watch('./src/styles/*.{scss,css}',['scss','min']); //去掉min // gulp.watch('./src/scripts/*.js',['packjs','min']) //这行先 在配置js编译后使用的})//第一个参数代表监听的文件 第二个参数是执行的任务//配置default 任务,执行任务队列gulp.task('default',['watch','server'],function () { console.log('任务队列执行完毕');})
配置webpack
安装模块
$ npm install vinyl-named$ npm install gulp-webpack$ npm install gulp-uglify
//引入js 模块化工具gulp-webpack, 获取js文件模块 vinyl-named,js压缩模块var named = require('vinyl-named');var webpack = require('gulp-webpack');var uglify = require('gulp-uglify');var jsFiles = [ './src/scripts/app.js'];gulp.task('packjs',function () { gulp.src(jsFiles) .pipe(named()) .pipe(webpack({ output:{ filename:'[name].js' }, module:{ loaders:[ { test:/\.js$/, loader:'imports?define=>false' } ] } })) .pipe(uglify().on('error',function (err) { console.log('\x07',err.linerNumber,err.message); return this.end(); })) .pipe(gulp.dest('./build/prd/scripts/'))})
mock数据
在服务模块中添加整个服务代码为
gulp.task('server',function () { gulp.src('./') .pipe(server({ host:'127.0.0.1', port:80, directoryListing:{ enable:true, path:'./' }, livereload:true, //热更新 // mock 数据 middleware:function(req,res,next){ var urlObj =url.parse(req.url,true); //req.url是整个url urlObj是请求的信息集合体 switch(urlObj.pathname){ case '/api/orders': res.setHeader('Comtent-Type','application/json'); // //返回体的格式 fs.readFile('./mock/list.json',function(err,data){ //读取文件 if(err){ res.send('读取文件错误'); //错误返回 } res.end(data); //返回json数据 }); return; case '/api/users': return; case '/api/cart': return; } next(); } }));})
版本控制
升级插件
$ npm install gulp-rev $ npm install gulp-rev-collector $ npm install gulp-sequence
//引入fs url模块var fs = require('fs');var url = require('url');//引入 rev revCollector 模块 提供控制版本号的功能var rev = require('gulp-rev');var revCollector= require('gulp-rev-collector');//引入gulp-sequence模块var sequence = require('gulp-sequence');//版本号控制var cssDistFile = [ './build/prd/styles/app.css'];var jsDistFile = [ './build/prd/scripts/app.js'];gulp.task('ver',function(){ gulp.src(cssDistFile) //执行的文件路径 .pipe(rev()) //生成版本号 .pipe(gulp.dest('./build/prd/styles/')) 拷贝了一份app.css .pipe(rev.manifest()) //*生成如下的这种格式的json文件{"app.js": "app-8232057589.js"} .pipe(gulp.dest('./build/ver/styles/')) //拷贝这个文件到指定地方 gulp.src(jsDistFile) .pipe(rev()) .pipe(gulp.dest('./build/prd/scripts/')) .pipe(rev.manifest()) .pipe(gulp.dest('./build/ver/scripts/'))});gulp.task('html',function(){ gulp.src(['./build/ver/**/*','./build/*.*']) .pipe(revCollector()) .pipe(gulp.dest('./build'));});gulp.task('min',sequence('copy-index','ver','html')); //sequence串行执行 并行使用[]
最后在github上面有源码 有兴趣可以下载看看我的gitHub账号搜 jsochen
- gulp+webpack配置
- gulp+webpack配置
- gulp+webpack
- 利用gulp自动完成配置"吐"给webpack执行
- webpack&gulp集成简介
- webpack gulp for window
- node, webpack,gulp 搜藏
- Webpack、Browserify和Gulp
- webpack和gulp区别
- webpack 与gulp 比较
- gulp与webpack区别
- gulp与webpack对比
- webpack开发工具 (gulp、browserify、webpack)
- webpack和gulp"勾结"初步
- gulp+webpack工具整合简介
- gulp+webpack工具整合简介
- gulp和webpack的区别
- 前端工具webpack和gulp
- cloudstack常见问题处理
- HDU1281 二分匹配
- nullptr 简介
- Ehcache 整合Spring 使用页面、对象缓存
- HDU 3715 Go Deeper 二分 + 2-sat
- gulp+webpack配置
- SylixOS的初探
- 非常经典的一个单轴摆动控制电路
- opencv——直方图均衡化
- Idea2016注册码
- 软工小白的First Blog
- TCP协议
- nodejs开发指南之核心模块
- Java正则表达式匹配