为了账号安全,请及时绑定邮箱和手机立即绑定

前端工具--gulp的使用

标签:
前端工具

全文照抄 猴子猿 http://www.cnblogs.com/giggle/p/5389188.html , 感谢猴子兄让我理解了gulp,之前看视频看的一头雾水。

1.全局安装gulp:目的是在命令行里使用gulp的命令
{
npm install gulp -g
}

2.命令行中cd到项目目录,局部安装gulp(如果不在项目中再次安装会报错,据说这样是为了避免发生版本冲突)
{
npm install gulp
}

3.在项目目录下新建一个gulpfile.js文件(必须这个名字,这个文件算是一个配置文件),编写我们的需求,以便gulp能按着我们的意愿来执行。

4.gulp的每个模块可以完成不同的任务,所以我们经常要将所需模块require到gulpfile.js这个配置文件中(如果执行任务的时候报错找不到某个模块,只要npm install 这个模块到此目录就可以,不用-g)。比如我们要让gulp为我们压缩js文件:
{
//在gulpfile.js中

var gulp = require ('gulp');
var uglify = require('gulp-uglify');
//新建一个压缩任务(名叫comppress,名字随便起),这个任务的作用是帮我们把写好的script文件夹下的所有.js文件压缩并保存到newScript文件夹下(gulp会自动创建newScript文件夹)。
gulp.task('compress',function(){
    gulp.src('script/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('newScript'))
})

}
然后在命令行,cd到项目目录下,执行:gulp compress
就可以看到目录下生成了newScript文件夹,里面的文件也被压缩了。
5.添加一个watch任务,利用gulp监听script文件夹里所有js文件的改动,一旦改动就执行compress任务
{
//gulpfile.js 添加如下任务

gulp.task('watch',function(){
    gulp.watch('script/*.js',['compress']);
})

}

6.添加default任务(default这个名字不能改),使gulp的默认任务就是watch任务
{
//gulpfile.js
gulp.task('default',['watch']);
}
7.上面的watch任务,一旦script文件夹下游一个文件发生改变,整个文件夹的所有js文件都会被压缩,这影响性能。改写watch任务如下:
{
//gulpfile.js

var watchPath = reqire('gulp-watch-path');
gulp.task('watch',function(){
    // gulp.watch('script/*.js',['firstScript']);
    gulp.watch('script/*.js',function(event){
        var paths = watchPath(event, 'script', 'newScript');
        gulp.src(paths.srcPath)
        .pipe(uglify())
        //paths.distDir为目录文件
        .pipe(gulp.dest(paths.distDir))
    })
})

}

8.给压缩后的文件添加min后缀名
{
//gulpfile.js

//引入重命名模块
var rename = reqiure('gulp-rename')

gulp.task('watch',function(){
    gulp.watch('script/*.js',function(event){
        var paths = watchPath(event, 'script', 'newScript');
        gulp.src(paths.srcPath)
        .pipe(uglify())
        //压缩后添加min后缀名。
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(paths.distDir))
    })
})

}

点击查看更多内容
40人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
10
获赞与收藏
260

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消