gulp打包css/image/Less/Sass

其他的和打包前一篇随笔（打包js）

http://www.cnblogs.com/teersky/p/7251329.html

相同，本篇文章主要写gulpFile.js的配置：

安装CSS打包插件：

cnpm install gulp
cnpm install gulp-minify-css

之后新建gulpfile.js文件

//打包css
var gulp =require ("gulp")
var minifyCss=require ("gulp-minify-css")
gulp.task("css", function () {
        
    gulp.src("css/*.css")
        .pipe(minifyCss())
        .pipe(gulp.dest("dist/css"))
})

gulp.task("auto",function(){
        gulp.watch("css/*.css",["css"])
})
gulp.task("default",["css","auto"])

打包js和打包css主要区别计算css中require的包名称为gulp-minify-css，

 

安装image打包插件：

cnpm install gulp
cnpm install gulp-imagemin

之后新建gulpfile.js文件

//打包图片
var gulp = require('gulp');

var imagemin = require('gulp-imagemin')

gulp.task('images', function () {
    gulp.src('img/*.*')
        .pipe(imagemin({
            progressive: true
        }))
        .pipe(gulp.dest('dist/img'))
});

gulp.task('auto', function () {
    gulp.watch('images/*.*)', ['images'])
});

gulp.task('default', ['images', 'auto'])

打包js和打包css主要区别计算css中require的包名称为gulp-imagemin，

 

安装Less打包插件：

cnpm install gulp
cnpm install gulp-less

之后新建gulpfile.js文件

//打包Less
var gulp = require ("gulp")
var gulpLess = require ("gulp-less")

gulp.task("less", function(){
    gulp.src('css/*.less')
        .pipe(gulpLess())
        .pipe(gulp.dest("disk/css"))
})

gulp.task("auto", function(){
    gulp.watch("css/*.css",["less"])
})

gulp.task("default", ["less","auto"])

打包js和打包css主要区别计算css中require的包名称为gulp-less，

 

安装Sass打包插件：

cnpm install gulp
cnpm install gulp-ruby-sass

之后新建gulpfile.js文件

//打包Sess
var gulp = require('gulp')
var sass = require('gulp-ruby-sass')
gulp.task('sass', function() {
    return sass('sass/') 
    .on('error', function (err) {
      console.error('Error!', err.message);
   })
    .pipe(gulp.dest('dist/css'))
});

gulp.task('auto', function () {
    gulp.watch('sass/**/*.scss', ['sass'])
});
gulp.task('default', ['sass', 'auto'])

打包js和打包css主要区别计算css中require的包名称为gulp-ruby-sass，

 

其他的和js打包基本一致,

运行统一为： gulp

ok，搞定