gulp工作流

gulp中文API地址:http://www.gulpjs.com.cn/docs/api/

一些gulp插件的介绍:https://juejin.im/entry/55c8dbb160b22a3ebdf34d57

1.新建一个空项目文件夹，cd到该目录下初始化npm配置文件

此时在目录下多出一个package.json文件：

2.接下来我们需要初始化gulp依赖

npm install gulp --save-dev

 

运行完后会看到项目目录下多了一个node_modules文件夹

并且在package.json里已经加上了dev的gulp属性项：

3.在项目根目录下添加一个gulpfile.js文件，这个是gulp的主文件

4.在gulpfile中抽象我们的任务

要实现这些任务需要安装对应的插件

5.gulpfile.js:

/**
 * Created by dyk-pc on 2017/5/31.
 */

'user strict'

//在gulpfile中先载入gulp包 因为这个包提供了一些api
var gulp = require("gulp");
var less = require('gulp-less');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var browserSync = require('browser-sync');//浏览器同步

//任务一：Less编译 压缩 合并
gulp.task('style',function () {
    //这里是在执行style任务的时候自动执行的
    gulp.src('src/styles/*.less')
        .pipe(less())//把less编译为css
        .pipe(cssnano())//压缩
        .pipe(gulp.dest('dist/styles'))
        .pipe(browserSync.reload({
            stream:true
        }))
})

//任务二:Js合并 压缩 混淆
gulp.task('script',function () {
    gulp.src('src/scripts/*.js')
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/scripts'))
        .pipe(browserSync.reload({
            stream:true
        }))
})

//任务三:img复制
gulp.task('image',function () {
    gulp.src('src/images/*.*')
        .pipe(gulp.dest('dist/images'))
        .pipe(browserSync.reload({
            stream:true
        }))
})

//任务四:html压缩
gulp.task('html',function () {
    gulp.src('src/*.html')
        .pipe(htmlmin({
            collapseWhitespace:true,
            removeComments:true
        }))
        .pipe(gulp.dest('dist'))
        .pipe(browserSync.reload({
            stream:true
        }))
})

//把任务架设在服务器 实现浏览器同步操作
gulp.task('server',function () {
    browserSync({
        server:{
            baseDir:['dist']
        },
    },function (err,bs) {
        
    });
    gulp.watch('src/styles/*.less',['style']);
    gulp.watch('src/scripts/*.js',['script']);
    gulp.watch('src/images/*.*',['image']);
    gulp.watch('src/*.html',['html']);
});