JS/CSS自动注入

将以上代码另存成auto_version.py文件后,新建auto_version.bat文件,写入以下内容:

gulp-uglify其他参数 具体参看

var gulp = require('gulp'),
    uglify= require('gulp-uglify');

gulp.task('jsmin', function () {
    gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
        .pipe(uglify({
            mangle: true,//类型:Boolean 默认:true 是否修改变量名
            compress: true,//类型:Boolean 默认:true 是否完全压缩
            preserveComments: 'all' //保留所有注释
        }))
        .pipe(gulp.dest('dist/js'));
});

修改好.bat文件里的路径后,双击运行即可。

gulp-load-plugins 模块化管理。可以加载package.json文件中所有的gulp模块

import os
import re
import uuid
import sys


def file_extension(path):
    return os.path.splitext(path)[1]


basePath = sys.argv[1]
if len(sys.argv)==1:
    sys.exit()


html_list = []


def find_html(path):
    files = os.listdir(path=path)

    for item in files:
        abs_path = os.path.join(path, item)
        if not os.path.isdir(abs_path) and file_extension(abs_path) == ".html":
            html_list.append(abs_path)

        if (os.path.isdir(abs_path)):
            find_html(abs_path)


def deal_html(html_list):
    for html_path in html_list:
        html_file = open(html_path, "r+", encoding='UTF-8')
        content = html_file.read()
        # print(html_file.read())
        # res = re.sub(r'<link (.*) href="(.*).css".*>',r'<link 1 href="2.css?v=1"3>',content)
        res1 = re.sub(r'<link (.*) href="(.*).css.*"(.*)>', lambda x: '<link ' + x.group(1) + ' href="' + x.group(
            2) + '.css?v=' + uuid.uuid1().hex + '"' + x.group(3) + '>', content)
        res2 = re.sub(r'<script src="(.*).js.*"></script>',
                      lambda x: '<script src="'%20+%20x.group(1)%20+%20'.js?v='%20+%20uuid.uuid1().hex%20+%20'"></script>', res1)
        html_file.seek(0)
        html_file.truncate()
        html_file.write(res2)
        html_file.close()


if __name__ == '__main__':
    find_html(basePath)
    deal_html(html_list)

gulp-filter 过滤文件

Example:https://github.com/hjzheng/CUF_meeting_knowledge_share/blob/master/2015-11-10/gulpfile.js
gulp-filter可以把stream里的文件根据一定的规则进行筛选过滤。比如gulp.src中传入匹配符匹配了很多文件,可以把这些文件pipe给gulp-filter作二次筛选,如gulp.src(‘*/.js’).pipe($.filter(/a/*.js)),本来选中了所有子文件下的js文件,经过筛选后变成名为a的子文件夹下的js文件。那有人要问了,为什么不直接将需要的筛选传入gulp.src,干嘛要多筛选一步呢?这里面有两种情况:

gulp.src与$.filter中间可能需要别的处理,比如我对所有文件做了操作1以后,还需要筛选出一部分做操作2。
第二种情况就要谈到gulp-filter的另外一个特性:筛选之后还可以restore回去。比如我对所有文件做了操作1,筛选了一部分做操作2,最后要把所有的文件都拷贝到最终的位置。代码如下:

var filter = $.filter('**/a/*.js');
gulp.src('**/*.js')
    .pipe(action1())
    .pipe(filter)
    .pipe(action2())
    .pipe(filter.restore())
    .pipe(gulp.dest('dist'))

可以看到,如果没有restore这个操作,那么拷贝到最终位置的文件将只包含被过滤出来的文件,这样一restore,所有的文件都被拷贝了。

python ./auto_version.py "D:your project dir"

estraverse 遍历函数

 

gulp-mini-html

传统的给文件链接添加版本号的方法是使用gulp-rev,这里提出的解决方案是使用python来替代gulp-rev。

gulp-eslint

深度压缩图片

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    //确保本地已安装imagemin-pngquant [cnpm install imagemin-pngquant --save-dev]
    pngquant = require('imagemin-pngquant');

gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
            use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
        }))
        .pipe(gulp.dest('dist/img'));
});

gulp-zip

为什么使用

基本使用

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('jsmin', function () {
    gulp.src('src/js/index.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

gulp-shell

main-bower-files

代码同步

chalk

gulp-livereload 实时刷新

gulp-rename 修改文件名称。比如有时我们需要把app.js改成app.min.js,瞬间高级了

lodash

工具

gulp-uglify //压缩、混淆js文件用的

代码分析

压缩

del 清除文件

gulp-sass 编译sass用的

AngularJS

gulp-css-base64

把小图片的URL替换为Base64编码图片。

gulp-imagemin 压缩图片

压缩图片文件(包括PNG、JPEG、GIF和SVG图片)
github:https://github.com/sindresorhus/gulp-imagemin

browser-sync 使用方法

gulp-util

gulp-util带有很多方便的函数,其中最常用的应该就是log了。$.util.log()支持传入多个参数,打印结果会将多个参数用空格连接起来。它与console.log的区别就是所有$.util.log的结果会自动带上时间前缀。另外,它还支持颜色,如$.util.log($.util.colors.magenta(‘123’));打印出来的123是品红色的。其实$.util.colors就是一个
chalk的实例,而chalk是专门用来处理命令行打印着色的一个工具。

gulp-angular-templatecache 将html模板缓存到$templateCache中

压缩多个js文件

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('jsmin', function () {
    gulp.src(['src/js/index.js','src/js/detail.js']) //多个文件以数组形式传入
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

基本用法

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('testAutoFx', function () {
    gulp.src('src/css/index.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, //是否美化属性值 默认:true 像这样:
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove:true //是否去掉不必要的前缀 默认:true 
        }))
        .pipe(gulp.dest('dist/css'));
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注