推荐gulp 构建工具(简单、易用、易学)

原创 Ann大然 随笔 模块化开发 1867阅读 2015-04-07 15:28:06 举报

gulp 的API 文档:https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 的入门教程:http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/

1.为什么要使用gulp 进行构建?
Gulp 是基于Node.js 的前端构建工具,通过Gulp的插件可以实现前端代码的编译(sass,less)、压缩、测试;图片的压缩;浏览器的自动刷新,许多强大的插件可以在[color=rgb(4, 46, 238)]
[/color] 这里查找
Gulp 相比于Grunt 的配置更为简单且容易阅读和维护#####

2.gulp 插件的安装

(1)通过命令安装 gulp $sudo npm install gulp -g (添加-g 是全局安装)

(2)进入项目目录 : 执行$sudo npm install gulp --save-dev (--save-dev 与 -save 的区别自查,--save-dev 是在开发过程中使用的依赖)

3.在项目根目录下创建package.json 文件 通过 $ npm init 创建package.json 配置文件

4.在根目录创建gulpfile.js gulp 相关的命令配置文件
先 看一下gulpfile.js 大体上长什么样子:

推荐gulp构建工具(简单、易用、易学)

在写gulpfile.js 文件之前,我们先看看gulp 的相关的方法很简单就5个常用的:

1. task 方法

gulp.task('command name任务名',function(){});
//这样我们可以直接通过 $ gulp commandname 去执行对应的命令

2. src 方法

gulp.src('文件路径');
//指向要处理的文件的路径 Returns a [color=rgb(65, 131, 196)]stream[/color] of [color=rgb(65, 131, 196)]Vinyl files[/color] that can be [color=rgb(65, 131, 196)]piped[/color] to plugins

3.dest 方法

gulp.dest('处理后文件的存放路径')
//指向处理后的文件路径地址

4.watch 方法

gulp.watch('文件路径/文件',);

//对文件路径下的文件进行监听,如果文件发生了修改则执行对应的任务名命令

通过执行$ gulp watch 执行监听

5. stream 的pipe 方法

gulp.src('要处理的文件')

.pipe('指向要使用的插件对应的方法 这个方法通过查找对应插件的api 获得')

A. 具体的gulp 相关方法的使用,还是需要通过查看api ,具体的gulp 入门教程链接http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/

B.举个例子:比如我们要使用gulp-less 插件,来编译我们的less 文件,并通过gulp-minify-css 插件来压缩编译后的css 文件

var gulp = require('gulp'),

less = require('gulp-less'),//less 编译插件

minifyCss = require('gulp-minify-css')//css 插件

rename = require('gulp-rename');//rename 插件

gulp.task('less',function(){

//创建less 命令对应的任务

####return gulp.src('./app/css/index.less')  // 这里我们改为'./app/css/*.less' 则可以针对css下的所有less 文件执行压缩

.pipe(less())//调用gulp-less 插件

.pipe(minifyCss()) //调用gulp-minify-css 插件

.pipe(rename({suffix:'.min'})) //添加.min 后缀

.pipe(gulp.dest('./app/dist/css')); //压缩后文件的输出路径

            ####//这样最后我们会得到 index.min.css 压缩后的文件

});

gulp.task('default',function(){

//进行default 默认命令的配置 这样我们在命令行输入$ gulp 就默认执行less 命令对应的事件

####gulp.start('less');

});

gulp.watch('./app/cs/index.less',);//监听如果index.less 文件被修改了,则自动去执行less 命令,在命令行通过$ gulp watch 开启监听

下面放一个我的gulpfile.js 文件的具体写法:

[code]var gulp = require('gulp'),
less = require('gulp-less'),
rename = require('gulp-rename'),
minifyCSS = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
path = require('path');

gulp.task('less',function(){
//通过task 这个命令我们可以通过$ gulp less 来执行我们设置的任务
//gulp.src 用于设置需要执行命令的文件的路径 可以是单个文件也可以通过[]写成文件数组的形式,也可以正则
//通过pipe() 把要处理的文件导向插件,通过查找对应插件的api执行对应的命令
return gulp.src('./app/css/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('./app/dist/css'));
});

gulp.task('comprass',function(){
return gulp.src('./app/js/*.js')
.pipe(uglify())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('./app/dist/js'));
});

gulp.task('default',function(){
//设置默认任务 这样我们在命令行输入$ gulp 就分别去执行less comprass 任务了
gulp.start('less','comprass');
});

//通过watch 可以不断监听事件,如果index.less 有所改动会自动执行less
gulp.task('watch',function(){
//监听文件是否修改,以便执行相应的任务
gulp.watch('./app/css/.less',['less']);
gulp.watch('./app/js/
.js',['comprass']);
})[/code]
后记:

当然会有人说,这个压缩css,js 的功能网上一搜随便都能找到,干嘛这么麻烦~我想说的是,学less、sass、gulp 只要很短的时间,可能一开始接受很困难,但是越用会发现越方便,毕竟是个前端还是要多用用新技术的,已经不是石器时代了。

评论 ( 1 )
最新评论