linux使用gulp压缩图片,从零开始用gulp

gulp是基于流的前端构件化工具。目前比较火的前端构建化工具还是挺多的，grunt gulp fis3等等。

这个鬼东西有什么用？请参考https://www.zhihu.com/question/35595198

为什么选择gulp,因为使用非常简单，学习成本低。以后想用别的工具再转去学也不难。

自动化构建工具都没用过的前端，何以谈人生？

以下是正题：

1.要玩gulp,首先得安装node,因为npm跟随node的包安装管理工具。具体下载直接百度nodejs中文网，根据自身的环境(windows linux mac)下载安装包(msi)。直接进行傻瓜式安装。

2.安装完node后开始全局安装gulp,在命令行输入命令,安装成功后就可以在命令行输入gulp相关的命令了，例如gulp -v查看当前版本号。(npm安装不成功建议在命令前加sudo 或将 npm 换 cnpm 再试试)

3.在项目中安装，安装成功后就可以开始写配置文件了。

4.在项目根目录中创建文件  gulpfile.js

以下是简单的gulpfile.js  demo代码

代码这种东西一开始不会写，就先抄，抄着抄着就懂怎么写了。

插件

var paths = ['./css/*.less'];　　//定义一个数组，指定文件路径

//下面开始编写一个任务

//less编译任务

gulp.task('less',function() { //创建一个gulp任务，任务名字是'less'，然后一个回调函数

return gulp.src(paths)　　　　//gulp任务操作的源文件'paths'

.pipe(less()) //执行less编译

.pipe(gulp.dest('./css')); //gulp任务输出的新文件

});

//watch监听任务

gulp.task('watch',function(){ //创建第二个gulp任务，任务名字是‘watch',然后一个回调函数

gulp.watch(paths,['less']); //gulp的watch监听，文件改动后立即重新执行less任务 可参考http://www.gulpjs.com.cn/docs/api/

});

//gulp.watch('default',['less']);

gulp.task('default',['less','watch']);　　//gulp的default任务，相当于glup的执行入口。然后把less任务和watch放进来，该脚本就会执行这两个任务

把以上代码写入gulpfile.js 后保存，然后项目根路径下执行命令

gulp

就开始执行gulp完成你安排的任务。

日常开发中需要gulp做的有很多如合并文件(gulp-concat)压缩(gulp-uglify)

这就需要自己编写task来让gulp来执行。

最后总结一下，写好一个gulpfile.js很简单，结合demo代码和下面五个命令

函数

gulp.run(tasks...)//尽可能多的并行运行多个task 新版本中的gulp中使用run会发出警告，这样的情况下我们可以用start代替

gulp.watch(glob,fn//)当glob内容发生改变时，执行fn

gulp.src(glob)//返回一个可读的stream

gulp.dest(glob)//返回一个可写的stream

需要更多的说明或者操作可以去下面的网站逛一逛

调用

一、压缩css

插件，需npm install --save-dev gulp-minify-css

gulp.task('minifycss',function() { return gulp.src('src/css/*.css') //压缩的文件 .pipe(minifycss()) //执行压缩 .pipe(gulp.dest('dst/css')); //输出文件夹});

二、压缩js

插件，需npm install --save-dev xxxxxx

gulp.task('minifyjs',function() {

文件

.pipe(concat('main.js'))

.pipe(gulp.dest('minified/js')) //输出main.js到文件夹

.pipe(rename({suffix: '.min'})) //rename压缩后的文件名

.pipe(uglify()) //压缩

.pipe(gulp.dest('minified/js')); //输出

});