gulp:压缩css、合并压缩js、压缩图片、Less使用

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在项目中生成的文件直接复制到新项目，这样就不用安装了，直接在该项目目录下运行就好。