Gulp常用插件

Gulp

从npm安装

1 :

npm install --global gulp 
//全局安装

2 :

npm install --save-dev gulp
//在项目中安装

3 :

//在项目根目录创建一个 gulpfile.js,在这个文件中书写代码

var gulp=require('gulp')

gulp.task('default',function(){
  //这里写你的代码
})

4 :

//npm 运行
gulp

已经算是可以开始入门了,下面咱们写点有意思的;

npm 需要下载的统一放在这里

压缩JS代码 :   npm install --save-dev gulp-uglify



压缩CSS   :    npm install --save-dev gulp-minify-css



压缩HTML :    npm install --save-dev gulp-minify-html



合并JS   :    npm install --save-dev gulp-concat



编译LESS :    npm install --save-dev gulp-less



编译SASS :    npm install --save-dev gulp-sass



热加载   :   npm install --save-dev gulp-livereload   

压缩JS :

//   代码 :
var gulp=require('gulp')
//引入unlify引擎
var gulify=require('gulp-uglify')
//定义压缩JS代码任务
gulp.task('yasuo',function(){
  gulp.src(['js/index.js','!js/*.ming.js'])     //  参数1 : 获取路径, 参数2 : 避免压缩的JS文件
        .pipe(uglify())                        //   执行压缩代码命令
        .pipe(gulp.dest('src/'))              //    输出文件 
        console.log('压缩JS代码完毕')
})

压缩CSS

//   代码
var minify=require('gulp-minify-css')
gulp.task('yscss',function () {
    //获取文件
    gulp.src(['src/*.css','!src/css/*.min.css'])
        .pipe(minify())
        .pipe(gulp.dest('src'))
    console.log('压缩CSS代码完毕')
})

压缩html

var gulp = require('gulp');
var htmlmini = require('gulp-minify-html');

gulp.task('htmlmini', function () {
    gulp.src('*.html')
        .pipe(htmlmini())
        .pipe(gulp.dest('minihtml'));
})

合并JS代码

//JS合并
var concat=require('gulp-concat')

gulp.task('gulp:concat',function () {
    gulp.src('src/js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist/js'))
})

编译LESS

//编译LESS
gulp.task('less',function () {
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('dist/css'))
})

编译SASS

gulp.task('compile-sass', function () {
    gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

热加载

//当代码变化时，它可以帮助我们自动刷新页面，该插件最好配合谷歌浏览器，且要安装livereload chrome extension扩展插件，否则无效。
var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');

gulp.task('less', function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});  

gulp.task('watch', function() {
  livereload.listen(); //要在这里调用listen()方法
  gulp.watch('less/*.less', ['less']);  //监听目录下的文件，若文件发生变化，则调用less任务。
});