码迷,mamicode.com
首页 > 其他好文 > 详细

构建gulp环境

时间:2017-09-16 16:10:49      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:func   span   还需要   blog   run   任务   gulp   监听文件   src   

第一步:

  node环境下全局安装gulp

    npm install gulp -g

第二步:

  项目文件,并自动生成package.json文件

    npm init

第三步:

  安装需要的插件

    npm install gulp gulp-connect gulp-concat gulp-minify-css gulp-uglify gulp-sass --save-dev

    gulp (本地gulp)

    gulp-connect (用于开启本地服务)

    gulp-concat (用户打包多个文件)

    gulp-uglify (用于压缩js文件)

    gulp-minify-css (用户压缩css文件)

    gulp-sass (用于编译scss文件)

    --save-dev (理解为开发时需要依赖的)

    --save (理解为发布后还需要依赖的)

第四步:

  创建gulpfile.js文件

//导入工具包
var gulp = require(gulp);
var concat = require(gulp-concat);
var connect = require(gulp-connect);
var uglify = require(gulp-uglify);
var minifyCss = require(gulp-minify-css);


//合并压缩我的js文件到build目录
gulp.task(myjs, function() {
    gulp.src(./web/**/*.js)
        .pipe(concat(myall.min.js))
        .pipe(uglify())
        .pipe(gulp.dest(./build))
});

//合并压缩我的css文件到build目录
gulp.task(mycss, function() {
    gulp.src(./web/**/*.css)
        .pipe(concat(myall.min.css))
        .pipe(minifyCss())
        .pipe(gulp.dest(./build))
});

//连接服务
gulp.task(connect, function() {
    connect.server({
        port: 8081
    });
});

// 默认任务
gulp.task(default, function(){
    gulp.run(connect, watch, mycss, myjs)
});

// 监听文件变化
gulp.task(watch, function() {
    gulp.watch(./web/**/*.js, function(){
        gulp.run(myjs);
    });
    gulp.watch(./web/**/*.css, function(){
        gulp.run(mycss);
    });
});

 

  

构建gulp环境

标签:func   span   还需要   blog   run   任务   gulp   监听文件   src   

原文地址:http://www.cnblogs.com/tqt--0812/p/7531221.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!