gulp

gulp

npm init生成package.json

npm install npm install gulp --save -dev生成node_modules文件

/**
 * Created by yxh on 2017/7/12.
 */
var gulp = require('gulp');//包含gulp模块，可以使用gulp的方法
var sass = require('gulp-sass');
var less = require('gulp-less');
var connect = require('gulp-connect');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minifyCss = require('gulp-minify-css'); //  压缩CSS
var imagemin = require('gulp-imagemin');

//添加任务，有两个参数
gulp.task('hello',function(){
    console.log('hello,welcome!');
});

//指定默认列表,执行默认任务，将hello任务添加到列表,终端gulp，执行了gulp默认列表中的所有任务
gulp.task('default',['hello']);

//将单个文件复制到指定位置
// gulp.src()找出想要处理的文件，.pipe()是一个管道，可以处理文件
// .pipe(gulp.dest('dist'))将处理好的文件放到指定的地方
gulp.task('copy-index',function(){
    return gulp.src('index.html')
        .pipe(gulp.dest('dist'))
        .pipe(connect.reload());//刷新浏览器
})

//将images下的.jpg文件复制到dist/images
//gulp.task('images',function(){
//    return gulp.src('images/*.jpg').pipe(gulp.dest('dist/images'));
//});

//将images下的.jpg,.png的所有文件复制到dist/images
//gulp.src('images/*')
//gulp.src('images/*/*')
//gulp.src('images/**/*')
gulp.task('images',function(){
    return gulp.src('images/*.{png,jpg}')
        .pipe(imagemin())//优化图像文件的尺寸，不改变质量，让图像体积变小
        .pipe(gulp.dest('dist/images'))

});

//用到多个gulp，用数组将路径放在一起
//gulp.task('data',function(){
//    return gulp.src(['html/*.html','json/*.json']).pipe(gulp.dest('dist/data'));
//});

//排除文件
gulp.task('data',function(){
    return gulp.src(['html/*.html','json/*.json','!json/sercet-*.json'])
        .pipe(gulp.dest('dist/data'));
});

//给一个任务指定依赖任务
//先执行依赖任务，再执行包含的方法
gulp.task('build',['copy-index','images','data'], function () {
    console.log('success');
});

//监视文件index.html，当ndex.html发生变化时，执行copy-index任务
gulp.task('watch',function(){
    gulp.watch('index.html',['copy-index']);
    gulp.watch('images/**/*.{png,jpg}',['images']);
    gulp.watch('html/*.html','json/*.json','!json/sercet-*.json',['data']);
});

//gulp插件 plugin
//插件网址http://gulpjs.com/plugins/
//安装方法npm install gulp-css-scss

//插件安装
//gulp 插件基于 nodejs ，安装一个Gulp 插件和安装普通 Nodejs 包的方法是一样的。只需  $npm --save-dev install 插件名  就可以完成安装。
//
//1、gulp-sass
//
//预编译 sass 文件为 css 文件，SASS 不多说，如果项目中有使用 sass ，那么这个插件应该是必备的。前面的一篇文章中，已经对该插件有所使用了，可配置编译后输出风格、是否输出sourcemap 等常用选项。类似的项目还有 gulp-scss / gulp-sassdoc / compass
//
//安装： $npm install --save-dev gulp-sass
//
//文档：https://www.npmjs.com/package/gulp-sass/
//
//    2、browser-sync
//
//保持多浏览器、多设备同步、在前端开发是非常有用，可谓是必备组件。
//
//安装：npm install browser-sync
//
//文档：http://www.browsersync.io
//
//    3、gulp-imagemin
//
//压缩 png/jpg/git/svg 格式图片文件
//
//安装：$ npm install --save-dev gulp-imagemin
//
//文档：github.com/sindresorhus/gulp-imagemin
//
//4、gulp-gzip
//
//Gzip 插件
//
//安装：npm install gulp-gzip
//
//文档：github.com/jstuckey/gulp-gzip
//
//5、gulp-inject
//
//一个 js/css/webComponet注入插件，browser-sync里面继承了该组件，如果使用browser-sync就不必要再单独安装gulp-inject了
//
//安装：npm install gulp-inject
//
//文档：github.com/klei/gulp-inject
//
//6、gulp-markdown
//
//markdown 不用多说，这个基本上都要用到。
//
//安装：npm install gulp-markdown
//
//文档：github.com/sindresorhus/gulp-markdown
//
//7、gulp-plumber
//
//错误处理插件，如果不希望总是因为错误而中断任务的话，那么它几乎是必备组件。
//
//安装：npm install gulp-plumber
//
//文档：github.com/floatdrop/gulp-plumber
//
//8、gulp-minify-css
//
//压缩CSS文件，几乎也是必备
//
//安装：npm install gulp-minify-css
//
//文档：github.com/murphydanger/gulp-minify-css
//
//9、gulp-rename
//
//重命名文件的插件，当要把一个文件存储为不同版本时可以使用。比如在需要一个style.css同时你有需要一个style.min.css
//
//安装：npm install gulp-rename
//
//文档：github.com/hparra/gulp-rename
//
//10、gulp-concat
//
//顾名思义，用来整合文件用的。很常用
//
//安装：npm install gulp-concat
//
//文档：github.com/wearefractal/gulp-concat


gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
    gulp.watch('./sass/**/*.scss', ['sass']);
});

gulp.task('less', function () {
    return gulp.src('./sass/**/*.less')
        .pipe(less().on('error', less.logError))
        .pipe(gulp.dest('./css'));
});

gulp.task('less:watch', function () {
    gulp.watch('./sass/**/*.less', ['less']);
});
//创建本地服务器
// livereload: true 启用实时刷新的功能
gulp.task('server',function(){
    connect.server({
        root: 'dist',
        livereload: true
    });
});

//gulp 默认任务
gulp.task('default',['server','watch']);

//合并文件
gulp.task('scripts',function(){
    return gulp.src(['js/1.js','js/2.js'])
        .pipe(concat('index.js'))//合并文件
        .pipe(gulp.dest('dist/js'))//输出文件
        .pipe(uglify())//压缩js
        .pipe(rename('index.min.js'))//重命名
        .pipe(gulp.dest('dist/js'));//输出文件
});

//  压缩CSS
gulp.task('minifyCss', function() {
    return gulp.src('src/*.css')            //压缩的文件
        .pipe(minifyCss())                  //执行压缩
        .pipe(gulp.dest('dist/css'));       //输出文件夹
});

//  压缩jS
gulp.task('minifyJs', function() {
    return gulp.src('src/*.js')
        .pipe(concat('main.js'))            //合并所有js到main.js
        .pipe(rename({suffix: '.min'}))     //rename压缩后的文件名
        .pipe(uglify())                     //压缩
        .pipe(gulp.dest('dist/js'));        //输出
});