教程 - 前端自动化工具Gulp
死牛胖子
在技术的路上渐行渐远
展开
-
gulp插件(9) - gulp-postcss & autoprefixer(生成CSS前缀)
根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码,不必考虑各浏览器兼容前缀。【特别是开发移动端页面时,就能充分体现它的优势。例如兼容性不太好的flex布局。】1、本地安装gulp-autoprefixer$>cnpm install gulp-autoprefixer --save-dev2、配置gulpfile.jsvar gulp = require('gulp'),原创 2017-02-28 22:47:33 · 1487 阅读 · 0 评论 -
gulp插件(10) - gulp-clean(删除文件及文件夹)
功能说明:删除文件及文件夹,在执行打包的时候,一般都需要先清理目标文件夹,以保证每次打包时,都是最新的文件。原创 2017-03-01 11:46:32 · 9558 阅读 · 0 评论 -
gulp插件(11) - gulp-if(条件判断)
功能说明:为功能执行添加条件判断插件安装$>cnpm install gulp-if --save-dev使用方法开发中如果每次都压缩图片会比较费时,可以设置为发布生产环境时才做压缩,开发环境则不作压缩处理var gulp = require('gulp'), gulpif = require('gulp-if'), imagemin = require('gulp-i原创 2017-03-01 12:48:53 · 4337 阅读 · 0 评论 -
gulp插件(12) - run-sequence(同步执行任务)
功能说明:控制多个任务进行顺序执行或者并行执行插件安装$>cnpm install gulp-run-sequence --save-dev使用方法先执行clean任务,完成之后再并行执行css, js, html, images, less这些任务,完成之后再执行watch任务var gulp = require('gulp') runSequence = requir原创 2017-03-01 12:54:43 · 5788 阅读 · 0 评论 -
gulp插件(13) - gulp-changed(只传递修改过的文件)
插件功能描述默认情况下,每次运行时候所有的文件都会传递并通过整个管道。通过使用 gulp-changed 可以只让更改过的文件传递过管道。这可以大大加快连续多次的运行。插件安装$>cnpm install gulp-changed --save-dev使用方法changed需要放在rename方法后面var gulp = require('gulp'), uglify原创 2017-03-22 05:09:28 · 1613 阅读 · 0 评论 -
gulp插件(14) - require-dir(分离任务到多个文件中)
功能说明: 对gulpfile进行分文件处理插件安装$>cnpm install require-dir --save-dev使用方法var requireDir = require('require-dir');requireDir('./gulp/tasks', { recurse: true });gulp就会自去去查找./gulp/tasks目录下的所有task,默认会运行default原创 2017-03-01 20:13:28 · 1513 阅读 · 0 评论 -
gulp实战(3) - 自动化打包HTML文件(完整版)
原码目录:src 打包目录:build 目标:src 中的 html 文件是未压缩的,打包至 build 目录后,生成压缩后的文件,名字与之前保持一致,html中的 js 及 css 需要同时被压缩分析: 1. 打包时,build目录中可能已经存在上一次打包生成的旧文件,所以每次打包都应该先清理掉。 2. 打包时需要执行压缩操作 3. 打包后,每次修改 src 目录下的 html 文件原创 2017-10-25 15:38:27 · 2876 阅读 · 0 评论 -
gulp实战(4) - 自动化打包图片(完整版)
原码目录:src 打包目录:build 目标:src 中的图片文件是未压缩的,打包至 build 目录后,生成压缩后的文件,名字与之前保持一致分析: 1. 打包时,build目录中可能已经存在上一次打包生成的旧文件,所以每次打包都应该先清理掉。 2. 打包时需要执行压缩操作 3. 打包后,每次修改 src 目录下的图片,应该即时重新打包 4. 打包时的执行顺序为:清理 -> 打包 -原创 2017-10-25 15:39:38 · 1573 阅读 · 0 评论 -
gulp插件(15) - browser-sync(同步更新浏览器)
功能说明:同步浏览器,具体可点击参考插件安装$>cnpm install browser-sync --save-dev使用方法var gulp = require('gulp'), browserSync = require('browser-sync').create();gulp.task('browser', function() { browserSyn原创 2017-03-01 17:41:50 · 430 阅读 · 0 评论 -
gulp实战(5) - 项目整体自动化打包并同步浏览器
本文志在演示项目整体打包过程,而并没有将项目中的文件进行压缩或其它处理,各个文件类型的处理过程可以参考前四章gulp实战(1) - 自动化打包JS文件(完整版) gulp实战(2) - 自动化打包CSS文件(完整版) gulp实战(3) - 自动化打包HTML文件(完整版) gulp实战(4) - 自动化打包图片(完整版) var gulp = require('gu原创 2017-10-25 16:29:24 · 570 阅读 · 0 评论 -
gulp进阶(1) - 从命令行传递参数
var gulp = require('gulp');var gulpif = require('gulp-if');var uglify = require('gulp-uglify');var minimist = require('minimist');var knownOptions = { string: 'env', default: { env: process.env.N原创 2017-03-22 05:26:05 · 5244 阅读 · 0 评论 -
gulp插件(8) - gulp-sourcemaps(生成sourcemap)
功能介绍:生成sourcemap文件插件安装$>cnpm install gulp-sourcemaps --save-dev使用方法var gulp = require('gulp'), uglify = require('gulp-uglify'), concat = require('gulp-concat'), sourcemaps原创 2017-03-01 15:45:19 · 6867 阅读 · 0 评论 -
gulp插件(7) - gulp-concat(文件合并)
功能说明:合并javascript文件,减少网络请求。1、本地安装gulp-concat$>cnpm install gulp-concat --save-dev2、配置gulpfile.jsvar gulp = require('gulp'), concat = require('gulp-concat');gulp.task('testConcat', function () {原创 2017-02-28 23:18:50 · 1303 阅读 · 0 评论 -
gulp插件(6) - gulp-rename(文件更名)
功能说明:修改文件名,例如将demo.css修改为demo.min.css,一般配合gulp-minify-css/gulp-uglify压缩插件一起使用插件安装$>cnpm install gulp-rename --save-dev使用方法CSS压缩后进行文件更名,同时进行sourcemap及autoprefixer的自动生成var gulp = require('gulp'), so原创 2017-03-01 12:00:16 · 10765 阅读 · 0 评论 -
gulp入门(15)- gulp-rev-append
插件功能描述使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存。插件安装$>cnpm install gulp-rev-append --save-dev使用方法gulp-rev-append 插件将通过正则(?:href|src)=”(.)[?]rev=(.)[“]查找并给指定链接填加版本号(默认根据文件MD5生成,因此文件未发生改变,此版本号将不会变)html文件<!do原创 2017-03-22 04:47:12 · 740 阅读 · 0 评论 -
gulp入门(1) - 安装篇
简介:gulp 是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript / coffee / sass / less / html / image / css原创 2017-02-28 15:05:19 · 546 阅读 · 0 评论 -
gulp实战(1) - 自动化打包JS文件(完整版)
1. 打包时,build目录中可能已经存在上一次打包生成的旧文件,所以每次打包都应该先清理掉。2. 打包时需要执行压缩操作3. 打包时需要执行文件更名操作,比如:app.js 压缩后的文件名应该为 app.min.js4. 打包后,每次修改 src 目录下的 JS 文件,应该即时将修改部分重新打包5. 打包时的执行顺序为:清理 -> 打包 -> 监控修改,而且后一步必须在前一步操作完成后才可以执行。原创 2017-10-24 20:41:25 · 2995 阅读 · 0 评论 -
gulp实战(2) - 自动化打包CSS文件(完整版)
1. 打包时,build目录中可能已经存在上一次打包生成的旧文件,所以每次打包都应该先清理掉。 2. 打包时需要执行压缩操作 3. 打包时需要执行文件更名操作,比如:app.css 压缩后的文件名应该为 app.min.css 4. 打包后,每次修改 src 目录下的 CSS 文件,应该即时将修改部分重新打包 5. 打包时的执行顺序为:清理 -> 打包 -> 监控修改,而且后一步必须在前一步操作完成后才可以原创 2017-10-25 02:59:56 · 1761 阅读 · 0 评论 -
gulp入门(3) - 方法篇
gulp 借鉴了 Unix 操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入gulp.src();gulp.dest();gulp.watch();原创 2017-10-24 13:39:47 · 371 阅读 · 0 评论 -
gulp入门(2) - 任务篇
定义一个任务格式gulp.task("<taskname>"[, deps], fn);taskname: 任务名称,必须,这是一个任务的标识,不能与其它任务名称重名,任务名不能有空格deps: 当前任务依赖的任务,被依赖的任务将先于当前任务被执行fn: 任务执行函数,当前任务的操作主体都写在这个函数里例1:一次性依赖多个任务任务ex1依赖任务ex1_one、ex1_two任务执行流程为 ex1_o原创 2017-10-23 18:45:13 · 371 阅读 · 0 评论 -
gulp插件(1) - gulp-uglify(压缩JS文件)
gulp-uglify插件用于JS文件压缩原创 2017-02-28 22:20:21 · 1932 阅读 · 0 评论 -
gulp插件(2) - gulp-clean-css(压缩CSS文件)
功能说明:压缩css文件,并给引用URL添加版本号避免缓存,gulp-minify-css已废弃,使用gulp-clean-css,用法一致1、本地安装gulp-minify-css$>cnpm install gulp-minify-css --save-dev2、配置gulpfile.jsvar gulp = require('gulp'), cssmin = require('gul原创 2017-02-28 22:37:54 · 1846 阅读 · 0 评论 -
gulp插件(4) - gulp-imagemin(压缩图片)
功能说明:压缩图片文件(包括PNG、JPEG、GIF和SVG图片)1、本地安装gulp-imagemin$>cnpm install gulp-imagemin --save-dev2、配置gulpfile.jsvar gulp = require('gulp'), imagemin = require('gulp-imagemin');gulp.task('testImagemin',原创 2017-02-28 23:14:15 · 2413 阅读 · 0 评论 -
gulp插件(3) - gulp-htmlmin(压缩HTML文件)
功能说明:压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作1、本地安装gulp-htmlmin$>cnpm install gulp-htmlmin --save-dev2、配置gulpfile.jsvar gulp = require('gulp'), htmlmin = require('gulp-htmlmin');gulp.task('原创 2017-02-28 23:08:02 · 1061 阅读 · 0 评论 -
gulp插件(5) - gulp-less(编译less文件)
功能说明:将less文件编译成css,当有less文件发生改变自动编译less,并保证less语法错误或出现异常时能正常工作并提示错误信息。1、本地安装gulp-less$>cnpm install gulp-less --save-dev2、配置gulpfile.jsvar gulp = require('gulp'), less = require('gulp-less');gulp.原创 2017-02-28 22:59:51 · 563 阅读 · 0 评论 -
gulp进阶(2) - 使用外部配置文件
这有很多好处,因为它能让任务更加符合 DRY 原则config.json{ "desktop" : { "src" : [ "dev/desktop/js/**/*.js", "!dev/desktop/js/vendor/**" ], "dest" : "build/desktop/js" }, "mobile" : { "src原创 2017-03-22 05:48:08 · 520 阅读 · 0 评论