您的位置:首页 > 其它

gulp常用插件使用

2016-08-02 17:42 495 查看
//常用插件 官网www.npmjs.com, npm.best; github.com/plus3network/gulp-less
//地址:https://www.npmjs.com/package/gulp-XXX

1.js代码检测  gulp-jshint
2.js压缩       gulp-uglify
3.js合并       gulp-concat
4.重命名        gulp-rename
5.css压缩     gulp-minify-css

//1.Less插件:gulp-less -------------------------------------------------
const less = require('gulp-less');

gulp.task('lessToStyle',function(){
gulp.src('src/**/*.less')
//让less转换为css gulp-less
.pipe(less())//Less插件
.pipe(gulp.dest('dist/'));
}
);

gulp.task('LessWatch',function(){
gulp.watch('src/**/*.less',['lessToStyle']);
});

//2.创建本地服务器,gulp-connect ---------------------------------------------
//
const connect = require('gulp-connect')
gulp.task('serve',function(){
//创建了一个服务器,默认监听8080端口
connect.server({
root:'public',
livereload:true
});
gulp.watch('public/**/*.*',['reload']);
});
//3.实时预览 :gulp-connect--------------------------------------------------
gulp.task('reload',function(){
gulp.src('public/**/*.*')
.pipe(connect.reload());

});

/*4.js语法检查*/
const concat = require('gulp-concat');
const jshint = require('gulp-jshint');

gulp.task('jshint',function(){
return gulp.src('src/javascript/*.js')
//语法检查
.pipe(jshint())
.pipe(jshint.reporter('default'));
})

/*5.压缩,合并js*/
const uglify=require('gulp-uglify');
const rename=require('gulp-rename');

gulp.task('minifyJs',function(){
**//这种写法可以指定js的顺序**
return gulp.src(['src/javascript/main.js','src/javascript/grooming.js','src/javascript/dailyM.js'])
**//5.合并到main.js**
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/javascript'))
**//6.重命名文件**
.pipe(rename({suffix:'.min'}))
**//5.压缩javascript文件**
.pipe(uglify())
//输出
.pipe(gulp.dest('dist/javascript'));
});

//默认命令,在cmd中输入gulp后,执行的就是这个任务(压缩js需要在检查js之后操作)
gulp.task('default',['jshint'],function() {
gulp.start('minifycss','minifyjs');
  });

//4.合并文件
//5.最小化js文件
//6.重命名
//7.最小化css
//8.压缩html文件
//9.最小化图像


参考: http://www.gowhich.com/blog/621
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  gulp