gulp安装以及live-server使用

Gulp 是一个自动化工具 - 通常称构建工具

Gulp插件大全：http://www.cnblogs.com/-ding/p/5972162.html 

附件含有gulpfile.js

live-server 可以帮助我们前端人员搭建临时的http服务器。它不需要安装任何插件，使用起来比较便捷。它可以自动打开项目；修改本地文件后，浏览器能够立即同步，自动加载，自动刷新。

安装流程：

注意：以下安装环境都需要依赖node环境；打开命令行窗口：window -> 运行 -> cmd

          -g：全局安装；

          --save：将保存配置信息至package.json；

           -dev : 保存至package.json的devDependencies节点 ;

一、安装nodejs

        安装：打开https://nodejs.org/en/，点击download下载即可。

        查看是否安装成功：命令行窗口输入-> node -v 与 npm -v（npm是在安装nodejs同时安装的nodejs包管理器），出现版本号表明安装成功

二、全局安装Gulp

        安装：命令提示符执行npm install gulp -g 

        查看是否安装成功：命令提示符输入->gulp-v 

三、新建package.json文件

      1.新建test项目；

命令行窗口一些基本命令：
cd  定位到目录，用法：cd + 路径 ；

cd .. 返回上一级目录

dir  列出文件列表；

cls  清空命令提示符窗口内容。

cd F                                进入F盘
mkdir test                          创建test文件
cd test                             进入test目录
mkdir css sass js image             在test目录下创建css文件，sass文件，js文件，image文件
cd.>index.html                      在test目录下创建index.html
cd sass                             进入sass目录
cd.> style.scss                     在sass目录创建style.scss

        2.命令行输入npm init 

           name:项目名称 （填写）

           varsion：项目版本（填写）

           description：项目描述（填写）

四、本地安装Gulp

        1.路径转向指定项目文件: cd D:\test

        2.安装：命令提示符执行npm install gulp --save-dev 

        查看是否安装成功：项目文件中生成 node_modules 文件

        全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能

五、本地安装Gulp插件

        注意： 

        3.在test目录下安装：命令输入：npm install gulp-concat gulp-rename gulp-jshint  gulp-compass   gulp-html-minify   gulp-clean-css   

              gulp-uglify   gulp-imagemin   gulp-tinypng-nokey   gulp-rev   gulp-rev-collector   --save-dev 

               查看是否安装成功：查看package.json；

六、新建gulpfile.js文件 并 执行 gulp

var gulp = require('gulp'),
    //jshint = require('gulp-jshint'),//js代码校验
    htmlmin = require('gulp-htmlmin'),
    concat = require('gulp-concat'), //合并代码
    uglify = require('gulp-uglify'), //压缩js代码
    rename = require('gulp-rename'),
    minifyCss = require('gulp-clean-css'),
    imageMin = require('gulp-imagemin');

var postcss = require('gulp-postcss');
var babel = require("gulp-babel");
var sass = require('gulp-sass');

var cssPath = [
    './css/*.css'
];
var targetImage = './dist/image';
var targetCss = './dist/css';
var targetJs = './dist/js'

var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');
var processors = [autoprefixer, cssnext, precss];

// gulp.task('minHtml',function(){
//     gulp.src('./*.html')
//     .pipe(htmlmin({
//         collapseWhitespace:true,
//         minifyJS:true,
//         minifyCSS:true,
//         removeComments:true,
//     }))
//     .pipe(gulp.dest('./dist/html'));
// });


// gulp.task('minifyCss', function (done) {
//     gulp.src(cssPath)
//         .pipe(postcss(processors))
//         .pipe(concat('style.css'))
//         .pipe(gulp.dest('./dist/css'))
//         .pipe(minifyCss({
//             keepSpecialComments: 0
//         }))
//         .pipe(rename({
//             suffix: '.min'
//         }))
//         .pipe(gulp.dest(targetCss))
//         .on('end', done);

// });

// gulp.task('image', function () {
//     gulp.src('image/*.*')
//         .pipe(imageMin({
//             progressive: true
//         }))
//         .pipe(gulp.dest(targetImage))
// })

// gulp.task("dealJs", function () {
//     return gulp.src("js/*.js")
//         .pipe(babel())
//         .pipe(uglify( {compress:{
//             drop_console:true
//            }}))
//         .pipe(gulp.dest(targetJs));
// });

// helpCenter
gulp.task('helpCenter-minCss', function (done) {
    gulp.src('./helpCenter/css/*.scss')
    .pipe(sass().on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(concat('style.css'))
        .pipe(gulp.dest('./helpCenter/dist/css'))
        .pipe(minifyCss({
            keepSpecialComments: 0
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./helpCenter/dist/css'))
        .on('end', done);
});

gulp.task('helpCenter-minImage', function () {
    gulp.src('./helpCenter/images/*.*')
        .pipe(imageMin({
            progressive: true
        }))
        .pipe(gulp.dest('./helpCenter/dist/images'))
});

gulp.task('helpCenter-minJs',function(){
    return gulp.src("./helpCenter/js/*.js")
        .pipe(babel())
        .pipe(uglify(
           {compress:{
            // drop_console:true
           }}
        ))
        .pipe(gulp.dest('./helpCenter/dist/js'));
});


gulp.task('watch', function () {
    // gulp.watch('./*.html',['minHtml']);
    // gulp.watch('./css/*.css', ['minifyCss']);
    // gulp.watch('./image/*.*', ['image']);
    // gulp.watch('./js/*.js', ['dealJs']);


    gulp.watch('./helpCenter/css/*.scss', ['helpCenter-minCss']);
    gulp.watch('./helpCenter/images/*.*', ['helpCenter-minImage']);
    gulp.watch('./helpCenter/js/*.js', ['helpCenter-minJs']);
});
// 'watch', 'minifyCss', 'image', 'dealJs',
gulp.task('default', [ 'helpCenter-minCss', 'helpCenter-minImage','helpCenter-minJs']);

         执行Gulp：命令输入： gulp  

 

全局安装live-server

            方法1

【1】安装  npm install -g live-server 

           【2】使用：打开项目，按shift,同时鼠标右键，然后选择【在此处打开命令窗口】，然后输入live-server 即可

方法2

也可以在package.json中增加以下代码，然后执行 npm run server

"scripts": {

       "server": "live-server ./ --port=8081"

}