最近需要对项目进行优化,主要是对js的压缩合并和css文件的压缩,查找相关资料之后发现gulp可以实现相关的功能，特此分享一下使用心得。
gulp是基于Node.js的前端构建工具。所以首先需要安装nodejs，安装nodejs。
完成nodejs安装之后，需要使用npm安装gulp。
先安装全局gulp
npm install -g gulp
后在项目根目录下安装本地gulp。
好的，现在gulp已经安装完成了，但是gulp本身不提供js压缩合并等功能，需要使用gulp的相关插件。目前只需要完成js压缩合并和css文件压缩的功能，先安装相应的插件：
1.css压缩 gulp-minify-css
2.js压缩 gulp-uglify
3.js合并 gulp-concat
4.图片压缩 gulp-imagemin
1）png压缩 imagemin-optipng
2）jpg压缩 imagemin-jpegtran
3.html压缩 gulp-minify-html
由于压缩之前需要对js代码进行代码检测，压缩完成之后需要加上min的后缀，我们还需要安装另外两个插件：
5.重命名 gulp-rename
6.js代码检测 gulp-jshint (或gulp-jslint)
在项目根目录下执行以下命令：
npm install gulp-Name --save-dev
安装好的插件会出现在上面提到的node_modules文件夹中。
ok，现在可以使用gulp了，在项目根目录下创建gulpfile.js文件。
在gulpfile.js中添加以下代码
var gulp = require('gulp'),
var minifycss = require('gulp-minify-css'),
var concat = require('gulp-concat'),
var uglify = require('gulp-uglify'),
var rename = require('gulp-rename'),
var jshint=require('gulp-jshint');
var uglify = require("gulp-uglify");//压缩js
var minifyCss = require("gulp-minify-css");//压缩css
var minifyHtml = require("gulp-minify-html");//压缩html
var concat = require("gulp-concat");//合并文件
var less = require("gulp-less");//less编译
var imagemin = require('gulp-imagemin');//压缩图片
var pngquant = require('imagemin-optipng'); //png图片压缩插件
var jpgquant = require('imagemin-jpegtran'); //jpg图片压缩插件
var rimraf = require('rimraf');//删除文件
var rename = require('gulp-rename');//重命名
// 压缩js
gulp.task('minify-js', function () {
gulp.src(yeoman.app+'/scripts/**/*.js') // 要压缩的js文件
.pipe(uglify()) //使用uglify进行压缩,更多配置请参考：
.pipe(rename({suffix: '.min'}))//添加min后缀
.pipe(gulp.dest('dist/js')); //压缩后的路径
});
// 压缩css
gulp.task('minify-css', function () {
gulp.src('app/styles/*.css') // 要压缩的css文件
.pipe(minifyCss()) //压缩css
.pipe(rename({suffix: '.min'}))//添加min后缀
.pipe(gulp.dest(yeoman.dist+'/css'));
});
gulp.task('mini-css', function () {
gulp.src('css/*.css') // 要压缩的css文件
.pipe(minifyCss()) //压缩css
.pipe(rename({suffix: '.min'}))//添加min后缀
.pipe(gulp.dest('dest/css'));
});
// 压缩HTML
gulp.task('minify-html', function () {
gulp.src('app/views/**/*.html') // 要压缩的html文件
.pipe(minifyHtml()) //压缩
.pipe(rename({suffix: '.min'}))//添加min后缀
.pipe(gulp.dest('dist/views'));
});
// 合并文件
gulp.task('concat', function () {
gulp.src('js/*.js') //要合并的文件
.pipe(concat('all.js')) // 合并匹配到的js文件并命名为 "all.js"
.pipe(uglify()) //使用uglify进行压缩,更多配置请参考：
.pipe(rename({suffix: '.min'}))//添加min后缀
.pipe(gulp.dest('dist/js'));
});
// 使用less
gulp.task('compile-less', function () {
gulp.src('less/*.css')
.pipe(less())
.pipe(gulp.dest('dist/css'));
});
// 图片压缩ipg
gulp.task('mini-jpg', function () {
return gulp.src('app/images/*')
.pipe(imagemin({
progressive: true,
use: [jpgquant()] //使用jpgquant来压缩jpg图片
}))
.pipe(gulp.dest('dist/images'));
});
gulp.task('mini-png', function () {
return gulp.src('app/images/*')
.pipe(imagemin({
progressive: true,
use: [pngquant()] //使用jpgquant来压缩jpg图片
}))
.pipe(gulp.dest('dist/images/png'));
});
相应的package.json文件
{
"name": "gulp",
"private": true,
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "2.3.1",
"gulp-cache": "^0.2.10",
"gulp-connect": "^2.2.0",
"gulp-filter": "^2.0.2",
"gulp-imagemin": "^2.4.0",
"gulp-jshint": "^1.11.1",
"gulp-less": "^3.1.0",
"gulp-load-plugins": "^0.10.0",
"gulp-minify-css": "^1.2.0",
"gulp-minify-html": "^1.0.6",
"gulp-ng-annotate": "^1.0.0",
"gulp-plumber": "^1.0.1",
"gulp-rename": "~1.2.0",
"gulp-rev": "^5.0.1",
"gulp-rev-replace": "^0.4.2",
"gulp-uglify": "^1.2.0",
"gulp-useref": "^3.0.0",
"gulp-util": "^3.0.6",
"gulp-watch": "^4.2.4",
"jshint-stylish": "^1.0.0",
"lazypipe": "^0.2.4",
"open": "0.0.5",
"rimraf": "^2.4.0",
"run-sequence": "^1.1.1",
"wiredep": "^2.2.2"
},
"engines": {
"node": ">=0.10.0"
}
}
(如果Js文件有问题时，会出现相应的error提示，按照提示的错误信息修改即可)
评论