1.简介
gulp是一款简单快捷的前端构建工具，其使用简单安装方便，主要运用插件实现功能，如：打包js，html，css图片等，还有合并js代码，自动运行刷新界面等
2. 安装
gulp是一款搭载在node的工具，请先行安装node环境，网上有好多教程（我们直接安装运行gulp）
- <code>npm i gulp -g</code> （全局安装） <code>npm i gulp --save-dev</code> (当前文件夹安装并写入package.json文件)
- 命令行输入 <code>gulp -v</code> 查看是否安装成功
3.使用
- 首先需要一个主文件<strong>gulpfile.js</strong>用于定义相关功能和处理方法
- 方法主要有:
1.<code>glup.task()</code>用于创建任务，自定义任务名称
gulp.task(['name1',['name2'], function () {
console.log('aaaaa');
})
2.<code>gulp.src()</code>用于指定处理文件的路径(可用通配符，也可指定多个路径文件)
gulp.src(['src/html/*.html','src/css/*.css'])
3.<code>gulp.pipe()</code>管道输入把前一个输出作为后一个输入
gulp.pipe(less())
4.<code>gulp.dest(url)</code>用于处理task生成文件后的文件路径
gulp.pipe(gulp.dest('src/css'))
5.<code>gulp.watch()</code>用于监听任务的变化，方便管理任务
gulp.task('mywatch', function () {
gulp.watch('src/**/*.less', ['taskless']);
});//用于坚挺src下的所有less文件并执行taskless任务
4. 插件的安装<em>请根据需要选择官网插件</em>
- 如自动刷新页面插件<code>npm i gulp-livereload --save-dev</code>如下会自动刷新界面
var gulp = require('gulp'),
livereload = require('gulp-livereload');
gulp.task('test', function () {
gulp.src(['src/less/*.less','!src/less/extend/{reset,test}.less']) //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('src/css')) //将会在src/css下生成index.css
.pipe(livereload());
});
5.详细实例（gulpfile.js）
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
less = require('gulp-less');//解析less文件
htmlmin = require('gulp-htmlmin');//HTML压缩
//当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumber
notify = require('gulp-notify'),
plumber = require('gulp-plumber');
concat = require('gulp-concat');//合并js文件
livereload = require('gulp-livereload');//刷新页面
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
gulp.src(['src/less/*.less','!src/less/extend/{reset,test}.less']) //该任务针对的文件
.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))//监听 语法错误好像也打包
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('src/css')) //将会在src/css下生成index.css
.pipe(livereload());
});
//打包htmlimn
gulp.task('testHtmlmin', function () {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.src('src/html/*.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('dist/html'));
});
// 打包图片（可以深度压缩但比较耗时在很多情况下我们只修改了某些图片，没有必要压缩所有图片，使用”gulp-cache”只压缩修改的图片，没有修改的图片直接从缓存文件读取）
gulp.task('testImagemin', function () {
gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'));
});
// 合并js文件测试
gulp.task('jsconcat',function () {
gulp.src('src/js/*.js')
.pipe(concat('combine.js'))
.pipe(gulp.dest('dist/js'));
})
// 监听所有的less文件(得先编译一下 然后启动监听)
gulp.task('testWatch', function () {
gulp.watch('src/**/*.less', ['testLess']);
});
gulp.task('default',['jsconcat','testLess', 'testHtmlmin','testImagemin']); //定义默认任务
//gulp.task(name[, deps], fn) 定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径```
>资源来源于网络和自己的理解参考网站
http://www.gulpjs.com.cn/
http://www.ydcss.com/archives/18
网友评论