gulp@3.9.1 初学者应用

写在前面 本文知识总结于尚硅谷

1 准备好以下

2 package.json

1. 先创建 package.json，写上

{
    "name": "gulp_test",
    "version": "1.0.0"
}

2. 再安装 npm install --save-dev gulp@3.9.1
3. 再安装 npm i --s-dev gulp-concat gulp-uglify gulp-rename gulp-less gulp-clean-css gulp-htmlmin gulp-livereload gulp-connect open

3 gulpfile.js

var gulp = require('gulp');
var $ = require('gulp-load-plugins')()
// var concat = require('gulp-concat');
// var uglify = require('gulp-uglify');
// var rename = require('gulp-rename');
// var less = require('gulp-less');
// var cssClean = require('gulp-clean-css');
// var htmlMin = require('gulp-htmlmin');
// var livereload = require('gulp-livereload');
// var connect = require('gulp-connect');
var open = require('open');


//h合并压缩js认
gulp.task('js', function(){
    return gulp.src('src/**/*.js')//任务是找到目标源文件，将数据读取到gulp内存中
        .pipe($.concat('build.js'))//临时合并文件，并并命名为build.js
        .pipe(gulp.dest('dist/js/'))//输出文件到本地
        .pipe($.uglify()) //压缩文件
        .pipe($.rename({suffix: '.min'}))//重命名
        .pipe(gulp.dest('dist/js/'))
        .pipe($.livereload())//实时刷新
        .pipe($.connect.reload())//热加载，实时刷新

})
//注册转换less任务
gulp.task('less', function () {
    return gulp.src('src/**/*.less')
        .pipe($.less())//编译less为css
        .pipe(gulp.dest('src/css/'))
        .pipe($.livereload())//实时刷新
        .pipe($.connect.reload())


})
//合并压缩css文件
gulp.task('css', function () {
    return gulp.src('src/**/*.css')
        .pipe($.concat('build.css'))
        .pipe($.rename({suffix: '.min'}))
        .pipe($.cleanCss({compatibility: 'ie8'}))//压缩
        .pipe(gulp.dest('dist/css/'))
        .pipe($.livereload())//实时刷新
        .pipe($.connect.reload())

})
//注册压缩html 任务
gulp.task('html', function () {
    return gulp.src('index.html')
        .pipe($.htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist/'))
        .pipe($.livereload())//实时刷新
        .pipe($.connect.reload())


})
// 注册监视任务（半自动）
gulp.task('watch',['default'],function () {
    //开启监听
    $.livereload.listen()
    //确认监听的目标 以及绑定响应的任务
    gulp.watch('src/**/*.js', ['js'])
    gulp.watch(['src/**/*.css','src/**/*.lSss'], ['css'])
})
// 注册监视任务(全自动)
gulp.task('server', function (){
    $.connect.server({
        root: 'dist/',
        livereload: true,
        port: 5000
    })
    //open可以自动打开指定的链接
    open('http://localhost:5000/')
    //确认监听的目标 以及绑定响应的任务
    gulp.watch('src/**/*.js', ['js'])
    gulp.watch(['src/**/*.css','src/**/*.less'], ['css'])
})
// 注册默认任务
// gulp.task('default',['js', 'less', 'css','html'])

• 4 note：

1. 在压缩html时，注意引入的css文件和js文件的 路径
2. 注意文件目录结构