最新消息:欢迎加入小松的QQ群一起讨论一起学习,又一个双十一,剁手快乐

gulp 菜鸟实例分析

前端技术 406浏览 0评论

之前一段时间有用Laravel来做一些系统,但是对于gulp的知识点还是不清楚,这个主意是前端方面的知识,现在花时间来学习一下

安装插件

npm install --global gulp
npm install gulp
npm install gulp-uglify
npm install gulp-concat

gulp实例分析

// 定义依赖项和插件
var gulp=require('gulp'),
    gutil=require('gulp-util'),
    uglify=require('gulp-uglify'),
    concat=require('gulp-concat');
 
// 定义名为 "js" 的任务
gulp.task('js', function(){
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./js'));
});
 
// 定义默认任务
gulp.task('default', ['js']);

新建gulpfile.js,复制上面的内容到gulpfile.js

var gulp=require('gulp'),
    uglify=require('gulp-uglify'),
    concat=require('gulp-concat');

加载要执行功能的插件

gulp.task('js', function() {
});

gulp.task(name, callback),相当于定义了执行具体内容的方法,上面代码的意思是定义了js的一个方法

gulp.src('./js/*.js')

加载一个文件,上面的*是一个通配符,表示所有js的文件,并将它们转换为可以传递给插件进行处理的“流”

.pipe(uglify())

pipe() 方法获取刚才通过 src() 方法获得并传递过来的“流”,并将其传递给指定的插件,有没有像jquery的写法,具体的功能是压缩文件

.pipe(concat('all.js'))

把所以的js文件合并成一个all.js

.pipe(gulp.dest('./js'));

把上面合并的all.js保存到js的目录里

gulp.task('default', ['js']);

执行默认的任务,相当于调用了上面定义的js的方法

执行gulp

执行一次所有注册的任务

gulp

QQ截图20160222143323

 

QQ交流群:136351212

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» gulp 菜鸟实例分析
本文链接地址:https://www.phpsong.com/2183.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!