-
1. 安装gulp : npm install gulp 2. 创建gulp任务管理文件 : gulpfile.js(在此文件中定义gulp所要执行的所有任务) 3. 任何需要gulp做的事情都需要被定义在任务中, 定义任务的gulp api: gulp.task(), 在调用此api之前, 在gulpfile.js中先引用gulp: var gulp = require('gulp'); (commonjs规范, 已通过npm安装gulp, node自动找到gulp模块) 4. 通过gulp.task()定义任务, gulp中默认任务default, 定义默认任务 gulp.task('default', function(){...}). 5. 任务定义完成后, 在命令行执行gulp查看全部
-
gulp中使用browserify 1. 本地安装browserify : npm install browserify (之前全局安装) 2. require('browserify') require('fs') fs是node核心模块之一不需要npm安装 3. gulp.task('default', function(){ browserify() //browserify初始化 .add('js/index.js') //将该js文件作为输入文件输入到browserify中 .bundle() //得到文件内容的流 stream .pipe(fs.createWriteStream('js/main.js')); //传入需要生产文件的路径 })查看全部
-
Gulp--基于流的自动化构建工具。使用了流就可以像管道一样,将一个步骤的处理结果直接输送到下一个步骤,一切数据都保存在内存之中,从而减少IO,提高了构建工具的性能。查看全部
-
browserify().bundle()后的文件内容流不是gulp所能识别的流, gulp没有使用node提供的流作为标准(即bundle后是node标准流) 而是通过vinyl-fs文件系统识别器来识别内容, vinyl adapter for the file system, 以vinyl文件格式(virtual file format)作为标准在vinyl和文件系统中作为桥梁 vinyl-source-stream : 从node stream 得到一个 vinyl stream, 后面的uglify()接受的是一个vinyl stream uglify 要求存入的内容是buffer, 而不是stream; buffer vs stream: stream是一个动态的过程, 数据是一点点流到下一个步骤; 而uglify过程, 牵扯到词法的重构, 如修改变量名, 需要整体文件的内容进行上下文判断, 如果只是文件片段可能出现错误; 所以需要对vinyl-source-stream处理后的vinyl stream进行处理, 使他变成vinyl buffer -- npm安装vinyl-buffer模块查看全部
-
什么是Browserify?
管理前段依赖的工具
可以实现js 的模块化加载
查看全部 -
用module.exports来定义模块,用require加载js模块。这就是CommonJS查看全部
-
var gulp = require('gulp'); gulk.task('default',function(){})查看全部
-
使用browserify-shim 将第三方类库加入main.js中 配置package.json文件查看全部
-
将打包的第三方类库文件称为vendorjs 1. 定义vendorjs的任务 browserify()初始化.require(bower下的第三方库路径, {expose: '暴露接口名称'}).bundle.pipe(fs.createWriteScream('输出文件路径vendor.js')) 2. 命令行运行vendorjs任务 gulp vendorjs 在输出目录中生成vendor.js文件查看全部
-
安装run-sequence : npm install run-sequence, 该模块的作用会根据任务名称参数调用任务, 可以按顺序传入多个task名称 gulp.watch(['assets/js/*.js'], function(){ sequence('main.js'); } ) 第一个参数: 一个 glob 字符串,或者一个包含多个 glob 字符串的数组,用来指定具体监控哪些文件的变动。 第二个参数: 每次变动需要执行的 callback。查看全部
-
gulp-concat多个css变成一个css
.pipe(concat(main.css))
查看全部 -
模块gulp-clean-css
gulp.task('minfy-css',function(){
gulp.src(['assets.css/bootstrap-themen.css', 'assets/css/bootstrap.css','assets/css/index.css']).pipe(cleanCss())
.pipe(gulp.dest('/css'))
})
查看全部 -
* npm i gulp
* 新建gulpfile.js
var gulp=require('gulp')
gulp.task('default',function(){console.log('this is default task')})
* 执行gulp
// this is default task
查看全部 -
xxx.sh脚本文件直接放入命令如:browserify ./index.js -o main.js
执行.sh ./xxx.sh 即可生成main.js
gulp 任务管理器
查看全部
举报
0/150
提交
取消