nvm & npm & node.js -- > 前端优化实例

实现步骤：

在cmd中：
1、选择项目目录  
2、npm install -g cnpm --registry=https://registry.npm.taobao.org -->淘宝镜像
3、npm init 初始化
4、cnpm install gulp --save-dev  -->安装gulp

运行项目：gulp 对象名

 

示例代码：

gulpfile.js

var gulp = require("gulp") 
var css = require("gulp-cssnano")
var rename = require("gulp-rename")
var uglify = require("gulp-uglify")
var hebing = require("gulp-concat")
var image = require("gulp-imagemin")
var cache = require("gulp-cache")
var connect = require("gulp-connect")
var bs = require("browser-sync").create()

//简单打印
gulp.task("kangbazi",function () {
    console.log('hello world');
});

//修改文件后浏览器自动刷新
gulp.task("bs",function(){
    bs.init({
        'server':{
            'baseDir':'./'
        }
    });
});

//css文件压缩后重命名
gulp.task("css",function(){
    gulp.src("./css/*.css")
    .pipe(css())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
    // .pipe(connect.reload())
    .pipe(bs.stream())
});

//定义一个监听任务
gulp.task("watch",function(){
    // 监听所有的css文件，然后执行css这个任务
    gulp.watch("./css/*.css",['css'])
    gulp.watch("./js/*.js",['uglify'])
});

//监听过程
gulp.task("default",['bs','watch'])

//js文件压缩后重命名
gulp.task("uglify",function(){
    gulp.src("./js/*.js")
    .pipe(uglify())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./js/dist/"))
    .pipe(bs.stream())
});

//压缩并合并文件
gulp.task("hebing",function(){
    //选择要合并的文件
    gulp.src([
            './css/css.css',
            './css/css1.css'
        ])
    //合并后的文件名
    .pipe(hebing('finall.min.css')) 
    //这一步实现压缩
    .pipe(css()) 
    //放到指定的位置 
    .pipe(gulp.dest('./css/dist/'))
});

//图片压缩
gulp.task("image",function(){
    gulp.src("./images/*.*")
    .pipe(cache(image()))
    .pipe(gulp.dest("./images/dist"))
});

packge.json

{
  "devDependencies": {
    "browser-sync": "^2.24.7",
    "gulp": "^3.9.1",
    "gulp-cache": "^1.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.6.1",
    "gulp-cssnano": "^2.1.3",
    "gulp-imagemin": "^4.1.0",
    "gulp-rename": "^1.4.0",
    "gulp-uglify": "^3.0.1"
  }
}