A、CSS压缩
1、安装Nodejs
2、全局安装gulp
npm install gulp -g
3、在项目目录下安装gulp
npm install gulp --save-dev
4、配置package.json文件
在项目目录执行,依次输入即可
npm ini
{
"name":"gulp_test",/*项目名,切记这里命名不要与模块一样,如命名为gulp,要地安装gulp时就会出错*/
"version":"1.0.0",/*版本号*/
"description":"",/*描述*/
"main":"index.js",
"scripts": {
"test":"echo \"Error:notestspecified\" && exit 1"
},
"author":"",/*作者*/
"license":"ISC"/*项目许可协议*/
}
5、本地安装css压缩插件
npm install --save-dev gulp-minify-css
6、项目根目录创建gulpfile.js文件
// 获取 gulp
var gulp = require('gulp')
// 获取 minify-css 模块(用于压缩 CSS)
var minifyCSS = require('gulp-minify-css')
// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', function () {
// 1. 找到文件
gulp.src('css/*.css')
// 2. 压缩文件
.pipe(minifyCSS())
// 3. 另存为压缩文件
.pipe(gulp.dest('dist/css'))
})
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改,当文件被修改则执行 css 任务
gulp.watch('css/*.css', ['css'])
});
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 css 任务和 auto 任务
gulp.task('default', ['css', 'auto'])
7、运行gulp看结果
直接命令行运行gulp,退出监听按ctrl+c
B、图片压缩
1、安装图片压缩插件
npm install gulp-imagemin –save-dev
npm install imagemin-pngquant –save-dev
2、配置gulpfile.js
可以参考这个gulpt图片压缩
深度压缩
var gulp = require('gulp'),
imagemin = require('gulp-imagemin'), //确保本地已安装
pngquant = require('imagemin-pngquant');
gulp.task('testImagemin', function () {
gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
}))
.pipe(gulp.dest('dist/img'));
});
添加执行程序
gulp.task('default',function(){ gulp.start('css','Imagemin'); });
C、Less
参考这篇文章gulp-less
D、JS合并压缩
1、合并
安装插件
npm install gulp-concat --save-dev
编辑gulpfile.js
var gp = require('gulp');
var concat = require('gulp-concat');
gp.task("taskName",function(){
// 把1.js和2.js合并为main.js,输出到dest/js目录下
gp.src(['1.js','2.js']).pipe(concat('main.js')).pipe(gp.dest('./dest/js'));
})
命令行执行
gulp taskName
2、压缩
npm install gulp-uglify --save-dev
var gp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gp.task("taskName",function(){
// 把1.js和2.js合并压缩为main.js,输出到dest/js目录下
gp.src(['1.js','2.js']).pipe(concat('main.js')).pipe(uglify()).pipe(gp.dest('./dest/js'));
})
可以吧gulp在项目中生成的文件直接复制到新项目,这样就不用安装了,直接在该项目目录下运行就好。