网页切图服务项目

PostCSS 深入学习:Gulp 设置

在上一篇文章中,我们介绍了如何在CodePen和Prepros中使用PostCSS。虽然里面的选项设置可以让你第一时间接触和使用PostCSS,但也有很多PostCSS插件限制你不能使用。这篇教程将告诉你如何在Gulp配置中使用PostCSS插件,而且可以根据你自己需要的去配置所要的插件。这才是真正的进入到PostCSS插件生态系统中。特别声明:如果你从未接触或使用命令来配置Gulp的任务,我建议你在阅读本教程之前先阅读前面我写的系列教程:《网页设计的命令操作》。需要的条件鉴于我们将需要使用Gu

gulp-uglify 压缩 javascript 文件

简介:使用gulp-uglify压缩javascript文件,减小文件大小。1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程1.2、本示例目录结构如下:2、本地安装gulp-uglify2.1、github:https://github.com/terinjokes/gulp-uglify2.2、安装:命令提示符执行 cnpm install gu

gulp-concat 合并 js

简介:使用gulp-concat合并javascript文件,减少网络请求。1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程1.2、本示例目录结构如下:2、本地安装gulp-concat2.1、github:https://github.com/wearefractal/gulp-concat2.2、安装:命令提示符执行 cnpm install

gulp-livereload 使用说明

简介:gulp-livereload拯救F5!当监听文件发生变化时,浏览器自动刷新页面。【事实上也不全是完全刷新,例如修改css的时候,不是整个页面刷新,而是将修改的样式植入浏览器,非常方便。】特别是引用外部资源时,刷新整个页面真是费时费力。0、有更好的方案,浏览器无需安装插件,且可以同时在PC、平板、手机等设备下进项调试,详细请参考这里,当然多学点知识无害↓↓↓↓↓1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件1.1、gulp

gulp-sftp 为什么没有上传任何文件

gulp.task('upload', function() {    return gulp.src( jadeWorkDir + '/**' )     .pipe(sftp({         host: jadeCo

gulp-livereload 与 chrome 插件配合使用

第一步:   配置gulpfile.jsvar gulp = require('gulp'),     livereload = require('gulp-livereload');          gulp.task('reload_page', f

Browsersync + Gulp.js

当您在使用gulp构建您的项目时,您只需要 require Browsersync 模块, 利用API 并进行 选项配置。 以下是一些流行项目中常见的用例, 如 谷歌的网络入门套件 和其他项目。

gulp 常用插件

前段时间折腾Gulp,主要是搜寻一些插件,组合之以优化前端开发流程。这段折腾历程除了达成所愿外,给予最大的收获是:只要你想实现某功能,基本就已有对应插件供使用;所需要做的只是去发现她,外加”临幸”她而已。 比如,伊始觉得使用SublimeText的 SFTP 上传代码到FTP很方便(Ctrl+S),而用gulp就会竟也有对应插件 gulp-sftp :heart_eyes::bl

gulp 使用小结

介绍gulp是一款前端构建工具。安装npm install -g gulp npm install -g gulp-sass gulp-concat gulp-uglify gulp-rename网上到处都是说不要全局安装,每一个项目下面都要自己重新安装一遍,说是什么避免版本不同造成一些问题,我就纳闷了,这玩意儿又不属于我代码的一部分,难道我100个项目要安装100次?有必要么?最坑爹的是文件数量那么多,

gulp-教程之gulp-autoprefixer

gulp-autoprefixer作用:自动添加浏览器前缀。1、本地安装gulp-autoprefixercnpm install gulp-autoprefixer --save-dev说明:--save-dev 保存配置信息至 package.json 的 devDependencies 参数。(命令提示符执行npm install,则会根据package.json下载所有需要的包,npm install --production 则只下载depend

gulp详细入门教程

简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她

gulp 的5个重要的 API

1、srcgulp.src()方法正是用来获取流的,但要注意这个流里的内容不是原始的文件流,而是一个虚拟文件对象流(Vinyl files),这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。其语法为:gulp.src(globs[, options]);globs参数是文件匹配模式(类似正则表达式),用来匹配文件路径(包括文件名),当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时,该参数可以为一个数组;类型为String或 Array。globs的匹配规则请看这