之前说过一个工具是grunt,现在说一说gulp
gulp也是前端自动化的一款工具
注意只有logo是大写的,其他一切都是小写
安装
npm install gulp -g
检测是否安装成功
gulp --version
安装到本地项目
npm install gulp
使用
gulp的用法非常贴切于nodejs,在写任务的时候需要先在项目根目录创建一个gulpfile.js
插件:http://www.gulpjs.com/plugins
具体任务:
压缩js插件:gulp-uglify
引入插件
var gulp=require('gulp');
var uglify=require('gulp-uglify');
2. 编写任务:
gulp.task(任务名,fnCb);
gulp.task('ys',function(){
//源地址 -> 处理 -> 输出
gulp.src()
.pipe(uglify())
.pipe(gulp.dest('dest'))
});
3. 运行
gulp ys
4. 默认任务
gulp.task('default',[任务名]);
var gulp=require('gulp'); var uglify=require('gulp-uglify'); //配置任务 gulp.task('uglify',function(){ //具体任务流程 gulp.src('src/js/index.js') .pipe(uglify()) .pipe(gulp.dest('dest')) }); //默认任务 gulp.task('default',['uglify']);
压缩css 插件 gulp-uglifycss || gulp-cssmin
var gulp=require('gulp'), uglify=require('gulp-uglify'), ugliCss=require('gulp-uglifycss'), cssmin=require('gulp-cssmin'); //配置任务 gulp.task('css',function(){ //具体任务流程 gulp.src('src/css/a.css') .pipe(cssmin()) .pipe(gulp.dest('dest')); }); //默认任务 gulp.task('default',['css']);
压缩图片插件 gulp-imagemin
var gulp=require('gulp'), uglify=require('gulp-uglify'), ugliCss=require('gulp-uglifycss'), cssmin=require('gulp-cssmin'), imagemin=require('gulp-imagemin'); //配置任务 gulp.task('imagemin',function(){ //具体任务流程 gulp.src('src/image/*') .pipe(imagemin()) .pipe(gulp.dest('dest/image')); }); //默认任务 gulp.task('default',['imagemin']);
重命名插件 gulp-rename
var gulp=require('gulp'), uglify=require('gulp-uglify'), ugliCss=require('gulp-uglifycss'), cssmin=require('gulp-cssmin'), imagemin=require('gulp-imagemin'), rename=require('gulp-rename'); //配置任务 gulp.task('uglify:js',function(){ //具体任务流程 gulp.src('src/js/*') .pipe(uglify()) .pipe(rename({ suffix:'.min' })) .pipe(gulp.dest('dest/js')); }); //默认任务 gulp.task('default',['uglify:js']);
文件合并插件 gulp-concat
var gulp=require('gulp'), uglify=require('gulp-uglify'), ugliCss=require('gulp-uglifycss'), cssmin=require('gulp-cssmin'), imagemin=require('gulp-imagemin'), rename=require('gulp-rename'), concat=require('gulp-concat'); //配置任务 gulp.task('concat:css',function(){ //具体任务流程 gulp.src('src/css/*') .pipe(concat('main.css')) .pipe(gulp.dest('dest/css')); }); //默认任务 gulp.task('default',['concat:css']);
监听插件gulp-watch
var gulp=require('gulp'), uglify=require('gulp-uglify'), ugliCss=require('gulp-uglifycss'), cssmin=require('gulp-cssmin'), imagemin=require('gulp-imagemin'), rename=require('gulp-rename'), concat=require('gulp-concat'), watch=require('gulp-watch'); //配置任务 gulp.task('watch:css',function(){ gulp.src('src/css/*.css') .pipe(watch('src/css/*.css')) .pipe(ugliCss()) .pipe(rename({ suffix:'.min' })) .pipe(gulp.dest('dest/css')); }); //默认任务 gulp.task('default',['watch:css']);
补充说明
工程文件:
npm init 初始化一个工程文件
一路回车
npm install gulp --save-dev
npm install gulp-cssmin --save-dev
npm install gulp-uglify --save-dev
npm install gulp-rename --save-dev
npm install gulp-watch --save-dev
下面是一个整体用法
var gulp = require('gulp'), jshint = require("gulp-jshint"), uglify=require('gulp-uglify'), minifyCss = require("gulp-minify-css"), minifyHtml = require("gulp-minify-html"), imagemin = require('gulp-imagemin'), less = require('gulp-less'), livereload = require('gulp-livereload'), pngquant = require('imagemin-pngquant'), //png图片压缩插件 connect = require('gulp-connect'); //js代码检查 gulp.task('jsLint', function () { gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter()); // 输出检查结果 }); //压缩js gulp.task('ysjs',function(){ gulp.src('js/*.js') // 要压缩的js文件 .pipe(uglify()) //使用uglify进行压缩,更多配置请参考: .pipe(gulp.dest('dist/js')); //压缩后的路径 }); //css文件压缩 gulp.task('minify-css', function () { gulp.src('css/*.css') // 要压缩的css文件 .pipe(minifyCss()) //压缩css .pipe(gulp.dest('dist/css')); }); //html文件压缩 gulp.task('minify-html', function () { gulp.src('html/*.html') // 要压缩的html文件 .pipe(minifyHtml()) //压缩 .pipe(gulp.dest('dist/html')); }); //图片压缩 gulp.task('tupian', function () { return gulp.src('images/*') .pipe(imagemin({ progressive: true, use: [pngquant()] //使用pngquant来压缩png图片 })) .pipe(gulp.dest('dist/images')); }); //自动刷新 gulp.task('less', function() { gulp.src('less/*.less') .pipe(less()) .pipe(gulp.dest('css')) .pipe(livereload()); }); //监听 gulp.task('watch', function() { // livereload.listen(); //要在这里调用listen()方法 //gulp.watch('js/*.js', ['jsLint']); gulp.watch('js/*.js', ['ysjs']); gulp.watch('css/*.css', ['minify-css']); gulp.watch('html/*.html', ['minify-html']); }); //默认任务 gulp.task('default',['ysjs','minify-html','minify-css','watch'],function(){ console.log('恭喜你,压缩成功了!'); });
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
评论
景先
回复写的挺完整的