基于Node.js的自动化工具Gulp What is gulp?...因此用gulp编写任务也可看作是用Node.js编写任务。当使用流时，gulp去除了中间文件，只将最后的输出写入磁盘，整个过程因此变得更快。...gulp的使用 1.建立gulpfile.js文件 gulp也需要一个文件作为它的主文件，在gulp中这个文件叫做gulpfile.js。...dist/foo.js')); // 写放文件的api 我们将在本章内容中来给同学们讲解gulp API，其中包括gulp.src()，gulp.task()，gulp.dest()，gulp.watch...].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js 获取流 gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(
toc AngularJS项目中js众多，上线的时候压缩合并下还是很有必要的^_^ 在此之前如果不了解gulp，推荐访问Gulp开发教程（翻译）。...js会破快AngularJS文件所需的依赖注入，以至于无法工作，因此压缩前你需要将代码手动修改为下面的形式： angular.module("MyMod").controller("MyCtrl", [...的插件，因此顺理成章： var gulp = require('gulp'); var ngAnnotate = require('gulp-ng-annotate'); var gutil = require...'); gulp.task('minify', function() { return gulp.src(['js/appService.js','js/app.js']) //注意....pipe(gulp.dest('js/')) });
": "^1.1.0" } } gulpfile.js var gulp = require('gulp'), jade = require('gulp-jade'), browserify....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.../main.js') $ gulp jade [21:35:30] Using gulpfile ~/17lai/frontend-workflow/gulpfile.js [21:35:30] Starting.../gulpfile.js [21:35:56] Starting 'js'... [21:35:56] Finished 'js' after 84 ms gulp API 文档 http://www.gulpjs.com.cn
引言 gulp是用于前端自动化构建的，方便前端进行即时开发的工具 自动化构建所需的插件 在项目路径下使用 npm init初始化之后，将下面需要安装的依赖复制到package.json文件中 "devDependencies.../src/css/', "js":'./src/js/*.js', "images":'./src/images/', "css_dist":'..../dist/css/', "js_dist":'./dist/js/', "images_dist":'....)) .pipe(bs.stream()); }); //监听处理js的文件任务 gulp.task('js',function(){ gulp.src(paths.js+"*.js") .pipe...,['html']); gulp.watch(paths.css+"*.scss",['css']); gulp.watch(paths.js+"*.js",['js']); gulp.watch
---- 安装 Gulp.js Gulp.js 是基于 Node 的构建工具，类似 Grunt, 要使用它，你的机器上需要装有 Node.js。...---- 在前端项目中配置 Gulp.js 要在你的项目中使用 Gulp, 有几个关键的步骤需要完成： 安装两个依赖包 安装你需要的任意插件 创建 gulpfile.js 文件，在其中定义你要运行的任务....pipe(gulp.dest('./js')); 最后，通过 Gulp 的 dest() 方法， "all.js" 被写入到我们指定的目录。整个过程非常直观，易于理解。...我们要做的最后一件事，是指定 Gulp 的默认任务，让它执行我们刚才定义的 "js" 任务。...Gulp 找到 gulpfile.js 文件，加载依赖的插件，启动默认任务，然后执行我们的 "js" 任务, 你可以看到最终结果 image.png Gulp 还提供了一个名为 watch() 的方法，
简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp，使用npm首先得配置node环境 Install npm install gulp-cli -....pipe()通过pipe()去处理找出来的文件，可以理解为管道 .pipe(gulp.dest())处理好的文件放到指定地方 复制html文件 var gulp=require('gulp')...save-dev gulp.task('myjs', function () { return gulp.src(['js/a.js','js/b.js']).pipe(concat(‘ab.js’.../xiangmu/js'); }); Js压缩文件 npm install gulp-uglify --save-dev gulp.task('uglifyjs', function(){ gulp.src...('js/*.js').pipe(uglify()).pipe(gulp.dest('dist/js')) }); Css文件压缩 npm install gulp-minify-css --save-dev
目前做代码压缩合并的工具有很多，诸如gulp，webpack，grunt等等，可以说这些项目构建工具的功能非常之强大：图片压缩、图片转base64、css和js的压缩以及合并，文件的md5重命名 ……。...}) .pipe(clean()); }); /*压缩js文件，并生成md5后缀的js文件*/ gulp.task('compress-js',function (callback)...{ //- 创建一个名为compress-js的task gulp.src(['webContent/js/**/*.js']) //- 需要处理的js文件，...标签和script标签引用的css和js文件名，并把html文件输出到指定的位置*/ gulp.task('rev-html',['compress-css','compress-js'], function...html文件输出的目录 /*修改其它html文件的link标签和script标签引用的css和js文件名，并把html文件输出到指定的位置*/ gulp.src(['rev-css/*
首先，gulp的源码里没有任何一部分是定义pipe的。 gulp的pipe方法是来自nodejs stream API的。 gulp本身是由一系列vinyl模块组织起来的。...pipe跟他字面意思一样只是一个管道 例如我有一堆文件 var s = gulp.src(["fileA","fileB","fileC"]) src方法实际上是'vinyl-fs'模块的方法,选择一系列文件并创建可读流...返回的是由从这些文件而来的流（stream） 既然是Stream，自然少不了最常用的pipe的方法。...这里面的思想跟可以阅读参考资料 http://www.zhangxinxu.com/wordpress/2013/02/js-currying/ http://www.cnblogs.com/kunhu...gulp里的流的file必须是vinyl对象 var File = require("gulp-utils").File //或者 var File = require("vinyl") var myf
结构说明 assets 项目资源目录，dev 开发目录，dist 编译输出目录，gulpfile.js 自动化工具 API gulp 的使用 安装 node 环境 (自行 goole 即可) 全局安装...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代码...运行 task 任务 $ gulp 监听文档实现实时编译 $ gulp watch gulp 的 API 请查看 gulpfile.js 文件 scss 文件规范以及说明 各个小模块以下划线开头全小写命名...的日期范围选择器 modernizr.custom.js 用途：提供过渡动画支持 jQuery 组件 jquery.bootstrap.wizard.js 用途：基于 jQuery 的 Bootstrap
为什么要使用Gulp 在前端开发中通常需要做，预处理语言的编译、js文件的压缩、css文件的压缩、图片的压缩等一系列工作，而使用Gulp可以自动化的完成这些工作，从而提高网站的开发效率，在我的博客使用Less...Gulp是什么 Gulp是一个可以自动化完成我们开发过程中大量的重复工作的工具，使用Gulp可以自动化的完成如，预处理语言的编译、js文件的压缩、css文件的压缩、html文件的压缩、图片体积优化等工作...install --save-dev gulp 7.创建一个Gulp的主文件gulpfile.js，并且在gulpfile.js中添加下面的代码 Gulp主文件用于注册任务 //载入gulp模块 var...页面 3.创建一个Gulp的主文件gulpfile.js，并且在gulpfile.js中添加下面的代码 //载入gulp模块 var gulp...的主文件gulpfile.js，并且在gulpfile.js中添加下面的代码 //载入gulp模块 var gulp = require('gulp'); var less = require('gulp-less
Gulp是一个模块化打包工具。 Gulp本身只有几个入口，支持他拥有强大功能的是各种各样的插件。...下面记录一下Gulp的API以及一些用到的插件。...文件被写入的路径是以所给的相对路径根据所给的目标目录计算而来。类似的，相对路径也可以根据所给的 base 来计算。 请查看上述的 gulp.src 来了解更多信息。...eg: var watcher = gulp.watch('js/**/*.js', ['uglify','reload']); watcher.on('change', function(event)...('js/**/*.js', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running
一般这种情况是因为gulp版本引起的。...也有其他解决方法，详见参考文章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 « 问题分析
/bunld/js/bundle.min.js 运行命令 gulp 返回如下 $ gulp [08:51:09] Using gulpfile ~\Desktop\nodejs\gulp\gulpfile.js...sourcemap保留了之前编译的代码使代码容易调试，当出错时浏览器会通过sorcemap恢复源代码并定位错误 cnpm i gulp-sourcemaps -D const gulp = require...= gulp.series(build,hello) 某js文件 alert("0134256u6i") Datw.style.backgroundColor='red' 我们的代码并没有Text元素...，但打包时不会报错 当html引入打包后的js文件时 图片 图片 直接定位了错误信息，方便调试 不过使用这个功能必须打开谷歌浏览器的Enable Javascript source maps...* 3.压缩 * 4.输出目录 * cnpm i gulp gulp-uglify gulp-concat gulp-rename * sourcemap 保留了之前编译的代码使代码容易调试
gulp是趋势 gulp完全开发指南 => 快来换掉你的Grunt吧 gulp的工作流程：文件流--文件流--文件流......因为grunt操作会创建临时文件，会有频繁的IO操作，而gulp使用的是流操作...因此gulp在效率上确实远胜grunt，并且学习成本不高，在这非常感谢刘剑辛的分享！...{ "name": "gulpjs", "version": "0.0.1", "description": "Gul pcourse by link", "main": "app.js...install --save gulp-ruby-sass //sass npm install --save gulp-jshint //js代码检测 npm install --save gulp-uglify...//js压缩 npm install --save gulp-concat //文件合并 npm install --save gulp-rename //文件重命名 npm install --save
（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...{ "gulp": "^3.9.1“ } } （5）package-lock.json文件的作用 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题 加快下载速度...，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作
2. gulp + browserify /** * File Name: gulpfile.js */ // 引入 gulp var gulp = require('gulp'); //...'); var notify = require('gulp-notify'); // 把src/script下的所有coffee逐个编译为js, 放在temp/script下 gulp.task('...('public')) .pipe(notify({ message: 'browserify task complete' })); }) // 监视文件的变化 gulp.task('watch...')) // .pipe(rename('all.js')) .pipe(gulp.dest('..../js/*.js') // .pipe(jshint()) // .pipe(jshint.reporter('default')); // }); // 监视文件的变化 gulp.task(
说到 gulp 的运作方式，就不得不提到 vinyl 和 Node.js 的 stream。...vinyl vinyl 是 gulp 所使用的虚拟的文件格式，在它的自述文件是这么说的：“当提到文件时你首先想到的是什么？..." > 这样就创建好了一个 gulp 用的文件格式，接下来是 Node.js 的 stream。..."file.js" > 没错，这就是 Vinyl 的文件，gulp 用 stream 的对象模式在传输这些文件，plugin 其实上就是回传一个 Transform 的 stream...这样转来转去的效率太低了。 剩下的部分就是 gulp 处理任务的注册与依赖性的逻辑了，依赖性主要是由 undertaker 处理的，不过我觉得这里没什么特别的东西，所以有兴趣就自己去看看吧。
前言 gulp-file-include是gulp插件,它提供了一个 include 方法让我们可以像后端模板那样把公共部分的页面导入进来，实现 html 复用。...环境准备 gulp-file-include 是gulp的插件，所以需要先安装gulp npm install -g gulp npm install gulp --save-dev npm install...-g 2.安装md插件 > npm install markdown gulpfile.js const fileinclude = require('gulp-file-include'); const...} })) .pipe(gulp.dest('dist/')); }); 执行gulp fileinclude后生成的dist/index.html <!...字段包含从源文档到源根的相对路径（除非上下文选项中已设置该值）。
在实习的公司做web开发，gulp 是经常用到的，可是我做的不仅仅的前端，还包括后台， 所以将前端文件移至后台这种事当然也需要我做啦，用gulp，但是，文件移至后台目录后，资源文件的路径必须修改， （我做的后台的是用...express做的），一时间，没有找到适合的插件，于是我萌生了自己开发一下gulp插件的想法。...注意点 gulp的流处理是逐个处理的 例如 gulp.src('./1.txt,./2.txt') .pipe(replace()) ......public/img/', 'css/': '/node/public/css/', 'js.../': '/node/public/js/', })) .pipe(gulp.dest("..
之前项目中使用的webpack进行前端代码的编译，但一直不太喜欢webpack的那种玩法。...之前就听说过gulp+browserify的组合，这次就尝试使用这个东东重写编译脚本。话不多说，直接上最后的成果。...prepare：这个task最复杂了，主要包括两个部分，一是按页面分别定义了编译各页面的js与css任务。二是编译出引用的第三方公共的js、css、font资源。...html：这个task对html进行处理，这里会对引用的js, css加入version number以避免浏览器缓存。 livereload：这个task用来通知浏览器刷新。...这样一分析，整个gulpfile.js就比较简单了。gulp的用法还是比较简单的，可参考中文文档。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
