gulp实战入门

文件目录

G:.
│  gulpfile.js
│  index.html
│  package.json
│
├─dist
│  │  index.html
│  │
│  ├─css
│  │      build.min.css
│  │
│  └─js
│          build.js
│          build.min.js
│
└─src
    ├─css
    │      index.css
    │      index1.css
    │
    ├─js
    │      test1.js
    │      test2.js
    │
    ├─less
    │      index.less
    │
    └─views

gulpfile.js

var gulp= require('gulp')
var rename = require('gulp-rename')
var cleanCss = require('gulp-clean-css')//压缩css
var concat = require('gulp-concat')//合并文件
var less = require('gulp-less')//less转为css
var livereload = require('gulp-livereload')//自动编译
var uglify = require('gulp-uglify')//压缩文件
var htmlMin = require('gulp-htmlmin')
var connect = require('gulp-connect')//热加载
var open = require('open')//自动打开浏览器
gulp.task('js',function(){
    return gulp.src('src/js/**/*.js')//return就可以异步，没有return就是同步
    .pipe(concat('build.js'))//合并成为
    .pipe(gulp.dest('dist/js/'))//输出到
    .pipe(uglify())//压缩
    .pipe(rename({suffix:'.min'}))//重命名
    .pipe(gulp.dest('dist/js/'))
    .pipe(livereload())//半自动时自动编译
    .pipe(connect.reload())//全自动，编译后自动刷新浏览器
})
gulp.task('less',function(){
    return gulp.src('src/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('src/css'))
    .pipe(livereload())
    .pipe(connect.reload())
})
gulp.task('css',['less'],function(){
    return gulp.src('src/css/*.css')
    .pipe(concat('build.css'))
    .pipe(rename({suffix:'.min'}))
    .pipe(cleanCss({compatibility:'ie8'}))//IE8兼容
    .pipe(gulp.dest('dist/css/'))
    .pipe(livereload())
    .pipe(connect.reload())
})
gulp.task('html',function(){
    return gulp.src('index.html')
    .pipe(htmlMin({collapseWhitespace:true}))//打包时去掉所有空格
    .pipe(livereload())
    .pipe(gulp.dest('dist/'))
    .pipe(connect.reload())
})
gulp.task('default',['js','css','html'])
//半自动（自动编译，没有自动更新浏览器）
gulp.task('watch',['default'],function(){//自动编译,gulp watch
    livereload.listen();
     gulp.watch('src/js/*.js',['js'])
    gulp.watch(['src/css/*.css','src/less/*.less'],['css'])
})
//全自动（自动编译，自动更新浏览器）
gulp.task('server',['default'],function(){//gulp server
    connect.server({
        root:'dist/',//打包的文件所放的目录
        livereload:true,
        port:3000
    })
    gulp.watch('src/js/*.js',['js'])
    gulp.watch(['src/css/*.css','src/less/*.less'],['css'])
})
open('http://localhost:3000/')

index.html

<script src="js/build.min.js"></script>
<link rel="stylesheet" href="css/build.min.css">

package.json

{
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-clean-css": "^4.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.7.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-less": "^4.0.1",
    "gulp-livereload": "^4.0.2",
    "gulp-load-plugins": "^2.0.1",
    "gulp-rename": "^1.4.0",
    "gulp-uglify": "^3.0.2",
    "open": "^7.0.0"
  }
}

全能gulp-load-plugins

var gulp= require('gulp')
var $ = require('gulp-load-plugins')()
// var rename = require('gulp-rename')
// var cleanCss = require('gulp-clean-css')
// var concat = require('gulp-concat')
// var less = require('gulp-less')
// var livereload = require('gulp-livereload')
// var uglify = require('gulp-uglify')
// var htmlMin = require('gulp-htmlmin')
// var connect = require('gulp-connect')
var open = require('open')
gulp.task('js',function(){
    return gulp.src('src/js/**/*.js')//return就可以异步，没有return就是同步
    .pipe($.concat('build.js'))//合并成为
    .pipe(gulp.dest('dist/js/'))//输出到
    .pipe($.uglify())//压缩
    .pipe($.rename({suffix:'.min'}))//重命名
    .pipe(gulp.dest('dist/js/'))
    .pipe($.livereload())
    .pipe($.connect.reload())
})
gulp.task('less',function(){
    return gulp.src('src/less/*.less')
    .pipe($.less())
    .pipe(gulp.dest('src/css'))
    .pipe($.livereload())
    .pipe($.connect.reload())
})
gulp.task('css',['less'],function(){
    return gulp.src('src/css/*.css')
    .pipe($.concat('build.css'))
    .pipe($.rename({suffix:'.min'}))
    .pipe($.cleanCss({compatibility:'ie8'}))//IE8兼容
    .pipe(gulp.dest('dist/css/'))
    .pipe($.livereload())
    .pipe($.connect.reload())
})
gulp.task('html',function(){
    return gulp.src('index.html')
    .pipe($.htmlmin({collapseWhitespace:true}))//打包时去掉所有空格
    .pipe($.livereload())
    .pipe(gulp.dest('dist/'))
    .pipe($.connect.reload())
})
gulp.task('default',['js','css','html'])
gulp.task('watch',['default'],function(){//自动编译,gulp watch
    $.livereload.listen();
     gulp.watch('src/js/*.js',['js'])
    gulp.watch(['src/css/*.css','src/less/*.less'],['css'])
})
gulp.task('server',['default'],function(){//gulp server
    $.connect.server({
        root:'dist/',//打包的文件所放的目录
        livereload:true,
        port:3000
    })
    gulp.watch('src/js/*.js',['js'])
    gulp.watch(['src/css/*.css','src/less/*.less'],['css'])
})
open('http://localhost:3000/')