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，搞定