gulp.js可用于:压缩js,css,html,图片等web资源
安装:
首先安装nodejs:www.nodejs.org
安装gulp:npm install -g gulp
在工程根目录下创建: package.json
运行命令:npm install gulp --save-dev
在package.json,devDependencies中会保存版本信息
gulp常用的插件:
sass的编译(gulp-sass)
自动添加css前缀(gulp-autoprefixer)
压缩css(gulp-minify-css)
压缩html(gulp-minify-html)
js代码校验(gulp-jshint)
合并js文件(gulp-concat)
压缩js代码(gulp-uglify)
压缩图片(gulp-imagemin)
自动刷新页面(gulp-livereload)
图片缓存,只有图片替换了才压缩(gulp-cache)
更改提醒(gulp-notify)
安装插件命令:
npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-minify-html jshint gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev
创建gulpfile.js 编写压缩任务:
【task】这个API用来创建任务,在命令行下可以输入 gulp test 来执行test的任务。
【watch】这个API用来监听任务。
【src】这个API设置需要处理的文件的路径,可以是多个文件以数组的形式[main.scss,vender.scss],也可以是正则表达式/**/*.scss。
【dest】这个API设置生成文件的路径,一个任务可以有多个生成路径,一个可以输出未压缩的版本,另一个可以输出压缩后的版本。