记第一次使用gulp
最近接触了一下gulp，入门还是比较简单的，有兴趣的同学可以了解下~
gulp，和我们项目使用的FIS一样，是自动化构建工具的一种，帮助我们处理一些重复，繁琐的事情，比如压缩，合并，刷新页面等等，有利于提高我们的工作效率，也会避免一些由于我人工手动去做出现的错误。下面做个简单的介绍。
1、全局安装gulp(都懂的，先要安装node)
npm install -g gulp
如果安装比较慢可以使用淘宝NPM镜像 ，如 npm install -g gulp --registry=https://registry.npm.taobao.org
2、创建配置文件package.json
进入项目目录，打开命令提示符执行 npm init 命令 ，之后会引导你创建，然后项目下面就会多了一个package.json文件。
3、在本地项目根目录再安装一遍
npm install gulp --save-dev
--save表示将配置信息保存到package.json文件
-dev表示将信息保存至package.json的devDependencies节点，比如安装了什么插件，也会记录在这里。
安装之后目录下会多了个node_modules文件夹。在本地项目再安装一遍gulp，这里相信新手也许会疑惑为什么这样做，每个项目都这样做？岂不是很麻烦？后来也查了一些资料，不过还不太明白，所以这里就先不妄下结论了，相信会有解决方案。
4、安装项目所需插件
npm install gulp-less gulp-uglify browser-sync gulp-imagemin gulp-minify-css gulp-concat --save-dev
插件功能分别为编译less，压缩js、页面自动刷新、压缩图片、压缩css、合并。本文小例暂时用到这些。
5、新建gulpfile配置文件，类似于我们项目使用的FIS的 fis-conf.js配置文件
//首先require相关模块
var gulp = require('gulp'),
less = require('gulp-less'),//编译less
uglify = require("gulp-uglify"),//压缩js
browserSync = require('browser-sync'),//自动刷新
imagemin = require('gulp-imagemin'),//压缩图片
minifyCss = require('gulp-minify-css'),//压缩css
concat = require('gulp-concat');//文件合并
// 编译less
gulp.task('less',function(){ //这里的less是自定义任务名称
gulp.src('src/css/*.less')// 要处理的less
.pipe(less())//编译less
.pipe(minifyCss())//压缩css
.pipe(gulp.dest('dist/less'));//文件输出路径
})
// 压缩css
gulp.task('minifyCss',function(){
gulp.src('src/css/*.css')
.pipe(minifyCss())
.pipe(gulp.dest('dist/css'));
})
// 压缩js
gulp.task('minifyJs', function() {
gulp.src('src/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
// 合并、压缩lib文件夹下的js
gulp.task('concatJs',function() {
gulp.src('src/js/lib/*.js')
.pipe(concat('lib.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js/lib'))
});
// 压缩图片
gulp.task('img', function() {
gulp.src('src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'))
})
// 实时自动刷新页面，执行后自动打开src下的index.html,默认3000端口
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: 'src/'
}
});
//监听src文件夹下的所有文件变化，实时刷新页面
gulp.watch("src/**/*.*").on("change",browserSync.reload);
});
gulp.task('default', ['minifyCss','less','minifyJs','img','browser-sync','concatJs']);
执行命令gulp就可以运行所有任务了。gulp的task默认是异步运行的，所以这里的任务会同时执行。若是想单独执行某个任务，执行命令gulp 任务名称 即可，如gulp minifyCss;如果有任务先后执行的需求，需要另外做处理。
项目目录结构如下，src文件夹下存放html文件和资源文件
src
|--css
|--img
|--js
| |--app
| |--common
| |--lib
|--index.html
最近事情也比较多，没来得及好好整理和总结，有些知识点没应用上，这里就先这样吧...
手机阅读请扫描下方二维码：
上一篇：即时监听输入框值的变化
下一篇：记使用新模板语言踩的坑
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
12345678
12345678
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1