以下是php直出，需要向后台同学提供html文件的构建方法。调试都是在本地调试的，调试完成后打包生成html交付给后台同学。...*.css', minicss())) .pipe(gulp.dest("dist")); }); //压缩css,生成css版本号 gulp.task('css', function(){...return gulp.src('dist/css/'+name+'/*.css') .pipe(rev()) .pipe(gulp.dest('dist/css/'+name))...(){ return gulp.src('dist/js/'+name+'/*.js') .pipe(rev()) .pipe(gulp.dest('dist/js/'+name))...总结 在思考工作流的时候，思考最多的就是如何在php直出并且由后端同事写模版文件的情况下做好交付html和后期脱离后端同事进行静态文件维护，好像除了用nginx ssi没什么其他好办法再不改模版文件的情况下更换静态文件
gulp.src 找到执行文件 gulp.dest 执行任务的文件去出 gulp.watch 观察文件是否发生变化 4.安装一些常用的压缩包 cnpm install gulp-minify-css...文件 .pipe(gulp.dest("dist")) //文件的去处 }) dist是通过 gulp copyHtml生成的文件夹 常用的代码压缩 var gulp = require('gulp...("copyHtml",function(){ gulp.src("src/*.html") .pipe(gulp.dest("dist")) //把src目录中所有html格式的文件全部合并到....pipe(imagemin()) 图片压缩 .pipe(gulp.dest("dist/images")) //放入到dist目录下面的images文件 }) //js压缩 gulp.task..."src/less/*.less") //手动创建 .pipe(less()) //将less文件编译成css文件 .pipe(cleanCSS()) //压缩css .pipe(gulp.dest
https://blog.csdn.net/j_bleach/article/details/53053500 打包流程简介 本次打包大致过程是checkout出想要打包的git版本（可以是...后面也可以跟某一类型文件，或者直接指定某文件夹。...(config.input.html) .pipe(htmlmin(options)) .pipe(gulp.dest(config.output.dist))//gulp dest是输出...); }); 复制第三方插件 gulp.task('copy', function (done) { return gulp.src(config.input.plugins) .pipe(gulp.dest...打zip包 经过合并压缩等操作之后，项目会自动生成dist目录，dist目录下即为打包生成的各种文件，接下来的目标是将dist目录下的所有文件打成一个zip包，代码如下： gulp.task('zip_new
--save-dev gulp-sequence gulp-sftp：上传本地文件到FTP 个人觉得这个插件太好了。...cssName:'sprite.css' }) ) .pipe( gulp.dest(outPut+'/images') ); }); gulp-tinypng使用熊猫压图 gulp-tinypng...('build')); 这个插件很有作用，它可以用来遍历gulp.src()指定的那些文件；利用这个特性，以及npm下自带的path插件，即可获取到每个文件的文件名；在特定场景需求里，它帮了我很大忙。...gulp.dest('public/bootstrap')); }); gulp.task('coffee', function() { return gulp.src('lib/js/*.coffee...分离出每个共享的管道，也可以让你能够集中地管理，当你的工作流程更改后，你只需要修改一个地方即可。
这里我推荐使用命令行的方式添加组件，可以更好地展示出我们添加的组件需要添加哪些依赖。...(function (item) { gulp.src(item.dist) .pipe(gulp.dest(paths.lib + item.name + "/....pipe(rename({ suffix: '.min' })) .pipe(changed('.')) .pipe(cssmin()) .pipe(gulp.dest...完整的 API 文档，大家可以去官网去详细查看 => https://gulpjs.com/docs/en/api/concepts gulp.src：根据匹配、或是路径加载文件； gulp.dest...因为自己水平也很菜，很多东西并没有很详细的涉及到，可能还需要你在实际使用中进行进一步的探究，毕竟，实践出真知。
/hello.txt') .pipe(rename('gb/goodbye.md')) // 直接修改文件名和路径 .pipe(gulp.dest('..../js/*.js') .pipe(concat('all.js')) // 合并all.js文件 .pipe(gulp.dest('..../js/demo2.js']) .pipe(concat('all.js')) // 按照[]里的顺序合并文件 .pipe(gulp.dest('.....pipe(gulp.dest('dist')); // 再对所有文件操作，包括index.js 压缩 gulp-uglify 描述：压缩js文件大小。...{jpg,png,gif,ico}') .pipe(imagemin()) .pipe(gulp.dest('./dist/img')) gulp-zip 描述：ZIP压缩文件。
3.创建css处理文件任务 主要对css文件进行压缩，然后再将压缩的文件放到指定目录 安装插件 npm install cssnano --save-dev gulpfile.js代码 var gulp.../dest/css/")) done(); }) 4.修改文件名 安装插件 npm install gulp-rename --save-dev gulpfile.js var cssnano.../dest/css/")) done(); }) 5.创建处理js文件的任务 安装插件 npm install gulp-uglify --save-dev gulpfile.js var uglify.../dest/js/")) done(); }) 6.合并多个文件 安装插件 npm install gulp-concat --save-dev gulpfile.js var uglify.../dest/images/")) done(); }); 终端命令;gulp images ?
gulp的环境配置和安装：http://www.cnblogs.com/padding1015/p/7162024.html 这里就补充一篇gulpfile.js的配置，用于自动化编译sass和pug文件用...： 1 var gulp = require('gulp'); 2 var pug = require('gulp-pug'); 3 var sass = require('gulp-sass')...; 4 var rename = require('gulp-rename'); 5 var notify = require('gulp-notify'); 6 var plumber = require...; 27 return path; 28 })) 29 .pipe(pug({ 30 pretty: true 31 })) 32 .pipe(gulp.dest...notify.onError('Error: ')})) 38 .pipe(sass({outputStyle: 'expanded'})) 39 .pipe(gulp.dest
gulp.src告诉Gulp任务，所要使用的文件。gulp.dest`告知当任务完成后，Gulp输出文件的地址。 让我们来尝试构造一个真实的任务，将Sass文件编译成CSS文件。...我们想输出最后的styles.css文件到app/css文件夹，我们就要将其加入到gulp.dest的destination处。...表明，Gulp应该排除这个匹配的特征，当你要在匹配的文件中，排除一个文件，是非常有用的。倘若这样，not-me.scss将被排除出匹配。 4.*.....pipe(gulp.dest('app/css')) }) 其他在app/scss文件夹下找到的Sass文件，将自动被包括到sass任务中。...我们可以使用Gulp复制文件通过gulp.src和gulp.dest，不需要其他插件。
Gulp中提供的方法 gulp.src(): 获取任务要处理的文件 gulp.dest(): 输出文件 gulp.task(): 建立gulp任务 gulp.watch(): 监控文件的变化.../src/css/base.css') //将处理后的文件输出到dist目录 .pipe(gulp.dest('..../src/css/base.css') // 把处理后的文件输出到dist目录 .pipe(gulp.dest('..../src/css/base.css') // 把处理后的文件输出到dist目录 .pipe(gulp.dest('dist/css')); done(); });.../src/fonts/*') .pipe(gulp.dest('.
'), //js压缩 gulp-imagemin //压缩图片 gulp-htmlmin //压缩html gulp-clean //清空文件夹 gulp-rev //更改版本名 md5后缀 gulp-autoprefixer...'), //压缩html clean = require('gulp-clean'), //清空文件夹 rev = require('gulp-rev'), //更改版本名...'); //gulp-rev 的插件，用于html模板更改引用路径 //清空文件夹 gulp.task('clean', function(){ return gulp.src('dist... .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/css')); }); //压缩js gulp.task('js', function...('dist/js')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/js')); }); //压缩image gulp.task
文件处理： 每一个构建任务我们默认定义到 gulpfile.js 文件中，通过执行 gulp --tasks 可以查看到当前所定义的公共任务任务列表，通过执行 gulp 即可执行我们对外暴露的公共任务。...src 函数和 dest 函数： gulp 对外暴露的 src 函数和 dest 函数对应就是我们待处理文件的入口和处理完成后文件的出口。...通过下面的代码指定了要编译的文件是当前目录下 src 内的 js 文件： const { src, dest } = require('gulp'); exports.default = function...通过下面的代码中安装操作 babel 的管道实现语法的转换： const { src, dest } = require('gulp'); const babel = require('gulp-babel...下面的代码中对不需要进行语法转换的文件可以稍后加入任务再统一输入到后面的管道统一处理： const { src, dest } = require('gulp'); const babel = require
你的项目目录关系到你的gulp脚本里的任务路径，我脚本里写的是匹配所有的目录和文件。我简单举个例子：这里js/common里的js文件也会被处理。如果只想处理特定目录的文件，请修改任务里的路径。...} } 编写gulp脚本 新建 gulpfile.js文件,并引入所需模块，这里我把路径统一写在PATHS中。.../node_modules/**']) .pipe(cache(imagemin())) .pipe(gulp.dest(PATHS.DEST)); }); 压缩处理HTML...(PATHS.DEST)); }); 增加版本号 gulp.task('rev', function () { return gulp.src([PATHS.HTML,'!..../node_modules/**']) .pipe(rev()) .pipe(gulp.dest(PATHS.DEST)); }); 同步执行task 因为gulp所有的任务都是异步完成的
在命令行工具中执行gulp任务 （8）Gulp中提供的方法 gulp.src()：获取任务要处理的文件 gulp.dest()：输出文件 gulp.task()：建立gulp任务 gulp.watch(.../src/css/base.css') // 将处理后的文件输出到dist目录 .pipe(gulp.dest('..../src/css/base.css') .pipe(gulp.dest('dist/css')); }); // html任务 // 1.html文件中代码的压缩操作 // 2.抽取html...: true })) .pipe(gulp.dest('dist')); }); // css任务 // 1.less语法转换 // 2.css代码压缩 gulp.task('cssmin.../src/images/*') .pipe(gulp.dest('dist/images')); gulp.src('.
Gulp中提供的方法 gulp.src(): 获取任务要处理的文件 gulp.dest(): 输出文件 gulp.task(): 建立gulp任务 gulp.watch(): 监控文件的变化.../src/css/base.css') //将处理后的文件输出到dist目录 .pipe(gulp.dest('./dist/css')) ; }) ; 可能会出现如下错误： ?.../src/css/base.css') // 把处理后的文件输出到dist目录 .pipe(gulp.dest('..../src/css/base.css') // 把处理后的文件输出到dist目录 .pipe(gulp.dest('dist/css')); done(); });.../src/fonts/*') .pipe(gulp.dest('.
.pipe()通过pipe()去处理找出来的文件，可以理解为管道 .pipe(gulp.dest())处理好的文件放到指定地方 复制html文件 var gulp=require('gulp')...{jpg,png}').pipe(gulp.dest('....('js/*.js').pipe(uglify()).pipe(gulp.dest('dist/js')) }); Css文件压缩 npm install gulp-minify-css --save-dev..., function () { gulp.src('css/*.css') .pipe(cssmin()) .pipe(gulp.dest('dist/css')); }); html文件压缩...', function () { gulp.src('*.html') // 要压缩的html文件 .pipe(minifyHtml()) //压缩 .pipe(gulp.dest('dist/html
const { src, dest } = require('gulp'); const less = require('gulp-less'); const pathDir = (dir) => {...gulpfile.js const { src, dest } = require('gulp'); const image = require('gulp-image'); const path =...// gulpfile.js const { src, dest, series } = require('gulp'); const less = require('gulp-less'); const...在这之前我们在输出dest时候我们都指向了一个具体的文件目录，在src这个api中是创建流，从文件中读取vunyl对象，本身也提供了一个base属性，因此你可以像下面这样写 const { src, dest...,所有的自动化工作流操作都牢牢的掌握在自己手上，你可以用gulp写一些自动化脚本，比如，文件上传，打包，压缩，或者改造传统的前端应用。
/src/style/*.styl') .pipe(stylus()) .pipe(gulp.dest('..../ 写入 .map 文件 .pipe(gulp.dest('public')) .pipe(notify({ message: 'browserify task complete' })); }...) // 监视文件的变化 gulp.task('watch', ['coffee', 'browserify', 'stylus'], function(){ gulp.watch('..../src/style/*.styl') .pipe(stylus()) .pipe(gulp.dest('..../js/*.js') // .pipe(jshint()) // .pipe(jshint.reporter('default')); // }); // 监视文件的变化 gulp.task(
领取专属 10元无门槛券
手把手带您无忧上云
