技术

gulp任务流案例

微信扫一扫,分享到朋友圈

gulp任务流案例
0 0

处理前台js文件

import gulp from gulp 最基本的包引入

import gulpif from gulp-if  使用gulpif进行判断的包

import concat from gulp-concat 处理文件拼接的包

import webpack from webpack  处理文件打包

import gulpWebpack from webpack-stream  结合基于文件流的webpack打包

import named vinyl-named  文件重命名做标志的包

import livereload from gulp-livereload  用于文件热更新的包,文件修改后自动刷新

import plumber from gulp-plumber  处理文件信息流做管道拼接的包

import rename from gulp-rename  文件重命名的包

import uglify from gulp-gulify  文件压缩的包

import {log,colors} from gulp-uitl    命令行输出的包

import args from ‘./util/yargs.js’ yargs 程序识别命令行操作

gulp.task(‘scripts’,()=>{  //首先创建一个scripts的目录

return gulp.src([‘app/js/index.js’])   //操作的文件是这个文件,打开文件

.pipe(plumber({   //第一节管道上去处理处理常规错误逻辑信息

errorHandle:function(){

}

}))

.pipe(named()) //又放了一截管道: 文件重命名

.pipe(gulpWebpack({   //又放了一截管道: 传过来的文件进行打包编译

module:{//打包编译的时候,遇到js文件,使用babel进行处理

loaders:[{

test:/\.js$/,

loader:’babel’

}]

}

}),null,(err,stats)=>{

log(`Finished ‘${colors.cyan(‘scripts’)}’`,stats.toString({chunks:false}))

})

.pipe(gulp.dest(‘server/public/js’))  //又放了一截管道:编译完之后,把文件放在这个地址下面。

.pipe(rename({  //放在这个地方之后进行备份,然后重命名成min文件

basename:’cp’,

extname:’.min.js’

}))

.pipe(uglify({compress:{properties:false},output:{‘quote_keys’:true}}))  //备份好的文件进行压缩

.pipe(gulp.dest(‘server/public/js’))  //压缩好,放在文件夹下面

.pipi(gulpif(args.watch,liverload()))  //最后看有没有watch配置项,有的话,就进行热更新

})

处理模版文件

import gulp from ‘gulp’  //引入基础gulp包

import gulpif from ‘gulp-if’   //引入gulp判断包

import livereload from ‘gulp-livereload’   //引入热更新操作包

import args from ‘./util/args’  //引入命令配置包

gulp.task(‘pages’,()=>{   //抽创建一个任务

return gulp.src(‘app/**/*.ejs’)  //确定操作那些文件

.pipe(gulp.dest(‘server’))   //先放到对应的server文件夹下面,注意,不带app/

.pipe(gulpif(args.watch,livereload()))   //看看是否有watach,有就热更新

})

处理CSS文件

import gulp from ‘gulp’  //引入基础gulp包

import gulpif from ‘gulp-if’   //引入gulp判断包

import livereload from ‘gulp-livereload’   //引入热更新操作包

import args from ‘./util/args’  //引入命令配置包

gulp.task(‘pages’,()=>{   //抽创建一个任务

return gulp.src(‘app/**/*.css’)  //确定操作那些文件

.pipe(gulp.dest(‘server/public’))   //先放到对应的server文件夹下面,注意,不带app/

.pipe(gulpif(args.watch,livereload()))   //看看是否有watach,有就热更新

})

处理服务器相关脚本

import gulp from ‘gulp’  //引入基础gulp包

import gulpif from ‘gulp-if’   //引入gulp判断包

import liveserver from ‘gulp-live-server’ //引入启动服务器的包

import args from ‘./util/args’  //引入命令配置包

gulp.task(‘server’,(cb)=>{  //启动server服务

if(!args.watch) return cb();   //检测是否处于监听状态,不监听直接返回

var server = liveserver.new([‘–harmony’,’server/bin/www’]);

server.start();  //启动server服务

gulp.watch([‘server/public/**/*.js’,’server/views/**/*.ejs’],function(file){  //检测那些文件

server.notify.apply(server,[file])  //通知给服务器,这些文件发生了变化

})

gulp.watch([‘server/routes/**/*.js’,’server/app.js’],function(file){  //检测服务器上的配置文件

server.start.bind(server){}  //检测的文件发生变化之后,服务器重启

})

})

//串起来所有写好的任务进行自动运行browser.js

import gulp from ‘gulp’

import gulpif from  ‘gulp-if’

import gutil from ‘gulp-util’  //常用gulp工具集合

import args from ‘./util/args’

gulp.task(‘browser’,(cb)=>{  //创建browser任务

if(!args.watch) return cb();

gulp.watch(‘app/**/*.js,[‘scripts’]);   //检测到app下面js文件修改,就发送个scripts去进行操作

gulp.watch(‘app/**/*.ejs,[‘pages’]);

gulp.watch(‘app/**/*.css,[‘css’]);

})

//清空指定空间的任务

import gulp from ‘gulp’

import del from ‘del’

import args from ‘./util/args’;

gulp.task(‘clean’,()=>{

return del([‘server/public/’,’server/views’]);

});

//处理包的顺序问题  //需要安装包

import gulp from ‘gulp’

import gulpSequence from ‘gulp-sequence’

gulp.task(‘build’,gulpSequence(‘clean’,’css’,’pages’,’scripts’,[‘browser’,’server’]))

//默认gulp执行包

import gulp from ‘gulp’

gulp.task(‘default’,[‘build’])

//在外部gulpfile.babel.js中写引入所有需要的包

import requireDir from ‘require-dir’

requireDir(‘./tasks/’);//引入文件夹下所有文件运行

//.babelrc 文件需要进行编译配置

{

“presets”:[“es2015”]  //需要安装babel-preset-es2015  这个包才能把es6向下编译成es5

}

//server/app.js中要在增加接收热更新的设置

app.use(require(‘connect-livereload’)());//这一行是增加的,并且需要引入对应的包connect-livereload

app.use(‘/’,routes);

半拉子前端的自留地,发际线逐渐后移的抠脚大叔!

node.js npm gulp babel webpack简单笔记

上一篇

var let const的区别

下一篇

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

体验小程序

标签地图

分类

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00
      gulp任务流案例

      长按储存图像,分享给朋友

      微信扫一扫

      微信扫一扫