Gulp-前端进阶A-1

毕业到转行以来有一年时间了，成为一名程序猿也有大半年了，之前在新浪上随便写写简单的学习过程，感觉不够像那么回事，现在接触前端也有一段时间了，也做过几个项目，认识到可以拓展的实在太多了，希望从这里起步，踏踏实实，记录好点点滴滴。------HHL

 

Gulp使用步骤：

　　1 安装node（npm），全局安装，我使用的是windows7

　　2 全局安装gulp，npm install -g gulp

　　3 搭建项目框架结构，建package.json，写上{}

　　　　

　　　　build为转化后存储的文件，src为自己的项目，即来源文件，gulpfile.js为操作代码，package.json为安装gulp及插件的信息

　　4 在项目根目录以--save -dev来安装一堆你要用的，首先npm install --save-dev gulp必须的

　　5 然后各种插件 npm install --save-dev gulp-less，npm install --save-dev gulp-watch......基本看名称就知道插件作用

　　　　gulp-rename：重命名

　　　　gulp-uglify：JS压缩

　　　　gulp-minify-css/html

　　　　gulp-concat：JS合并

　　　　gulp-less/sass

　　　　gulp-imagemin

　　　　还有 browserify，livereload，browser-sync的使用

　　6 API

　　　　gulp.src(globs[,options])：路径(类似正则)，参数：数据流(是吧？stream)

　　　　　　部分：

　　　　　　*：单字符串

　　　　　　**：字符串、分隔符

　　　　　　js/*/.js 匹配js目录及其子目录下所有后缀为.js的文件

　　　　　　*.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件

　　　　　　多种匹配模式下排除：gulp.src(['js/*.js','css/*.css','!reset.css'])，排除reset.css

　　　　gulp.dest(path[,options])：转化存储到

　　　　gulp.task(name[,deps],fun)：deps为先执行的任务，name为任务，在命令行输入：gulp name，就运行了

　　　　gulp.watch(glob[,opts],tasks)：监听文件变化

　　　　.pipe：类似柯理化一样的那种函数连接

　　7 参考文献

　　　　http://www.cnblogs.com/tugenhua0707/p/5562548.html#_labe3

　　　　http://www.w3ctech.com/topic/134

 

　　. plugins

　　　　替代繁琐的(例子)：取代 var imagemin=require('gulp-imagemin');

　　　　用：同样需要安装gulp-imagemin

　　　　　　var gulp = require('gulp'),
　　　　　　这个---gulpLoadPlugins = require('gulp-load-plugins'),
　　　　　　这个---plugins = gulpLoadPlugins();

　　　　　　路径....　　

　　　　　　gulp.task('images',function(){
　　　　　　　　return gulp.src(paths.img + "**/*")  
　　　　　　　　.pipe(plugins.imagemin())
　　　　　　　　.pipe(gulp.dest(paths.build + "/images"));    
　　　　　　});

　　　　图片压缩效果：压缩效果太小，https://tinypng.com/，这个效果超好，可以图片选择这个压缩