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在项目中生成的文件直接复制到新项目，这样就不用安装了，直接在该项目目录下运行就好。
基础常用配置
const plugins = require('gulp-load-plugins')()
const gulp = require('gulp');
// const args = require('yargs').argv; //用于获取启动参数，针对不同参数，切换任务执行过程时需要
const uglify = require('gulp-uglify') //js压缩
const sass = require('gulp-sass'); //将sass预处理为css
const cssMinify = require("gulp-minify-css"); //压缩css
const autoprefixer = require('gulp-autoprefixer'); //解决内核前缀
const imagemin = require('gulp-imagemin'); //压缩图片
const pngquant = require('imagemin-pngquant'); //深度压缩
const cache = require('gulp-cache'); //只压缩没压缩过的,压缩过的从缓存中获取
const rename = require('gulp-rename'); //重命名
const browserSync = require('browser-sync'); //监听文件的更改并且自动刷新页面
const concat = require('gulp-concat'); //合并文件
const notify = require('gulp-notify'); // 提示
const reload = browserSync.reload; //静态文件服务器，同时也支持浏览器自动刷新
// const ngConstant = require('gulp-ng-constant');
const del = require('del'); //删除build文件(当css，img，js出现删除操作的时候，虽然watch会监听，但是并不会删除相应文件。)
const paths = {
appDir: "./app/",
outputDir: "./dist/",
sassSrc: {
input: './app/css/*.scss',
output: './dist/css/',
},
imgSrc: {
input: ['./app/img/*.png', './app/img/*.jpg'],
output: './dist/img/'
},
jsSrc: {
input: ['./app/js/*.js'],
output: './dist/js/'
},
watch: {
sass: ['./app/**/*.scss'],
css: ['./app/app.css'],
html: ['app/**/*.html', 'app/*html'],
js: ['app/**/*.js', '!app/**/*.js']
},
copySrc: ['./app/**/*', '!./app/scss', '!./app/scss/*.*', '!./app/**/*.scss', '!./app/**/package.json', '!./app/**/bower.json']
};
//JS处理
gulp.task('minifyjs', function() {
return gulp.src(paths.jsSrc.input) //选择合并的JS
.pipe(concat('order_query.js')) //合并js
.pipe(rename({ suffix: '.min' })) //重命名
.pipe(uglify()) //压缩
.pipe(gulp.dest('dist/js')) //输出
.pipe(notify({ message: "js task ok" })); //提示
});
//转换成css,加css前缀,压缩
gulp.task('sass', function() {
return gulp.src(paths.sassSrc.input)
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions', 'Android >= 4.0'],
cascade: false, //是否美化属性值(对齐) 默认：true
}))
.pipe(cssMinify()) //gulp-minify-css压缩比gulp-sass自带压缩效率好
.pipe(gulp.dest(paths.sassSrc.output))
});
// 压缩图片
gulp.task('images', function() {
return gulp.src(paths.imgSrc.input)
.pipe(cache(imagemin({
progressive: true,
use: [pngquant()]
})))
.pipe(gulp.dest(paths.imgSrc.output))
});
gulp.task('default', ['sass', 'images', 'minifyjs']);
gulp.task('build', ['sass', 'images', 'minifyjs']);
网友评论