gulp学习心得

对于以下其中的src属性，是相对于gulpfile.js的路径！！！！！！

gulp常用插件：

/**
* npm 安装命令 npm install name --save-dev
* gulp-concat               合并文件
* browser-sync              自动刷新，静态服务
* gulp-load-plugins         自动加载gulp插件
* gulp-autoprefixer         设置浏览器版本自动处理浏览器前缀
* gulp-uglify               压缩js文件
* gulp-csso                 压缩优化css
* gulp-sass                 编译sass
* gulp-sourcemaps           生层map文件
* gulp-clean                删除文件
* gulp-sequence             让任务顺序执行【这个插件没有使用】
* gulp-htmlmin              压缩页面的html
* gulp-jshint               校验js语法     依赖 jshint

压缩CSS

// 压缩css
gulp.task('minCss', function(){
    return gulp.src('./development/css/frame.css')
               .pipe($.csso())
               .pipe(gulp.dest('./production/'));
});

检查，压缩，合并JS

// 检查、压缩、合并js
gulp.task('concatJs', ['cleanJsFile'], function(){
    return gulp.src([config.dev.scriptsPath + '**/*.js', config.dev.directivesPath + '**/*.js', config.dev.viewPath + '**/*.js'])
               .pipe($.sourcemaps.init())
               .pipe($.jshint.reporter('default'))
               .pipe($.concat('appCode.js'))
               .pipe($.uglify({
                    mangle: true, // 是否修改变量名，默认为 true
                    compress: true // 是否完全压缩，默认为 true
               }))
               .pipe($.sourcemaps.write('./'))
               .pipe(gulp.dest(config.dist.scriptsPath))
               .pipe(browserSync.reload({stream:true}));
});

文件合并

// 文件合并
gulp.task('fileConcat', function(){
    return gulp.src( './development/css/test.css' )
               .pipe($.concat('all.css'))
               .pipe(gulp.dest('./production/'));
});

删除目录

//删除目录
gulp.task('delFile', function(){
    del('../' + productionFileName);
    console.log("文件删除执行完毕！");
});

//删除目录
gulp.task('clean', function(){
    return gulp.src(config.dist.path)
               .pipe($.clean());
});

压缩html

/** 使用gulp-htmlmin压缩html，可以压缩页面javascript、css，* 去除页面空格、注释，删除多余属性等操作*/

var htmlMinOptions = {
    removeComments: true,//清除HTML注释
    collapseWhitespace: true,//压缩HTML
    collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
    removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
    removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
    minifyJS: true,//压缩页面JS
    minifyCSS: true//压缩页面CSS
};

gulp.task('copyDirectivesDir', ['cleanDirectivesDir'], function(){
    return gulp.src(config.dev.directivesPath + '**/*.html')
               .pipe($.htmlmin(htmlMinOptions))
               .pipe(gulp.dest(config.dist.directivesPath))
               .pipe(browserSync.reload({stream:true}));
});