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

原文地址:https://www.cnblogs.com/teersky/p/7251456.html