亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

前端工具--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下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消