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前端自动化构建工具:常用插件介绍及使用
- 前端构建系统 Gulp 的使用与常用插件推荐 - 上篇
- 使用gulp时常用的插件介绍及用法
- 前端构建系统 Gulp 的使用与常用插件推荐 - 上篇
- 前端构建系统 Gulp 的使用与常用插件推荐 - 下篇
- 前端构建系统 Gulp 的使用与常用插件推荐 - 下篇
- Eclipse常用插件安装使用
- MyEclipse常用插件使用教程
- Maven常用插件使用说明之deploy
- Maven常用插件配置和使用
- 常用插件的使用—grunt入门指南之三
- Sublime Text3使用及常用插件
- grunt入门指南之三 常用插件的使用
- Linux常用命令及vim的使用、vim常用插件(推荐)
- Sublime Text 2/3安装使用及常用插件
- Sublime Text2常用插件使用
- Hibernate常用的缓存插件及其使用
- Extjs的grid和树以及几种常用的插件使用详解