为什么80%的码农都做不了架构师?>>>
gulp是前端中对代码进行构建的工具,是自动化项目的构建利器。不仅可以对网站资源进行优化,而且在开发过程中,很多重复的代码能够使用正确的工具自动完成。
使用方式为在装有nodejs和npm的环境下,先全局安装gulp,后在项目目录下,局部安装gulp和需要使用的插件,我这里以插件gulp-less为例;
安装之后,在根目录下新建gulpfile.js,设置配置信息。具体代码如下:
//gulp配置文件
//导入工具包require('node_modules'里对应模块)
var gulp = require('gulp'),//本地安装gulp所用到的地方
less = require('gulp-less');
//定义一个testLess任务(自定义任务名称)
gulp.task('testLess',function(){
gulp.src('src/less/index.less')//该任务针对的文件
.pipe(less())//该任务调用的模块
.pipe(gulp.dest('src/css'));//将会在src/css目录下生成index.css
});
gulp.task('default',['testLess','elseTask']);//定义默认任务elseTask为其他任务,该示例没有定义elseTask任务
//gulp.task(name[,deps],fn)定义任务 name:定义任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[,options])执行任务处理的文件 globs:处理的文件路径
//gulp.dest(path[,opions]处理后完成的路径
/* gulp.task('testLess', function () {
gulp.src('src/less/index.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('src/css')); //将会在src/css目录下生成index.css
});
可以简写为:
gulp.task('testLess', function (){
return pipe([
gulp.src('src/less/index.less')
,less()
, gulp.dest('src/css')
])
});
通过npm install gulp-pipe --save 可是实现pipe()d的省略 */
//如何理解gulp中的pipe()?
//按照字面的意思,就是管道,gulp依靠管道来传输待处理的数据流,可
//写的数据附着在可读数据流中,它自动转换成流动模式从而被传送,当到达目的地时候,可写数据流不会被可读数据流淹没;