package.json { "devDependencies": { "gulp": "^3.9.1", "gulp-browserify": "^0.5.1", "gulp-jade...": "^1.1.0" } } gulpfile.js var gulp = require('gulp'), jade = require('gulp-jade'), browserify...= require('gulp-browserify') gulp.task('jade', function () { return gulp.src('src/template/**/*....jade') .pipe(jade()) .pipe(gulp.dest('builds/development')) }) gulp.task('js', function...() { return gulp.src('src/js/main.js') .pipe(browserify({debug: true})) .pipe(gulp.dest
--save-dev //从本地把整个gulp文件夹拉过来 task 创建gulpfile.js文件 var gulp=require('gulp'); gulp.task('hello',....pipe()通过pipe()去处理找出来的文件，可以理解为管道 .pipe(gulp.dest())处理好的文件放到指定地方 复制html文件 var gulp=require('gulp').../xiangmu/dist')); }); 复制img文件 var gulp=require('gulp'); gulp.task('hello', function () { return gulp.src.../xiangmu/dist')); }); 排除其它的文件 var gulp=require('gulp'); gulp.task('hello', function () { return gulp.src...服务中添加livereload:true（启动实时刷新的功能） 在要实现刷新的文件中添加.pipe(connect.reload()) 合并文件 npm install gulp-concat --
linux移动文件命令 mv命令 功能：为文件或目录改名或将文件由一个目录移入另一个目录中。该命令如同DOS下的ren和move的组合。...语法：mv [选项] 源文件或目录 目标文件或目录 说明： 视mv命令中第二个参数类型的不同(是目标文件还是目标目录)，mv命令将文件重命名或将其移至一个新的目录中。...当第二个参数类型是文件时，mv命令完成文件重命名，此时，源文件只能有一个(也可以是源目录名)，它将所给的源文件或目录重命名为给定的目标文件名。...当第二个参数是已存在的目录名称时，源文件或目录参数可以有多个，mv命令将各参数指定的源文件均移至目标目录中。在跨文件系统移动文件时，mv先拷贝，再将原有文件删除，而链至该文件的链接也将丢失。...为防止用户在不经意的情况下用mv命令破坏另一个文件，建议用户在使用mv命令移动文件时，最好使用i选项。 需要注意的是，mv与cp的结果不同。
首先，gulp的源码里没有任何一部分是定义pipe的。 gulp的pipe方法是来自nodejs stream API的。 gulp本身是由一系列vinyl模块组织起来的。...pipe跟他字面意思一样只是一个管道 例如我有一堆文件 var s = gulp.src(["fileA","fileB","fileC"]) src方法实际上是'vinyl-fs'模块的方法,选择一系列文件并创建可读流...返回的是由从这些文件而来的流（stream） 既然是Stream，自然少不了最常用的pipe的方法。...注意的是这个函数只是一个包装，并不是会直接操作文件的。...里的流的file必须是vinyl对象 var File = require("gulp-utils").File //或者 var File = require("vinyl") var myf =
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...(paths.css)) 40 }); 41 42 gulp.task('watch', ['sass'], function () { 43 gulp.watch(paths.pugWatch2..., ['pug']); 44 gulp.watch(paths.sassWatch, ['sass']); 45 }); 46 47 gulp.task('default', ['watch',
gulp $ npm install gulp -g 进入到需要 gulp 管理的项目路径，如 /gulp 再安装一遍 $ npm install gulp --save-dev 安装 gulp 插件...css前缀（`gulp-autoprefixer`） 压缩css（`gulp-minify-css`） js代码校验（`gulp-jshint`） 合并js文件（`gulp-concat`） 压缩js代码...`） 清除文件（`del`） 5....运行 task 任务 $ gulp 监听文档实现实时编译 $ gulp watch gulp 的 API 请查看 gulpfile.js 文件 scss 文件规范以及说明 各个小模块以下划线开头全小写命名...路径配置文件，_mixins.scss 预编译文件，_variables.scss 变量定义文件，font-awesome.scss 模块导入文件 脚本使用说明 基本组件 error.js 用途：低版本浏览器访问限制
Gulp是一个模块化打包工具。 Gulp本身只有几个入口，支持他拥有强大功能的是各种各样的插件。...gulp.src(globs[, options]) 输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。...globs：一种匹配文件的规则。 ---- gulp.dest(path[, options]) 能被 pipe 进来，并且将会写文件。...并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。 文件被写入的路径是以所给的相对路径根据所给的目标目录计算而来。...---- gulp.watch(glob[, opts], tasks) 监视文件，并且可以在文件发生改动时候做一些事情。
1.基本使用 npm i gulp-cli -g npm i gulp -D cnpm i gulp gulp-uglify gulp-concat 2.创建文件gulpfile.js键入如下 const...; function build(done) { gulp.src(['src/test/**/*.js']) //src/js目录下所有js文件....pipe(concat('bundle.min.js'))//压缩成一个文件，不指定则分别压缩 .pipe(uglify()) .pipe(gulp.dest...(build,hello) 上述代码会将src/test里面的所有js文件合并，压缩成一个文件并保存到..../src/*.js', js) //重新加载对应文件 gulp.watch(['./src/*.js','.
运行gulpfile文件时报错 报错内容： TypeError: gulp.on(...).on(...).on(...).on(...)\.start is not a function 问题分析：...也有其他解决方法，详见参考文章2. npm install --save-dev gulp@3.9.1 npm install -g gulp@3.9.1 参考文章： gulp和gulp-cli的区别...Gulp error: gulp.hasTask is not a function Mismatch in gulp local and CLI versions 2. gulp-uglify压缩js...文件时报错之 punc(() 报错内容： gulp SyntaxError: Unexpected token: punc (() 问题分析： 这种大多是js代码中包含ES6语法的函数声明方式。...3. gulp-uglify压缩js文件时报错之 Unexpected token name 报错内容： _Unexpected token name «p», expected punc « 问题分析
中介绍了将Less文件编译成CSS文件的方法，仔细观察可以看到如果按照博客中介绍的方法，在编译多个Less文件或者编译不同文件夹下的Less文件时需要执行多次Less文件编译命令，而使用Gulp可以一次性完成这些操作...Gulp是什么 Gulp是一个可以自动化完成我们开发过程中大量的重复工作的工具，使用Gulp可以自动化的完成如，预处理语言的编译、js文件的压缩、css文件的压缩、html文件的压缩、图片体积优化等工作...npm install --save-dev gulp 7.创建一个Gulp的主文件gulpfile.js，并且在gulpfile.js中添加下面的代码 Gulp主文件用于注册任务 //载入gulp...Gulp的情况下进行的，没有安装Gulp可以看前面的Gulp的安装与使用中的内容 1.创建一个src文件夹，并且在src文件夹下创建一个index.html文件 在Git Bash中执行下面的命令创建一个...的主文件gulpfile.js，并且在gulpfile.js中添加下面的代码 //载入gulp模块 var gulp = require('gulp'); //文件拷贝任务 gulp.task('copy
Linux 移动或复制文件（文件夹） 命令格式： cp -rf /home/backup/default/Public/ Public/ 复制/home/backup/default/Public...文件夹 到当前文件夹下 补充cp该命令的各选项含义如下 – a 该选项通常在拷贝目录时使用。...- i 和f选项相反，在覆盖目标文件之前将给出提示要求用户确认。回答y时目标文件将被覆盖，是交互式拷贝。 ...- p 此时cp除复制源文件的内容外，还将把其修改时间和访问权限也复制到新文件中。 - r 若给出的源文件是一目录文件，此时cp将递归复制该目录下所有的子目录和文件。...此时目标文件必须为一个目录名。
linux 中移动文件 在Linux中移动文件看似比较简单，但是可用的选项却比大多数人想象的要多。...在研究移动文件之前，值得仔细研究一下移动文件系统对象时实际发生的情况。 创建文件后，会将其分配给一个inode ，它是用于数据存储的文件系统中的固定点。...实际上，文件在移动时会保留其权限，因为移动文件不会更改或重新创建它。 文件和目录索引节点从不暗示继承，而是由文件系统本身决定的。...移动文件 要使用mv将文件从一个文件夹移动到另一个文件夹，请记住语法mv 。...基于mtime移动 使用GNU mv ，您可以根据要移动的文件是否比要替换的目标文件新来定义移动动作。
（9）Gulp插件 gulp-htmlmin ：html文件压缩 gulp-csso ：压缩css gulp-babel ：JavaScript语法转化 gulp-less: less语法转化 gulp-uglify...：压缩混淆JavaScript gulp-file-include 公共文件包含 browsersync 浏览器实时同步 6、package.json （1）node_modules文件夹的问题 文件夹以及文件过多过碎...复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错 （2）package.json文件的作用 项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github...（3）项目依赖 在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖 使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies...文件的作用 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题 加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作
gulp是趋势 gulp完全开发指南 => 快来换掉你的Grunt吧 gulp的工作流程：文件流--文件流--文件流......因为grunt操作会创建临时文件，会有频繁的IO操作，而gulp使用的是流操作...//js压缩 npm install --save gulp-concat //文件合并 npm install --save gulp-rename //文件重命名 npm install --save...png-sprite //png合并 npm install --save gulp-htmlmin //压缩html npm install --save gulp-clean // 清空文件夹 npm...install --save browser-sync //文件修改浏览器自动刷新 npm install --save gulp-shell //执行shell命令 npm install --save...q=gulp
在实习的公司做web开发，gulp 是经常用到的，可是我做的不仅仅的前端，还包括后台， 所以将前端文件移至后台这种事当然也需要我做啦，用gulp，但是，文件移至后台目录后，资源文件的路径必须修改， （我做的后台的是用...(options) { return through.obj(function (file, enc, cb) { // 如果文件为空，不做任何操作，转入下一个操作，即下一个...gutil.PluginError(PLUGIN_NAME, 'Streaming not supported')); return cb(); } // 将文件内容转成字符串...var content = file.contents.toString(); //对文件内容处理 content = dosomething(content...那么 replace() 就会执行两次，两次传入的 file 分别是 1.txt和2.txt， 而不是两个文件一起传进来 使用 npm install gulp-url-replace --save-dev
Gulp学习笔记 1. 安装 Gulp.js npm install -g gulp 2....配置 2.1 创建 package.json 文件 npm init 2.2 安装依赖项 npm install --save-dev gulp gulp-util 2.3 安装需要的插件 此处安装两个插件...gulp-uglify 和 gulp-concat，实现对 Javascript 文件压缩和合并，加上 –save-dev 参数会同时添加到包配置文件 package.json，以确保项目所需的依赖包可通过...npm 安装 npm install --save-dev gulp-uglify gulp-concat 2.4 创建配置文件 创建 gulpfile.js 文件 // 定义依赖项和插件 var gulp...('gulp-concat'); // 定义名为 "js" 的任务 gulp.task('js', function(){ gulp.src('.
在复制到package.json文件中后，使用npm install命令，npm会下载devDependencies中对应版本号的依赖文件，这里只是完成了本地的安装，此时如果运行 gulp命令可能会报一些错误...)) .pipe(bs.stream()); }); //监听处理js的文件任务 gulp.task('js',function(){ gulp.src(paths.js+"*.js") .pipe...(uglify()) .pipe(gulp.dest(paths.images_dist)) .pipe(bs.stream()); }); //监听处理图片文件的任务 gulp.task('images...)) .pipe(bs.stream()); }); //舰艇文件修改任务 gulp.task('watch',function(){ gulp.watch(paths.html+"*.html"...下任何一个文件内容，就会看到网页内容的更新
还是那些传统的方式，一个页面从上到下引入几十个「js」文件，里面到处充斥着 jquery 的 DOM 操作，维护起来相当的糟糕，变量与函数之间跨文件引用。...text/javascript" charset="utf-8"> 虽然很难，但是经过一段时间的努力吧，算是有个稳定的版本了，所以在上线之前呢，我们是需要把代码给压缩混淆一下，一来是减少文件的体积...安装 全局安装 gulp npm install --global gulp 作为项目的依赖安装 npm install --save-dev gulp 创建文件 在项目的根目录下，创建名为 gulpfile.js...的文件 var gulp = require('gulp'); gulp.task('default', function() { //需要处理的任务 }); 运行 gulp taskname...压缩html //压缩html gulp.task("minhtml", function () { gulp.src(".
/js/*.js') // * 匹配js文件夹下所有.js格式的文件 gulp.src('....匹配除了index.js之外的所有js文件 gulp.src('..../dist'); // 删除整个dist文件夹 gulp-rename 描述：重命名文件。.../dist')); gulp-filter 描述：在虚拟文件流中过滤文件。....pipe(gulp.dest('dist')); // 再对所有文件操作，包括index.js 压缩 gulp-uglify 描述：压缩js文件大小。
有了gulp-sftp，就能利用watch来监测指定文件变化，自动上传指定内容；So Nice（喜）。...【特别是开发移动端页面时，就能充分体现它的优势。例如兼容性不太好的flex布局。】但是，使用这东西，需要注意的点是，她不能很好的工作，对于已然压缩过的CSS文件。...所以合并出来的文件我们要自行压缩，压缩以后调用 gulp-rev 负责在文件名后追加hash（如果项目使用CDN容易造成缓存的话）。...最后调用gulp-rev-replace 抑或 gulp-rev-collector 负责把最终的文件名替换回HTML中去；看起来是不是有些意思呢？...→ unicorn-d41d8cd98f.css gulp-useref识别的就是build开头的注释，build后面首先跟的是类型扩展名，然后后面的路径就是build区块中的所有文件进行合并后的文件路径
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
